> ## Documentation Index
> Fetch the complete documentation index at: https://docs.shipthing.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Storybook

> 设计系统的前端工作坊

<Frame>
  <img src="https://mintcdn.com/focusapps/6mqPe5nbiEW0fSGG/images/storybook.png?fit=max&auto=format&n=6mqPe5nbiEW0fSGG&q=85&s=4b4ccd4edcd028b059b6ef7c5d3a3338" alt="Storybook预览" width="2160" height="1205" data-path="images/storybook.png" />
</Frame>

<Tip>`storybook`应用运行在6006端口。</Tip>

ShipThing使用[Storybook](https://storybook.js.org/)作为设计系统的前端工作坊。它允许您与设计系统中的组件交互，并查看它们在不同状态下的行为。

## 配置

默认情况下，Storybook配置了我们的[blocks](/zh/packages/design-system/blocks)和[shadcn/ui](https://ui.shadcn.com/)中的每个组件，并允许您与它们交互。它还配置了相关字体和高阶组件，确保您的应用程序和Storybook之间体验一致。

## 开发

要启动应用，请在根目录中运行以下命令：

```sh Terminal theme={"system"}
pnpm --filter storybook dev
```

## 添加stories

您可以通过将组件添加到`apps/storybook/stories`目录来将自己的组件加入工作坊。每个组件应该有自己独立的`.stories.tsx`文件。

<Tip>
  添加storybook非常简单，只需按照示例操作即可。将组件UI与数据分离的好处是，您可以在不同应用程序中重用组件，确保所有应用程序的视觉体验一致。
</Tip>