The storybook application runs on port 6006.

SuperStarter uses Storybook as a frontend workshop for the design system. It allows you to interact with the components in the design system, and see how they behave in different states.

Configuration

By default, Storybook is configured with our blocks and every component from shadcn/ui, and allows you to interact with them. It is also configured with the relevant fonts and higher-order components to ensure a consistent experience between your application and Storybook.

Development

To start the app, run the following command in the root directory:

Terminal
pnpm --filter storybook dev

Adding stories

You can add your own components to the workshop by adding them to the apps/storybook/stories directory. Each component should have its own .stories.tsx file.

Adding a storybook is very simple, just follow the examples. The benefit of separating the component UI from the data is that you can reuse components across different applications, ensuring a consistent visual experience across all applications.