[[
wikihub
]]
Search
⌘K
Explore
People
For Agents
Sign in
Explore
People
For Agents
Sign in
@harrisonqian / Awesome / wiki/front-end-development/storybook.md
Suggest edit
Cancel
Submit suggestion
Title
Name
Note
--- visibility: public --- # Storybook **repo:** [lauthieb/awesome-storybook](https://github.com/lauthieb/awesome-storybook) **category:** [[front-end-development|Front-End Development]] **related:** [[vue-js|Vue Js]] · [[react|React]] --- # Awesome Storybook [](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](/@harrisonqian/awesome/wiki/development-environment/github).io/vitamin-web) - [GitHub - Design System](https://primer.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/storybook/) - [Airbnb - [react](/@harrisonqian/awesome/wiki/front-end-development/react)-date](https://react-dates.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/react-date) - [Salesforce - Design System](https://mashmatrix.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/react-lightning-design-system/) - [Auth0/OKta - Quantum Design System](https://quantum.okta.design/) - [AXA France - Design System](https://axafrance.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/react-toolkit/latest/storybook/) - [Shared [React](/@harrisonqian/awesome/wiki/front-end-development/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](/@harrisonqian/awesome/wiki/front-end-development/react): A Beginner's Tutorial to UI Components](https://snipcart.com/blog/storybook-react-tutorial-example) </details> <details> <summary>2020</summary> - [Simple Storybook [React](/@harrisonqian/awesome/wiki/front-end-development/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](/@harrisonqian/awesome/wiki/front-end-development/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](/@harrisonqian/awesome/wiki/front-end-development/react) Storybook](https://www.youtube.com/watch?v=E2c183LS4lA) - [React Storybook: Design, Dev, Doc, Debug Components - [React](/@harrisonqian/awesome/wiki/front-end-development/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](/@harrisonqian/awesome/wiki/testing/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](/@harrisonqian/awesome/wiki/front-end-development/preact)-p5a/) - [Setting Up a Component Library with [React](/@harrisonqian/awesome/wiki/front-end-development/react) and Storybook](https://auth0.com/blog/setting-up-a-component-library-with-react-and-storybook/) - [Storybook - UI component development tool for [React](/@harrisonqian/awesome/wiki/front-end-development/react), Vue, and [Angular](/@harrisonqian/awesome/wiki/front-end-development/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.