Skip to main content
A preview of storybook
The storybook application runs on port 6006.
ShipThing 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.