import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Docs/Customization/Custom components" />

# Custom components
<br />

The Plaza theme enables you to create themes using our React components library, which is included in the latest sfb-toolkit version. The toolkit includes components that you can use to quickly build and customize your storefront pages through the Storefront Builder visual editor. For example, you can integrate the `Slider`, `Carousel`, `ProductBanner`, and many more components with your Plaza theme.

If none of the components in our library suit your needs, you can create custom components. Custom components are components that you can create and customize through the [schema](?path=/story/docs-customization-schema--page#schema) object.

The `Getting Started` section contains everything you need to know to start building your custom components according to our guidelines and best practices.

## Installation

To create custom components, use the following sfb-toolkit commands:
<li>sfb-toolkit components</li>
<li>sfb-toolkit storybook</li>
<br />

### sfb-toolkit components

```
sfb-toolkit components
```

Run the following command to enable theme developers to build custom components in their current theme. When you run the command, the toolkit:
<li>
    Installs the latest <a href="https://www.npmjs.com/package/@appdirect/sfb-theme-components">@appdirect/sfb-theme-components</a> in
    your current theme.
</li>
<li>
    Creates a <b>customComponents</b> folder in your current theme with two <b>AtomsShowcase</b> components as examples.
</li>
<li>
    Bundles both <b>sfb-theme-components</b> and custom components into one package in the current theme assets folder.
</li>

By default, the `sfb-theme-components` library is bundled and deployed in a CDN (Content Delivery Network) and referenced in your theme. To use custom components, `sfb-theme-components` are bundled together with the user-defined custom components into a single package.

Therefore, when you run `sfb-toolkit components`, the toolkit creates a `customComponents` folder in your current theme where you can start building custom components. Then, when you start your sfb-toolkit server with the `sfb-toolkit start` command and you make a change inside your `customComponents` folder, the toolkit bundles your components into a single package and puts it in your theme assets folder so you can preview the changes in your browser using hot module replacement.

### sfb-toolkit storybook

```
sfb-toolkit storybook
```

This command enables theme developers to visualize all available component documentation through Storybook UI. The Storybook includes both `sfb-theme-components` and the custom components that you have created.

## Reuse existing <i>sfb-theme-components</i>

You can reuse existing components (atoms or components) from the library for your custom components. For example, if you want to reuse the `Button` atom in your custom component, add the following import:

```jsx
import Button from '@appdirect/sfb-theme-components/src/atoms/button/Button';
```

For each component documentation in Storybook UI, a `Usage Example` provides an example of how you can reuse a component in your custom components.

## Availability

`@appdirect/sfb-toolkit@2.0.5`
