awesome-awesomeness/terminal/storybook

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

 (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




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





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





- 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)


Talks




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





- VueNYC - Learn Storybook (https://www.youtube.com/watch?v=XN398jfTwQI)





- 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)


Blog posts




- 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)





- 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/)





- Five Reasons to Use Storybook Tests (https://spin.atomicobject.com/storybook-tests-react/)


Contributing

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

storybook Github: https://github.com/lauthieb/awesome-storybook