> ## Documentation Index
> Fetch the complete documentation index at: https://www.seam.co/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Supported Devices

> Embed Seam's catalog of supported device models on your own website, grouped by manufacturer with capability badges, search, and filters.

## \<seam-supported-devices /> [(preview)](https://react.seam.co/?path=/docs/ecosystem-supporteddevices--docs)

Supported Devices shows the device models that work with Seam, grouped by manufacturer. A manufacturer can put it on a product page to show which of its models work with Seam, and an app can put it on an integrations page to show which devices its customers can connect.

Each manufacturer section shows the manufacturer's logo and its device models. Each model shows:

* An image and the model name, linked to the manufacturer's product page when one is available.
* The model numbers and the providers it connects through, for example "via Schlage Engage".
* A device type badge and a badge for each capability the model supports through Seam.

Visitors can search by model name, model number, manufacturer, device type, or provider, and filter by manufacturer, device type, and capability. A filter appears only when there is more than one option to choose from, and not when you fix that value with an attribute. When the list spans several manufacturers, each section shows five models with a button to show the rest.

## Add Supported Devices to Your Page

<CodeGroup>
  ```html Plain HTML theme={"dark"}
  <script
    type="module"
    src="https://react.seam.co/v/5.1.0/dist/ecosystem.js"
  ></script>

  <seam-supported-devices
    embed-key="eco_live_your_embed_key"
    manufacturer="schlage"
  ></seam-supported-devices>
  ```

  ```jsx React theme={"dark"}
  import { EcosystemProvider, SupportedDevices } from '@seamapi/react'

  export function SupportedSchlageDevices() {
    return (
      <EcosystemProvider embedKey='eco_live_your_embed_key'>
        <SupportedDevices manufacturer='schlage' />
      </EcosystemProvider>
    )
  }
  ```
</CodeGroup>

See [Before You Begin](/docs/ui-components/overview/ecosystem-components/index#before-you-begin) for how to get an embed key, and [Add the Components to Your Site](/docs/ui-components/overview/ecosystem-components/index#add-the-components-to-your-site) for Vue, Angular, and other frameworks.

## How Your Embed Key Changes the List

**With a manufacturer key**, Supported Devices defaults to your brand. You can omit `manufacturer` entirely, and the title reads "Supported *Brand* devices":

```html theme={"dark"}
<seam-supported-devices
  embed-key="eco_live_your_manufacturer_embed_key"
></seam-supported-devices>
```

An explicit `manufacturer` attribute always wins over the key's default.

**With an app (partner) key**, Supported Devices hides what you have told Seam you do not support: excluded manufacturers and device types, and providers you do not support. When you also set `capability`, it hides the combinations you have excluded for that capability. To change what is excluded, email [support@getseam.com](mailto:support@getseam.com).

## Attributes

| Attribute | Type | Default | Description |
| - | - | - | - |
| `manufacturer` | string | Your manufacturer key's brand | A manufacturer slug, for example `schlage`. Shows only this manufacturer's devices and hides the manufacturer filter. |
| `device-type` | string | — | A device type slug, for example `smartlock`, `thermostat`, or `intercom`. Shows only this type and hides the device type filter. |
| `capability` | string | — | A [capability](#capabilities), for example `can_program_online_access_codes`. Shows only devices that support it and hides the capability filter. |
| `hide-search` | boolean | `false` | Hides the search field. |
| `hide-filters` | boolean | `false` | Hides the manufacturer, device type, and capability filters. |
| `hide-title` | boolean | `false` | Hides the title. |
| `theme` | string | `light` | `light`, `dark`, or `auto`. See [Dark Mode](#dark-mode). |

In React, pass the same options as camel-cased props on `SupportedDevices`, for example `deviceType`, `hideFilters`, and `hideSearch`.

Supported Devices also accepts the [shared attributes](/docs/ui-components/overview/ecosystem-components/index#shared-attributes): `embed-key`, `class-name`, `disable-css-injection`, `disable-font-injection`, and `ecosystem-endpoint`.

<Tip>
  Set `manufacturer` or `device-type` whenever you can. The component loads every matching device model, so a narrower list loads faster.
</Tip>

## Capabilities

Supported Devices shows a badge for each of these capabilities. They are the same capability flags the [Seam API](/docs/capability-guides/device-and-system-capabilities) reports on a device, so you can also set `capability` to any of them.

| Capability | Badge |
| - | - |
| `can_remotely_unlock` | Remote unlock |
| `can_remotely_lock` | Remote lock |
| `can_program_online_access_codes` | Access codes |
| `can_program_offline_access_codes` | Offline access codes |
| `can_provision_mobile_keys` | Mobile keys |
| `can_provision_wallet_keys` | Wallet keys |
| `can_encode_plastic_cards` | Key cards |
| `can_hvac_heat` | Heat |
| `can_hvac_cool` | Cool |
| `can_hvac_auto` | Heat and cool |
| `can_hvac_fan` | Fan |
| `can_program_thermostat_weekly_programs` | Weekly programs |
| `can_monitor` | Monitoring |

When a model supports a capability only under certain conditions, its badge is styled differently, and hovering over it shows the details.

## Examples

### Show one manufacturer's devices

```html theme={"dark"}
<seam-supported-devices
  embed-key="eco_live_your_embed_key"
  manufacturer="yale"
></seam-supported-devices>
```

### Show every supported thermostat

```html theme={"dark"}
<seam-supported-devices
  embed-key="eco_live_your_embed_key"
  device-type="thermostat"
></seam-supported-devices>
```

### Show devices that support mobile keys

```html theme={"dark"}
<seam-supported-devices
  embed-key="eco_live_your_embed_key"
  device-type="smartlock"
  capability="can_provision_mobile_keys"
></seam-supported-devices>
```

### Build a compact list

Hide the title and filters but keep the search field. Use this when your page already has its own heading.

```html theme={"dark"}
<seam-supported-devices
  embed-key="eco_live_your_embed_key"
  manufacturer="schlage"
  hide-title
  hide-filters
></seam-supported-devices>
```

## Dark Mode

Set `theme="dark"` to always use the dark theme, or `theme="auto"` to follow the visitor's color scheme. Manufacturers that provide a logo for dark backgrounds show it in the dark theme.

```html theme={"dark"}
<seam-supported-devices
  embed-key="eco_live_your_embed_key"
  manufacturer="schlage"
  theme="auto"
></seam-supported-devices>
```

## Empty States

| Message | Meaning |
| - | - |
| No supported devices found. | No device models match the attributes you set. Check the slugs. |
| No devices match your search or filters. | The visitor's search or filter choices matched no devices. The component offers a **Clear filters** button. |

For embed key and loading errors, see [Troubleshooting](/docs/ui-components/overview/ecosystem-components/index#troubleshooting).

## Supported Devices and the Supported Device Table

Seam also offers the [Supported Device Table](/docs/ui-components/device-database-components/supported-device-table), a separate widget (`<device-list-by-capability>`) loaded from a different CDN. It shows a support status for each device and capability, including devices that are not supported, and can display labels in French and Portuguese. Supported Devices is part of Seam Components: it lists the devices that work with Seam, defaults to your brand with a manufacturer key, and shares its setup with [Compatible Apps](/docs/ui-components/overview/ecosystem-components/compatible-apps).

## Next Steps

* Show the apps that work with your devices with [Compatible Apps](/docs/ui-components/overview/ecosystem-components/compatible-apps).
* Set up your embed key, framework, and Content Security Policy in [Ecosystem Components](/docs/ui-components/overview/ecosystem-components/index).
* Try the component with sample data in the [interactive component library](https://react.seam.co/?path=/docs/ecosystem-supporteddevices--docs).

If you have questions or want to report an issue, email [support@getseam.com](mailto:support@getseam.com).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.