# Device Details

## \<DeviceDetails /> [(preview)](https://react.seam.co/?path=/docs/components-devicedetails--docs)

The device details component shows the properties, settings, and issues for a device.

```
<DeviceDetails deviceId={deviceId} />
```

### Different Device Views

The `DeviceDetails` will display varying views based on the device type.

#### Door Lock details

The "Lock" detail view displays a button leading to the list of access codes, along with various lock properties.

<figure><img src="https://2727122207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxnN2A67918om1UthYWsF%2Fuploads%2FKD8BkhrxeaeKPyu7y18U%2FLock%20Detail.png?alt=media&#x26;token=aaea520e-8779-4b39-84bd-269fc91f605c" alt="" width="420"><figcaption></figcaption></figure>

#### Thermostat details

The "Thermostat" detail view provides a button to view the list of scheduled climates and buttons to adjust the thermostat settings.

<figure><img src="https://2727122207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FxnN2A67918om1UthYWsF%2Fuploads%2FFfYteNKNufi04c2yWm6A%2FThermostatDetail.png?alt=media&#x26;token=60f7e43d-0749-4a7c-91a6-32506b16e481" alt="" width="420"><figcaption></figcaption></figure>

### Props

The `DeviceDetails` component displays the device as identified by the `deviceId` property. You can customize the component by turning off features like `disableLockUnlock` for door locks.

| Name                                       | Type     | Description                                                                                                       |
| ------------------------------------------ | -------- | ----------------------------------------------------------------------------------------------------------------- |
| deviceId<mark style="color:red;">\*</mark> | string   | The id for the device that will be shown in the table.                                                            |
| disableLockUnlock                          | boolean  | Hide the lock/unlock button for devices. Default: `false`.                                                        |
| onBack                                     | function | <p>Optional callback fired when the Back chevron button is clicked.<br><br>Signature: <code>() => void</code></p> |
| className                                  | string   | Optional class name to add to the rendered component's containing element.                                        |