# Introduction to Addons

Addons in Widgetbook provide a flexible and customizable way to enhance your development environment. They allow you to wrap all your use cases with configurable widgets that can be controlled via Widgetbook's UI.

For example, if you want to center all your use cases using the [`Align`](https://api.flutter.dev/flutter/widgets/Align-class.html) widget, you can use the [`AlignmentAddon`](/addons/alignment-addon) instead of manually wrapping each use case.

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

  @override
  Widget build(BuildContext context) {
    return Widgetbook(
      // ...
      addons: [
        // Addons go here...
      ],
    );
  }
}
```

## Order of Addons

The order of addons matters and it will have effect on how the use-case is rendered. The first addon in the list will be the outermost widget, and the last addon will be the innermost widget.

For example, if you are using both [`AlignmentAddon`](/addons/alignment-addon) and [`ViewportAddon`](/addons/viewport-addon), then the `ViewportAddon` should **always come first**, otherwise the `AlignmentAddon` will be aligning the "viewport" widget itself, and not the use-case inside of it.

<Tabs
  values={[
    { label: "✅ Correct Order", value: "correct" },
    { label: "❌ Wrong Order", value: "wrong" },
  ]}
>
  <TabItem value="correct">

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

      @override
      Widget build(BuildContext context) {
        return Widgetbook(
          // ...
          addons: [
            ViewportAddon(Viewports.all), // [!code highlight]
            AlignmentAddon() // [!code highlight]
          ],
        );
      }
    }
    ```

    ```text title="Rendered Widget Tree"
    RootWidget
    └── ViewportAddon // [!code highlight]
      └── AlignmentAddon // [!code highlight]
        └── UseCaseRenderer
          └── UseCase
            └── Widget
    ```

  </TabItem>
  <TabItem value="wrong">

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

      @override
      Widget build(BuildContext context) {
        return Widgetbook(
          // ...
          addons: [
            AlignmentAddon(), // [!code highlight]
            ViewportAddon(Viewports.all), // [!code highlight]
          ],
        );
      }
    }
    ```

    ```text title="Rendered Widget Tree"
    RootWidget
    └── AlignmentAddon // [!code highlight]
      └── ViewportAddon // [!code highlight]
        └── UseCaseRenderer
          └── UseCase
            └── Widget
    ```

  </TabItem>
</Tabs>