rhetenor/awesome-awesomeness
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update lists

Browse Source
This commit is contained in:
Jonas Zeunert
2025-07-18 22:22:32 +02:00
parent 55bed3b4a1
commit 5916c5c074
3078 changed files with 331679 additions and 357255 deletions
Download Patch File Download Diff File Expand all files Collapse all files

243
html/storybook.html
View File

@@ -15,165 +15,176 @@ issue to start a discussion.</p>
<ul>
<li><a href="#official-resources">Official resources</a></li>
<li><a href="#community-resources">Community resources</a></li>
<li><a href="#tutorials">Tutorials</a></li>
<li><a href="#presentations">Presentations</a></li>
<li><a href="#blog-posts">Blog posts</a></li>
<li><a href="#examples">Examples</a></li>
<li><a href="#addons">Addons</a></li>
<li><a href="#tutorials">Tutorials</a></li>
<li><a href="#talks">Talks</a></li>
<li><a href="#blog-posts">Blog posts</a></li>
<li><a href="#contributing">Contributing</a></li>
</ul>
<h2 id="official-resources">Official resources</h2>
<ul>
<li><a href="https://storybook.js.org">Website</a></li>
<li><a href="https://storybook.js.org/docs">Docs</a></li>
<li><a href="https://storybook.js.org/showcase">Showcase</a></li>
<li><a href="https://storybook.js.org/blog">Blog</a></li>
<li><a href="https://storybook.js.org/tutorials/">Tutorials</a></li>
<li><a href="https://x.com/storybookjs">X</a></li>
<li><a href="https://github.com/storybookjs">GitHub</a></li>
<li><a href="https://medium.com/storybookjs">Medium</a></li>
<li><a href="https://discord.gg/storybook">Discord</a></li>
<li><a href="https://github.com/storybookjs/brand">Brand’s
materials</a></li>
<li><a
href="https://storybook.js.org/docs/basics/introduction/">Documentation</a></li>
<li><a href="https://github.com/storybookjs">GitHub
organization</a></li>
<li><a href="https://storybook.js.org/use-cases/">Use cases</a></li>
<li><a href="https://storybook.js.org/team/">Team</a></li>
href="https://master--5ccbc373887ca40020446347.chromatic.com/">Design
system</a></li>
</ul>
<h2 id="community-resources">Community resources</h2>
<ul>
<li><a href="https://twitter.com/storybookjs">Twitter</a></li>
<li><a href="https://discordapp.com/invite/UUt2PJb">Discord</a></li>
<li><a href="https://medium.com/storybookjs">Medium</a></li>
<li><a href="https://dev.to/t/storybook">DEV.to</a></li>
<li><a href="https://github.com/storybookjs/brand">Brand’s materials</a>
- Materials for your articles and talks about Storybook.</li>
<li><a href="https://storybooks-official.netlify.com">Design system</a>
- Storybook’s website design system.</li>
<li><a
href="https://github.com/storybookjs/storybook-deployer">Storybook
Deployer</a> - Package for deploying your storybook as a static
site.</li>
<li><a href="https://dev.to/t/storybook">DEV.to #storybook</a> - Posts
about Storybook on DEV.to blogging platform.</li>
<li><a
href="https://github.com/DAN-AKL/storybook-documentation-primitives">Documentation
Primitives</a> - Custom DocBlocks for Storybook Docs.</li>
</ul>
<h2 id="tutorials">Tutorials</h2>
<h2 id="examples">Examples</h2>
<ul>
<li><a href="https://www.learnstorybook.com/">Learn Storybook</a> - A
set of tutorials to learn Storybook.</li>
<li><a href="https://decathlon.github.io/vitamin-web">Decathlon - Design
System</a></li>
<li><a href="https://primer.github.io/storybook/">GitHub - Design
System</a></li>
<li><a href="https://react-dates.github.io/react-date">Airbnb -
react-date</a></li>
<li><a
href="https://dzone.com/articles/practical-guide-to-storybook-driven-development">Practical
Guide to Storybook-Driven Development</a> - A tutorial on how to use the
Storybook tool as a means of templating and driving forward your
development efforts.</li>
<li><a href="https://www.youtube.com/watch?v=va-JzrmaiUM">Adding
Storybook Style Guide to a Create React App</a> - A tutorial on how to
add Storybook in an application generated with Create React App.</li>
<li><a href="https://www.youtube.com/watch?v=_jttw14T52o">Build your
components with Storybook</a> - A tutorial on how to create your
components and exposing them in a Storybook.</li>
href="https://mashmatrix.github.io/react-lightning-design-system/">Salesforce
- Design System</a></li>
<li><a href="https://quantum.okta.design/">Auth0/OKta - Quantum Design
System</a></li>
<li><a
href="https://davidyeiser.com/tutorials/storybook-react-with-dark-mode">Storybook
React with Full Dark Mode Integration</a> - A tutorial on how to
integrate Storybook’s dark mode toggle with your React components.</li>
href="https://axafrance.github.io/react-toolkit/latest/storybook/">AXA
France - Design System</a></li>
<li><a
href="https://snipcart.com/blog/storybook-react-tutorial-example">Intro
to Storybook with React [Tutorial &amp; Example]</a> - Learn how to
build UI components in Storybook with React for better collaboration
from design to implementation.</li>
href="https://github.com/shared-components/shared-react-components-example">Shared
React Components Boilerplate</a></li>
<li><a href="https://www.apideck.design/">Apideck - Components</a></li>
<li><a href="https://qui-max.netlify.app/?path=/story/intro--page">Qui -
Vue 2/3 Design system</a></li>
<li><a
href="https://mistica-web.vercel.app/?path=/story/welcome--welcome">Mística
- Design system</a></li>
<li><a href="https://recharts.org/en-US/storybook">Recharts -
Storybook</a></li>
</ul>
<h2 id="presentations">Presentations</h2>
<h2 id="tutorials">Tutorials</h2>
<details>
<summary>
2022
</summary>
<ul>
<li><a
href="https://snipcart.com/blog/storybook-react-tutorial-example">Storybook
React: A Beginner’s Tutorial to UI Components</a></li>
</ul>
</details>
<details>
<summary>
2020
</summary>
<ul>
<li><a
href="https://davidyeiser.com/tutorials/storybook-react-with-dark-mode">Simple
Storybook React Setup with Dark Mode Integration</a></li>
</ul>
</details>
<details>
<summary>
2018
</summary>
<ul>
<li><a href="https://www.youtube.com/watch?v=va-JzrmaiUM">Adding
Storybook Style Guide to a Create React App</a></li>
<li><a href="https://www.youtube.com/watch?v=_jttw14T52o">Build your
components with Storybook</a></li>
</ul>
</details>
<h2 id="talks">Talks</h2>
<details>
<summary>
2019
</summary>
<ul>
<li><a href="https://www.youtube.com/watch?v=zMpSwo03aKo">Storybook, le
playground qu’il vous faut pour vos composants UI! (FR)</a></li>
</ul>
</details>
<details>
<summary>
2018
</summary>
<ul>
<li><a href="https://www.youtube.com/watch?v=XN398jfTwQI">VueNYC - Learn
Storybook</a></li>
</ul>
</details>
<details>
<summary>
2017
</summary>
<ul>
<li><a href="https://www.youtube.com/watch?v=E2c183LS4lA">React
Storybook Tutorial with Examples - Getting Started with React
Storybook</a></li>
<li><a href="https://www.youtube.com/watch?v=PF0Vi-iIyoo">React
Storybook: Design, Dev, Doc, Debug Components - React Conf 2017</a></li>
<li><a href="https://www.youtube.com/watch?v=XN398jfTwQI">VueNYC - Learn
Storybook</a></li>
</ul>
</details>
<h2 id="blog-posts">Blog posts</h2>
<details>
<summary>
2019
</summary>
<ul>
<li><a
href="https://dev.to/loicgoyet/how-i-manage-to-make-my-storybook-project-the-most-efficient-possible-2d8o">How
I manage to make my Storybook project the most efficient possible</a> -
A set of useful tips to help you manage a Storybook project.</li>
<li><a
href="https://medium.com/storybookjs/storybook-5-2-794958b9b111">Storybook
5.2</a> - World-class design systems infrastructure.</li>
<li><a
href="https://medium.com/storybookjs/storybook-docspage-e185bc3622bf">Storybook
DocsPage</a> - Beautiful documentation, instantly.</li>
<li><a
href="https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a">Storybook
Docs sneak peek</a> - Turning stories into living documentation.</li>
<li><a
href="https://medium.com/storybookjs/storybook-5-0-db1d0f9c83b8">Storybook
5.0</a> - A features’ showcase about the biggest release to date.</li>
I manage to make my Storybook project the most efficient
possible</a></li>
<li><a
href="https://medium.com/storybookjs/instant-accessibility-qa-linting-in-storybook-4a474b0f5347">Real-time
accessibility testing with Storybook</a> - A comprehensive overview of
the accessibility testing tools offered in Storybook.</li>
accessibility testing with Storybook</a></li>
</ul>
</details>
<details>
<summary>
2018
</summary>
<ul>
<li><a href="https://auth0.com/blog/using-storybook-with-vuejs/">Using
Storybook with VueJS</a> - Learn how to build a component library with
Vue and Storybook to create modular and reusable components.</li>
Storybook with VueJS</a></li>
<li><a
href="https://www.iamdeveloper.com/posts/setting-up-storybook-for-preact-p5a/">Setting
up Storybook for Preact</a> - A handy guide allowing us to add storybook
easily on a Preact project.</li>
href="https://www.nickyt.co/blog/setting-up-storybook-for-preact-p5a/">Setting
up Storybook for Preact</a></li>
<li><a
href="https://auth0.com/blog/setting-up-a-component-library-with-react-and-storybook/">Setting
up a Component Library with React and Storybook</a> - Learn how to set
up a component library with React and Storybook to create modular and
reusable components that can be shared across projects.</li>
Up a Component Library with React and Storybook</a></li>
<li><a
href="https://dev.to/madhusudhansrinivas/storybook---ui-component-development-tool-for-react-vue-and-angular-article-focusing-on-react-29od">Storybook
href="https://dev.to/madhu/storybook---ui-component-development-tool-for-react-vue-and-angular-article-focusing-on-react-29od">Storybook
- UI component development tool for React, Vue, and Angular (Article
focusing on React)</a> - A brief presentation of Storybook and how to
setup on a React application.</li>
focusing on React)</a></li>
<li><a
href="https://blog.hichroma.com/storybook-vs-styleguidist-2bd93d6dcc06">Storybook
vs Styleguidist</a> - A comparison of the top UI component
explorers.</li>
<li><a
href="https://spin.atomicobject.com/2017/11/20/storybook-tests-react/">Five
Reasons to Use Storybook Tests</a> - A complete walkthrough of different
testing solutions for Storybook: Easy Cross-Browser Visual Checks,
Interaction Testing and StoryShots for Snapshot Testing.</li>
href="https://www.chromatic.com/blog/storybook-vs-styleguidist/">Storybook
vs Styleguidist</a></li>
</ul>
<h2 id="examples">Examples</h2>
</details>
<details>
<summary>
2017
</summary>
<ul>
<li><a href="https://storybooks-official.netlify.com">Storybook Design
System</a></li>
<li><a href="https://decathlon.github.io/vitamin-web">Decathlon Design
System (Vitamin)</a></li>
<li><a href="https://primer.github.io/storybook/">GitHub Design
System</a></li>
<li><a href="https://airbnb.io/react-dates/">Airbnb
(react-dates)</a></li>
<li><a
href="https://mashmatrix.github.io/react-lightning-design-system/">Salesforce
Design System</a></li>
<li><a href="https://auth0-cosmos.now.sh/sandbox/">Auth0 Design
System</a></li>
<li><a
href="https://axaguildev.github.io/react-toolkit/latest/storybook">AXA
France Design System</a></li>
<li><a
href="https://github.com/shared-components/shared-react-components-example">Shared
React Components Boilerplate</a></li>
<li><a href="https://www.apideck.design/">Apideck Components</a></li>
<li><a href="https://github.com/Qvant-lab/qui-max">Qui - Vue 2/3 Design
system</a></li>
<li><a
href="https://mistica-web.vercel.app/?path=/story/welcome-welcome--mistica">Mística
Design system</a></li>
<li><a href="https://spin.atomicobject.com/storybook-tests-react/">Five
Reasons to Use Storybook Tests</a></li>
</ul>
<h2 id="addons">Addons</h2>
<p>The official &amp; community addons lists are available on the
Storybook’s <a href="https://storybook.js.org/addons/">Addon
Page</a>.</p>
</details>
<h2 id="contributing">Contributing</h2>
<p>Contributions welcome! Read the <a
href="CONTRIBUTING.md">contribution guidelines</a> first.</p>
<h2 id="license">License</h2>
<p><a href="https://creativecommons.org/publicdomain/zero/1.0/"><img
src="http://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg"
alt="CC0" /></a></p>
<p>To the extent possible under law, <a
href="https://lauthieb.github.io">Laurent Thiebault</a> has waived all
copyright and related or neighboring rights to this work.</p>
<p><a href="https://github.com/lauthieb/awesome-storybook">storybook.md
Github</a></p>