# Device Frame Addon

<Warning>
  This addon will be **deprecated** in v3.15. Please use the
  [`ViewportAddon`](/addons/viewport-addon) instead.
</Warning>

The `DeviceFrameAddon` is a powerful tool that allows you to preview your use-cases
in a variety of [device frames](https://pub.dev/packages/device_frame). This is particularly useful for ensuring that your
components look great on different screen sizes and orientations. The addon provides a
set of predefined devices.

<Tabs
  values={[
    { label: "iPhone 13", value: "iphone" },
    { label: "No Device", value: "none" },
  ]}
>
  <TabItem value="iphone">
    <iframe
      src="https://demo.widgetbook.io/#/?path=features/basket/basketscreen/default&preview"
      width="100%"
      height="720px"
    />
  </TabItem>
  <TabItem value="none">
    <iframe
      src="https://demo.widgetbook.io/#/?path=features/basket/basketscreen/default&device={name:None}&preview"
      width="100%"
      height="720px"
    />
  </TabItem>
</Tabs>

## Usage

```dart title=widgetbook/lib/main.dart
class WidgetbookApp extends StatelessWidget {
  const WidgetbookApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Widgetbook(
      // ...
      addons: [
        DeviceFrameAddon( // [!code highlight]
          devices: [ // [!code highlight]
            Devices.ios.iPhoneSE, // [!code highlight]
            Devices.ios.iPhone13, // [!code highlight]
          ], // [!code highlight]
        ), // [!code highlight]
      ],
    );
  }
}
```

<Info>

You can define your own [custom device](https://pub.dev/packages/device_frame#creating-a-custom-generic-device) by using the `DeviceInfo` class:

```dart
DeviceInfo.genericPhone(
  id: 'android-device',
  name: 'Android Device',
  platform: TargetPlatform.android,
  screenSize: const Size(412, 732),
)
```

</Info>

## Order

Since the [order of addons](/addons/overview#order-of-addons) matters. The `DeviceFrameAddon` should be used **before all other addons**.

## Multi-snapshot Support

The `DeviceFrameAddon` is not supported in the [Multi Snapshot Reviews](/cloud/snapshots/multi-snapshot) yet. However, you can use the [`ViewportAddon`](/addons/viewport-addon) to achieve a similar effect.