# Add Component

To understand better, let's review a few tips before you can add your first
component.

## Components

Components in Figma might be resembled by one or multiple variants, which are
variations of a component.

<Info>Read what is a Component in [Terminology](/terminology) page.</Info>
In Flutter, the `TextButton`, `ElevatedButton`, and `OutlineButton` are variants
of a _Button_ component. In addition, different Flutter states of a button (e.g.,
focused or hovered) might resemble in Figma as additional variants.

<Image
  zoom
  src="/assets/getting-started/figma-button-component.svg"
  alt="Figma Material button component with variants"
  caption="Figma Material button component with variants"
/>

## Components Vs. Use-cases

Widgetbook features a **_component_** and **_use-case_** approach in which a
single component has one or multiple use-cases.

A use-case might resemble a variant of a component or just a specific state of
the component.

In Widgetbook, developers create a folder tree structure to organize and catalog
components.

## Add your first component

Adding components to Widgetbook works differently based on your choice: manual
approach or generator approach

<Tabs
  groupId="approach"
  values={[
    { label: 'Generator', value: 'generator' },
    { label: 'Manual', value: 'manual' },
  ]}
>
  <TabItem value="generator">
  1. To add components in the generator approach, you can add use cases with `@UseCase` annotation.

    ```dart
    import 'package:flutter/material.dart';
    import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;

    @widgetbook.UseCase(
      name: 'with green color',
      type: Container,
    )
    Widget greenContainerUseCase(BuildContext context) {
      return Column(
        children: [
          Container(
            color: Colors.green,
            child: const SizedBox.square(
              dimension: 100,
            ),
          ),
        ],
      );
    }
    ```

2. The annotation is used on a use-case builder method with a return type of
   `Widget` and a single required parameter `BuildContext`.

   <Info>
     You can freely pick the name of the method, but make sure the name of a
     newly created use-case builder method does not have a name conflict with
     already existing methods.
   </Info>

3. In addition, `@UseCase` requires two mandatory parameters `type` and `name`
   that allow you to customize how the use-case is shown in the navigation of
   Widgetbook.

   #### `type` property

   The `type` property is used by the generator to create the component entry
   within the navigation. As a developer, you want to specify the type of the
   cataloged component (`Container`) instead of the one that might be returned
   by the builder method (`Column`).

   #### `name` property

   The `name` property of the annotation allows you to specify the name of the
   use-case. In the case of the example, this is `with green color`.

4. Execute the `build_runner` by running the following command:

   ```bash
   flutter pub run build_runner build
   ```

   or

   ```bash
   flutter pub run build_runner watch
   ```

  </TabItem>
  <TabItem value="manual">
    1. Let's create a Widgetbook component using `WidgetbookComponent`

```dart
WidgetbookComponent(
  name: 'Container',
  useCases: [

  ],
),
```

2. Each component can have one or multiple use-cases, which can be created by
   `WidgetbookUseCase`.

```dart
  WidgetbookUseCase(
    name: 'with green color',
    builder: (context) => Container(
      width: 100,
      height: 100,
      color: Colors.green,
    ),
  ),
```

3. You can add components directly to `directories`

```dart
Widgetbook.material(
      addons: [],
      directories: [
        WidgetbookComponent(
          name: 'Container',
          useCases: [
            WidgetbookUseCase(
              name: 'with green color',
              builder: (context) => Container(
                width: 100,
                height: 100,
                color: Colors.green,
              ),
            ),
          ],
        ),
      ],
    )
```

Then, run again, and you should be able to see your container in Widgetbook.

<Image
  zoom
  src="/assets/screenshots/first_component.png"
  alt="First Component"
  caption="First Component"
/>

  </TabItem>
</Tabs>

<Info>Read how to optimize widget dependencies and mocking for testability and development on [Mocking](/getting-started/mocking) page.</Info>