# Awesome Storybook [![Awesome](https://awesome.re/badge.svg)](https://awesome.re)

[<img src="storybook-logo.svg" align="right" width="80">](https://storybook.js.org)

> A curated list of awesome resources about Storybook's ecosystem :art:

[Storybook](https://storybook.js.org) is a frontend tool for building UI components faster and easier.

Contributions welcome. Add links through pull requests or create an issue to start a discussion.

## Contents

- [Official resources](#official-resources)
- [Community resources](#community-resources)
- [Examples](#examples)
- [Tutorials](#tutorials)
- [Talks](#talks)
- [Blog posts](#blog-posts)
- [Contributing](#contributing)

## Official resources

- [Website](https://storybook.js.org)
- [Docs](https://storybook.js.org/docs)
- [Showcase](https://storybook.js.org/showcase)
- [Blog](https://storybook.js.org/blog)
- [Tutorials](https://storybook.js.org/tutorials/)
- [X](https://x.com/storybookjs)
- [GitHub](https://github.com/storybookjs)
- [Medium](https://medium.com/storybookjs)
- [Discord](https://discord.gg/storybook)
- [Brand's materials](https://github.com/storybookjs/brand)
- [Design system](https://master--5ccbc373887ca40020446347.chromatic.com/)

## Community resources

- [DEV.to #storybook](https://dev.to/t/storybook) - Posts about Storybook on DEV.to blogging platform.
- [Documentation Primitives](https://github.com/DAN-AKL/storybook-documentation-primitives) - Custom DocBlocks for Storybook Docs.

## Examples

- [Decathlon - Design System](https://decathlon.github.io/vitamin-web)
- [GitHub - Design System](https://primer.github.io/storybook/)
- [Airbnb - react-date](https://react-dates.github.io/react-date)
- [Salesforce - Design System](https://mashmatrix.github.io/react-lightning-design-system/)
- [Auth0/OKta - Quantum Design System](https://quantum.okta.design/)
- [AXA France - Design System](https://axafrance.github.io/react-toolkit/latest/storybook/)
- [Shared React Components Boilerplate](https://github.com/shared-components/shared-react-components-example)
- [Apideck - Components](https://www.apideck.design/)
- [Qui - Vue 2/3 Design system](https://qui-max.netlify.app/?path=/story/intro--page)
- [Mística - Design system](https://mistica-web.vercel.app/?path=/story/welcome--welcome)
- [Recharts - Storybook](https://recharts.org/en-US/storybook)

## Tutorials

<details>
<summary>2022</summary>

- [Storybook React: A Beginner's Tutorial to UI Components](https://snipcart.com/blog/storybook-react-tutorial-example)
</details>

<details>
<summary>2020</summary>

- [Simple Storybook React Setup with Dark Mode Integration](https://davidyeiser.com/tutorials/storybook-react-with-dark-mode)
</details>

<details>
<summary>2018</summary>

- [Adding Storybook Style Guide to a Create React App](https://www.youtube.com/watch?v=va-JzrmaiUM)
- [Build your components with Storybook](https://www.youtube.com/watch?v=_jttw14T52o)
</details>

## Talks

<details>
<summary>2019</summary>

- [Storybook, le playground qu'il vous faut pour vos composants UI! (FR)](https://www.youtube.com/watch?v=zMpSwo03aKo)
</details>

<details>
<summary>2018</summary>

- [VueNYC - Learn Storybook](https://www.youtube.com/watch?v=XN398jfTwQI)
</details>

<details>
<summary>2017</summary>

- [React Storybook Tutorial with Examples - Getting Started with React Storybook](https://www.youtube.com/watch?v=E2c183LS4lA)
- [React Storybook: Design, Dev, Doc, Debug Components - React Conf 2017](https://www.youtube.com/watch?v=PF0Vi-iIyoo)
</details>

## Blog posts

<details>
<summary>2019</summary>

- [How I manage to make my Storybook project the most efficient possible](https://dev.to/loicgoyet/how-i-manage-to-make-my-storybook-project-the-most-efficient-possible-2d8o)
- [Real-time accessibility testing with Storybook](https://medium.com/storybookjs/instant-accessibility-qa-linting-in-storybook-4a474b0f5347)
</details>

<details>
<summary>2018</summary>

- [Using Storybook with VueJS](https://auth0.com/blog/using-storybook-with-vuejs/)
- [Setting up Storybook for Preact](https://www.nickyt.co/blog/setting-up-storybook-for-preact-p5a/)
- [Setting Up a Component Library with React and Storybook](https://auth0.com/blog/setting-up-a-component-library-with-react-and-storybook/)
- [Storybook - UI component development tool for React, Vue, and Angular (Article focusing on React)](https://dev.to/madhu/storybook---ui-component-development-tool-for-react-vue-and-angular-article-focusing-on-react-29od)
- [Storybook vs Styleguidist](https://www.chromatic.com/blog/storybook-vs-styleguidist/)
</details>

<details>
<summary>2017</summary>

- [Five Reasons to Use Storybook Tests](https://spin.atomicobject.com/storybook-tests-react/)
</details>

## Contributing

Contributions welcome! Read the [contribution guidelines](CONTRIBUTING.md) first.

[storybook.md Github](https://github.com/lauthieb/awesome-storybook
)