127 lines
4.8 KiB
Plaintext
127 lines
4.8 KiB
Plaintext
# 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.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
|
|
)
|