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.
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.
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.