# Install

Welcome to Widgetbook! This guide will help you integrate Widgetbook into your Flutter
projects and streamline your widget management process.

Make sure to depend on the Widgetbook packages.

There are two approaches to configuring Widgetbook:

1. **Manual Approach**: This approach involves using the
   [widgetbook package](https://pub.dev/packages/widgetbook) and manually maintaining the
   widget structure in Widgetbook to keep it in sync with your application.

2. **Generator Approach**: `widgetbook_generator` ensures harmony between your codebase
   and the Widgetbook's navigation panel structure. Its robust features make it a
   sought-after solution for hassle-free Widgetbook management. Here are some key benefits
   of using `widgetbook_generator`:
   - Accurately mirrors your codebase within the Widgetbook's navigation panel, keeping
     track of file movement or restructuring.
   - Ensures that the names of all `WidgetbookComponents` correspond to the widgets'
     names, even when renamed.
   - It simplifies the setup process, allowing you to get started quickly.
   - Seamlessly integrates with [Widgetbook Cloud](/widgetbook-cloud/overview) for an
     optimized workflow.

<Info>We recommend using the Generator approach over the Manual approach.</Info>

<Tabs
  groupId="approach"
  values={[
    { label: 'Generator', value: 'generator' },
    { label: 'Manual', value: 'manual' },
  ]}
>
  <TabItem value="generator">

To get started with the `widgetbook` you'll need the following production dependency:

```bash
flutter pub add widgetbook_annotation widgetbook
```

and the following dev dependencies:

```bash
flutter pub add widgetbook_generator  build_runner --dev
```

This will add a line like this to your package's pubspec.yaml (and run an implicit
`flutter pub get`):

```yaml
dependencies:
  widgetbook_annotation: ^{{ versions.annotation }}
  widgetbook: ^{{ versions.widgetbook }}

dev_dependencies:
  widgetbook_generator: ^{{ versions.generator }}
  build_runner:
```

Alternatively, your editor might support `flutter pub get`.

With `widgetbook_generator` at your disposal, managing Widgetbook becomes effortless.
Start using it today and let the generator take care of the grunt work, allowing you to
focus on what you do best - creating excellent code.

  </TabItem>
  <TabItem value="manual">

To get started with the `widgetbook` you'll need the following production dependency:

```bash
flutter pub add widgetbook
```

This will add a line like this to your package's `pubspec.yaml` (and run an implicit
`flutter pub get`):

```yaml
dependencies:
  widgetbook: ^{{ versions.widgetbook }}
```

Alternatively, your editor might support `flutter pub get`.

  </TabItem>
</Tabs>

With these approaches in mind, you can now begin integrating Widgetbook into your project
and enjoy the benefits of streamlined widget management and collaboration.