Storybook Docs：在隔离环境中开发、测试和展示 UI 组件的官方文档

首页的安装命令与框架列表

截至 2026 年 10 月，文档首页“Get started with Storybook”给出的安装命令是 npm create storybook@latest，既可以装进已有项目，也可以用来新建项目。首页同时提供“Copy prompt”按钮，可以把一段设置提示交给 AI 编程助手，由它代为完成 Storybook 的配置。

首页列出的框架分为两组。第一组包括 Next.js、TanStack React、搭配 Vite 或 Webpack 的 React、React Native Web、运行在设备上的 React Native、Preact、Vue、Angular、SvelteKit、Svelte 和 Web Components 等。第二组是社区维护的框架，包括 Analog、Nuxt、SolidJS，以及使用 Rspack 或 Rsbuild 构建的 React、Vue 和 Web Components。

Storybook 文档的 Get started 页面，左侧为文档目录，正文显示 npm create storybook@latest 安装命令和 Supported frameworks 框架列表

故事（story）与 CSF 格式

CSF 页面写明，Component Story Format（CSF）是编写故事的推荐方式。它基于 ES6 模块，是一种可以脱离 Storybook 使用的开放标准。每个组件的故事文件都包含一个必需的默认导出（default export）和一个或多个具名导出。默认导出描述组件本身，包括组件、标题（决定它在 Storybook 侧边导航中的位置）、装饰器（decorators）和参数（parameters）。页面提供 React、Vue、Angular 和 Web Components 的示例切换，并同时列出 CSF 3 与 CSF Next（预览版）。

侧边目录的 Stories 分组进一步列出 Args、Parameters、Decorators、Play function、Loaders 和 Tags，还有命名组件与层级、模拟数据和模块、搭建页面与屏幕等主题。

框架页面的示例

框架列表中的 React Native Web 有独立的说明页，页面标题为“Storybook for React Native Web”。页面开头写明，它是一个用于在隔离环境中开发和测试 React Native 组件的框架，并使用 Vite 为浏览器构建组件。页面同时提示，Storybook 也支持在设备上开发 React Native；如果不确定哪种更合适，可以阅读页面中的对比说明。

Storybook for React Native Web 页面，标题下方是框架简介和安装说明，左侧目录列出 Get Started 与 Stories 分组

测试、文档与分享

侧边目录的 Testing 分组列出 Interaction tests、Accessibility tests、Visual tests、Snapshot tests、Test coverage 与 In CI，说明同一批故事可以继续用于交互、无障碍、视觉和快照测试，并接入持续集成。Integrations 分组下的 Autodocs、MDX、Doc blocks 和 Code panel 用于根据组件自动生成文档。首页还说明，Storybook 可以分析组件，自动生成与故事并列的文档，适合编写界面库的使用指南或设计系统网站。

Sharing 分组列出 Publish 与 Embed。首页写明，发布 Storybook 可以把成果分享给其他人，故事也可以嵌入 Notion 或 Figma 等地方。

配置目录与版本

配置页写明，Storybook 通过名为 .storybook 的文件夹进行配置，其中包含各种配置文件。如果想使用其他目录，可以在 storybook dev 与 storybook build 命令中加上 -c 参数指定。Configure 分组还列出 Styling and CSS、Environment variables，以及 Vite 和 Webpack 等构建器（Builders）说明。

文档顶部的版本选择器显示为 Version 10.6。侧边栏同时列出 Migrate to Storybook 10 与 Migrate from 8 to 9 两份升级说明，升级前应先确认自己正在使用的版本。