Storybook
A workshop for building, viewing, and testing UI components one at a time, outside the full app.
- Stars
- 91.4k
- Forks
- 10.5k
- Licence
- MIT
- Language
- TypeScript
- Last update
- 4 days ago
- Type
- Dev tool
What it is
Storybook is a frontend workshop where you build and view UI components and pages in isolation, away from the rest of your application. Teams use it for UI development, testing, and documentation. It supports many frameworks, including React, Vue 3, Angular, Svelte, and web components, and it can be extended with addons.
- Build a button or form component in isolation and check its states
- Document component variants so other developers can browse them
- Add addons for component design, documentation, or interactivity testing
- Try an example project quickly via storybook.new in Stackblitz
Great for
- Frontend teams building a shared component library or design system
- Developers who want to develop a UI component without running the whole app
- Teams that want living documentation of their components
- Projects using one of the supported renderers such as React, Vue 3, or Angular
Not ideal for
- Projects with no UI components to isolate, since the tool is built around components and pages
- Non-frontend developers, because it is a tool for building user interfaces
- Anyone needing a no-setup tool, since the README points to docs and framework-specific setup
How to get it
- 1
See the README
Clone the repository
git clone https://github.com/storybookjs/storybook - 2
Run it
- Visit the Storybook docs at storybook.js.org/docs to choose a setup for your framework
- Or open storybook.new to create an example project in Stackblitz
- Explore the example components and stories in the browser
- 3
Get the most out of it
- Add addons for component design, documentation, testing, and interactivity
- Use the Component Encyclopedia showcase to see how leading teams use Storybook
- Ask questions in the GitHub Discussions help category or the Discord community
Downloads
Strengths
- Widely used, with 91k+ GitHub stars and a large community
- Supports many frameworks and renderers listed in the README
- MIT licensed and open source
Trade-offs
- Setup and configuration depend on your framework and addons, which the README only summarizes
- The README is truncated, so detailed install steps must be taken from the official docs
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| storybook (this) | 91.4k | Dev tool | intermediate | 4 days ago | Frontend teams building a shared component library or design system |
| tamagui | 14.3k | Library | intermediate | 4 days ago | Teams building the same app for web and native with React |
| mitosis | 14.5k | Dev tool | intermediate | 8 days ago | Teams maintaining the same UI components across more than one framework |
| nx | 29.4k | Dev tool | intermediate | 4 days ago | Teams with several related JavaScript or TypeScript projects in one repository |
| electron-vue | 15.3k | Learning resource | intermediate | 4.8 years ago | Developers who already know Vue and want to build a desktop app |
| auto-animate | 14k | Library | beginner | 4 months ago | Frontend developers who want polished list or menu transitions without writing animation code |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.