構建、測試和文件化元件

Storybook 是一個前端工作區,用於隔離構建 UI 元件和頁面。數千個團隊使用它進行 UI 開發、測試和文件化。它是開源且免費的。

入門
v9
最新版本
38.37m
每月安裝次數
2282
貢獻者
開發
localhost:6006
VSCodeGithubAirbnbMozilla

構建耐用的使用者介面

Storybook 提供了一個工作區,用於隔離構建 UI。它幫助您開發難以觸及的狀態和邊緣情況,而無需執行整個應用程式。

隔離構建 UI 元件和頁面

無需麻煩資料、API 或業務邏輯即可實現元件和頁面。

為什麼要隔離構建 UI?

將難以觸及的邊緣情況模擬為故事

在應用程式中難以重現的關鍵狀態下渲染元件。然後將這些狀態儲存為故事,以便在開發、測試和 QA 期間重訪。

如何編寫故事

與您已使用的工具整合

Storybook 可漸進式採用,並與行業標準工具整合。這意味著您的團隊不必更改工作流程。

瀏覽整合
400+
整合
3500萬
每週下載量
ViteChromatic
Notion
TestingLib
Emotion
Tailwind
Jest
Nextjs
Webpack
Figma
ZeroheightNx
Apollo
Playwright
Axe
RedwoodJS
MSW
Zeplin
GraphQL
Gatsby
Launchdarkly
Sass
SWC
UXpinIonic
Sketch
Invision
Supernova
Cypress
Nuxt
“Storybook 是一個強大的前端工作區環境工具,它允許團隊設計、構建和組織 UI 元件(甚至完整的螢幕!),而不會被業務邏輯和管道所困擾。”
Brad Frost
Brad Frost
《原子設計》作者

輕鬆測試 UI,無錯誤

故事捕捉 UI 元件的“已知良好”狀態。它們是跟蹤 UI 邊緣情況的實用、可重現的方式。Storybook 使用它們來支援自動化測試。

“我們用於編輯 UI 的工具是 Storybook。它是確保您的工作在各個斷點上都與設計畫素級別匹配的完美場所。”
Adam Neary
Adam Neary
技術主管

為您的團隊記錄可重用 UI

Storybook 將 UI、示例和文件集中在一起。這有助於您的團隊採用現有的 UI 模式。

“Storybook 透過允許我們在設計系統中輕鬆包含技術文件,使元件開發更加 streamlined!”
Taurie Davis
Taurie Davis
《構建設計系統》作者

分享 UI 的實際工作方式

故事展示了 UI 的實際工作方式,而不僅僅是它們應該如何工作的靜態設計。這使得大家都能瞭解當前生產環境中的內容。

釋出 Storybook 以獲得隊友的認可

將 Storybook 作為網站釋出供利益相關者參考。您的團隊可以在不接觸程式碼的情況下檢查 UI 是否看起來正確。

釋出 Storybook
Storybook Mock UI
Player
Player
Player
Player

將故事嵌入到 wiki、Markdown 和 Figma 中

嵌入故事以向隊友和開發者社群展示您的工作。與 oEmbed 標準相容。

嵌入故事
Embed stories using iframes in your NextJS sites
等等...
“當我開始一個新的設計系統時,Storybook 是我的首選。它為設計和工程團隊都提供了快速輕鬆的設定。”
Sarrah Vesselov
Sarrah Vesselov
《構建設計系統》作者
logo-cloudbees - Storybook 繁體中文

自動化 UI 工作流

將 Storybook 新增為 CI 步驟,以自動化 UI 開發工作流。這有助於您和您的團隊減少手動工作,更快地交付。

Automate

專為前端開發人員打造

頂尖的前端工程團隊依靠 Storybook 來交付改變世界的產品。加入我們的開源社群,學習新技術並獲得支援。

加入 2282 名貢獻者,共同構建 UI 開發的未來。
在 GitHub 上 Star
2282
貢獻者
與 19,793+ 位前端開發者線上交流。
加入 Discord 伺服器
19,793+
伺服器成員
觀看教程、功能預覽和訪談。
在 YouTube 上觀看
8,320+
訂閱者
BlueSky
X
獲取來自 Storybook 維護者的最新新聞和更新。
24,200+
關注者