Storybook

repo: lauthieb/awesome-storybook
category: Front-End Development related: Vue Js · React

Awesome Storybook

<img src="storybook-logo.svg" align="right" width="80">

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

Storybook 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
• Community resources
• Examples
• Tutorials
• Talks
• Blog posts
• Contributing

Official resources

• Website
• Docs
• Showcase
• Blog
• Tutorials
• X
• GitHub
• Medium
• Discord
• Brand's materials
• Design system

Community resources

• DEV.to #storybook - Posts about Storybook on DEV.to blogging platform.
• Documentation Primitives - Custom DocBlocks for Storybook Docs.

Examples

• Decathlon - Design System
• GitHub - Design System
• [Airbnb - react-date](https://react-dates.github.io/react-date)
• Salesforce - Design System
• Auth0/OKta - Quantum Design System
• AXA France - Design System
• [Shared React Components Boilerplate](https://github.com/shared-components/shared-react-components-example)
• Apideck - Components
• Qui - Vue 2/3 Design system
• Mística - Design system
• Recharts - 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 </details>

Talks

<details> <summary>2019</summary>

• Storybook, le playground qu'il vous faut pour vos composants UI! (FR) </details>

<details> <summary>2018</summary>

• VueNYC - Learn Storybook </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
• [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
• Setting up Storybook for Preact
• [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 </details>

<details> <summary>2017</summary>

• Five Reasons to Use Storybook Tests </details>

Contributing

Contributions welcome! Read the contribution guidelines first.