Storybook

<p align="center"> <a href="https://storybook.js.org/?ref=readme"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/263385/199832481-bbbf5961-6a26-481d-8224-51258cce9b33.png"> <img src="https://user-images.githubusercontent.com/321738/63501763-88dbf600-c4cc-11e9-96cd-94adadc2fd72.png" alt="Storybook" width="400" /> </picture> </a> </p> <p align="center">Build bulletproof UI components faster</p> <br/> <p align="center"> <a href="https://circleci.com/gh/storybookjs/storybook"> <img src="https://circleci.com/gh/storybookjs/storybook.svg?style=shield" alt="Build Status on CircleCI" /> </a> <a href="https://codecov.io/gh/storybookjs/storybook"> <img src="https://codecov.io/gh/storybookjs/storybook/branch/main/graph/badge.svg" alt="codecov" /> </a> <a href="https://github.com/storybookjs/storybook/blob/main/LICENSE"> <img src="https://img.shields.io/github/license/storybookjs/storybook.svg" alt="License" /> </a> <br/> <a href="https://discord.gg/storybook"> <img src="https://img.shields.io/badge/discord-join-7289DA.svg?logo=discord&longCache=true&style=flat" /> </a> <a href="https://storybook.js.org/community/?ref=readme"> <img src="https://img.shields.io/badge/community-join-4BC424.svg" alt="Storybook Community" /> </a> <a href="#backers"> <img src="https://opencollective.com/storybook/backers/badge.svg" alt="Backers on Open Collective" /> </a> <a href="#sponsors"> <img src="https://opencollective.com/storybook/tiers/sponsors/badge.svg" alt="Sponsors on Open Collective" /> </a> <a href="https://x.com/intent/follow?screen_name=storybookjs"> <img src="https://img.shields.io/twitter/follow/storybookjs?color=blue&logo=twitter" alt="Official Twitter Handle" /> </a> <a href="https://api.securityscorecards.dev/projects/github.com/storybookjs/storybook"> <img src="https://api.securityscorecards.dev/projects/github.com/storybookjs/storybook/badge" alt="OpenSSF Scorecard"/> </a> </p> <p align="center"> Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. Find out more at <a href="https://storybook.js.org/?ref=readme">storybook.js.org</a>! </p> <center> <img src="https://raw.githubusercontent.com/storybookjs/storybook/refs/heads/release-6-5/media/storybook-intro.gif" width="100%" /> </center> <p align="center"> View README for:<br/> <a href="https://github.com/storybookjs/storybook/blob/main/README.md" title="latest"><img alt="latest" src="https://img.shields.io/npm/v/@storybook/react/latest?style=for-the-badge&logo=storybook&logoColor=ffffff&color=66BF3C" /></a> <a href="https://github.com/storybookjs/storybook/blob/next/README.md" title="next"><img alt="next" src="https://img.shields.io/npm/v/@storybook/react/next?style=for-the-badge&logo=storybook&logoColor=ffffff&color=1EA7FD" /></a> </p>

Table of contents

• 🚀 Getting Started
• 📒 Projects
  • 🛠 Supported Frameworks & Examples
  • 🔗Addons
• 🏅 Badges & Presentation materials
• 👥 Community
• 👏 Contributing
  • 👨‍💻 Development scripts
  • 💸 Sponsors
  • 💵 Backers
• :memo: License

Getting Started

Visit Storybook's website to learn more about Storybook and to get started.

Documentation

Documentation can be found on Storybook's docs site.

Examples

View Component Encyclopedia to see how leading teams use Storybook.

Use storybook.new to quickly create an example project in Stackblitz.

Storybook comes with a lot of addons for component design, documentation, testing, interactivity, and so on. Storybook's API makes it possible to configure and extend in various ways. It has even been extended to support React Native, Android, iOS, and Flutter development for mobile.

Community

For additional help, share your issue in the repo's GitHub Discussions.

Projects

Supported Frameworks

| Renderer | Demo | | | -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | | React | | | | Angular | | | | Vue 3 | | | | Web components | | | | React Native | | | | HTML | | | | Ember | | | | Svelte | | | | Preact | | | | Qwik | | | | SolidJS | | | | Android, iOS, Flutter | | [](https://github.com/storybookjs