[38;5;12m                                                                               [39m[38;2;255;187;0m[1m[4mAwesome Storybook [0m[38;5;14m[1m[4m![0m[38;2;255;187;0m[1m[4mAwesome[0m[38;5;14m[1m[4m (https://awesome.re/badge.svg)[0m[38;2;255;187;0m[1m[4m (https://awesome.re)[0m

[38;5;12m (https://storybook.js.org)[39m

[38;5;11m[1m▐[0m[38;5;12m [39m[38;5;12mA curated list of awesome resources about Storybook's ecosystem :art:[39m

[38;5;14m[1mStorybook[0m[38;5;12m (https://storybook.js.org) is a frontend tool for building UI components faster and easier.[39m

[38;5;12mContributions welcome. Add links through pull requests or create an issue to start a discussion.[39m

[38;2;255;187;0m[4mContents[0m

[38;5;12m- [39m[38;5;14m[1mOfficial resources[0m[38;5;12m (#official-resources)[39m
[38;5;12m- [39m[38;5;14m[1mCommunity resources[0m[38;5;12m (#community-resources)[39m
[38;5;12m- [39m[38;5;14m[1mTutorials[0m[38;5;12m (#tutorials)[39m
[38;5;12m- [39m[38;5;14m[1mPresentations[0m[38;5;12m (#presentations)[39m
[38;5;12m- [39m[38;5;14m[1mBlog posts[0m[38;5;12m (#blog-posts)[39m
[38;5;12m- [39m[38;5;14m[1mExamples[0m[38;5;12m (#examples)[39m
[38;5;12m- [39m[38;5;14m[1mAddons[0m[38;5;12m (#addons)[39m

[38;2;255;187;0m[4mOfficial resources[0m

[38;5;12m- [39m[38;5;14m[1mWebsite[0m[38;5;12m (https://storybook.js.org)[39m
[38;5;12m- [39m[38;5;14m[1mDocumentation[0m[38;5;12m (https://storybook.js.org/docs/basics/introduction/)[39m
[38;5;12m- [39m[38;5;14m[1mGitHub organization[0m[38;5;12m (https://github.com/storybookjs)[39m
[38;5;12m- [39m[38;5;14m[1mUse cases[0m[38;5;12m (https://storybook.js.org/use-cases/)[39m
[38;5;12m- [39m[38;5;14m[1mTeam[0m[38;5;12m (https://storybook.js.org/team/)[39m

[38;2;255;187;0m[4mCommunity resources[0m

[38;5;12m- [39m[38;5;14m[1mTwitter[0m[38;5;12m (https://twitter.com/storybookjs)[39m
[38;5;12m- [39m[38;5;14m[1mDiscord[0m[38;5;12m (https://discordapp.com/invite/UUt2PJb)[39m
[38;5;12m- [39m[38;5;14m[1mMedium[0m[38;5;12m (https://medium.com/storybookjs)[39m
[38;5;12m- [39m[38;5;14m[1mDEV.to[0m[38;5;12m (https://dev.to/t/storybook)[39m
[38;5;12m- [39m[38;5;14m[1mBrand's materials[0m[38;5;12m (https://github.com/storybookjs/brand) - Materials for your articles and talks about Storybook.[39m
[38;5;12m- [39m[38;5;14m[1mDesign system[0m[38;5;12m (https://storybooks-official.netlify.com) - Storybook's website design system.[39m
[38;5;12m- [39m[38;5;14m[1mStorybook Deployer[0m[38;5;12m (https://github.com/storybookjs/storybook-deployer) - Package for deploying your storybook as a static site.[39m
[38;5;12m- [39m[38;5;14m[1mDocumentation Primitives[0m[38;5;12m (https://github.com/DAN-AKL/storybook-documentation-primitives) - Custom DocBlocks for Storybook Docs.[39m

[38;2;255;187;0m[4mTutorials[0m

[38;5;12m- [39m[38;5;14m[1mLearn Storybook[0m[38;5;12m (https://www.learnstorybook.com/) - A set of tutorials to learn Storybook.[39m
[38;5;12m-[39m[38;5;12m [39m[38;5;14m[1mPractical[0m[38;5;14m[1m [0m[38;5;14m[1mGuide[0m[38;5;14m[1m [0m[38;5;14m[1mto[0m[38;5;14m[1m [0m[38;5;14m[1mStorybook-Driven[0m[38;5;14m[1m [0m[38;5;14m[1mDevelopment[0m[38;5;12m [39m[38;5;12m(https://dzone.com/articles/practical-guide-to-storybook-driven-development)[39m[38;5;12m [39m[38;5;12m-[39m[38;5;12m [39m[38;5;12mA[39m[38;5;12m [39m[38;5;12mtutorial[39m[38;5;12m [39m[38;5;12mon[39m[38;5;12m [39m[38;5;12mhow[39m[38;5;12m [39m[38;5;12mto[39m[38;5;12m [39m[38;5;12muse[39m[38;5;12m [39m[38;5;12mthe[39m[38;5;12m [39m[38;5;12mStorybook[39m[38;5;12m [39m[38;5;12mtool[39m[38;5;12m [39m[38;5;12mas[39m[38;5;12m [39m[38;5;12ma[39m[38;5;12m [39m[38;5;12mmeans[39m[38;5;12m [39m[38;5;12mof[39m[38;5;12m [39m[38;5;12mtemplating[39m[38;5;12m [39m[38;5;12mand[39m[38;5;12m [39m[38;5;12mdriving[39m[38;5;12m [39m[38;5;12mforward[39m[38;5;12m [39m[38;5;12myour[39m[38;5;12m [39m[38;5;12mdevelopment[39m[38;5;12m [39m
[38;5;12mefforts.[39m
[38;5;12m- [39m[38;5;14m[1mAdding Storybook Style Guide to a Create React App[0m[38;5;12m (https://www.youtube.com/watch?v=va-JzrmaiUM) - A tutorial on how to add Storybook in an application generated with Create React App.[39m
[38;5;12m- [39m[38;5;14m[1mBuild your components with Storybook[0m[38;5;12m (https://www.youtube.com/watch?v=_jttw14T52o) - A tutorial on how to create your components and exposing them in a Storybook.[39m
[38;5;12m- [39m[38;5;14m[1mStorybook React with Full Dark Mode Integration[0m[38;5;12m (https://davidyeiser.com/tutorials/storybook-react-with-dark-mode) - A tutorial on how to integrate Storybook’s dark mode toggle with your React components.[39m
[38;5;12m- [39m[38;5;14m[1mIntro to Storybook with React [0m[38;5;12mTutorial & Example[39m[38;5;14m[1m [0m[38;5;12m (https://snipcart.com/blog/storybook-react-tutorial-example) - Learn how to build UI components in Storybook with React for better collaboration from design to implementation.[39m

[38;2;255;187;0m[4mPresentations[0m

[38;5;12m- [39m[38;5;14m[1mStorybook, le playground qu'il vous faut pour vos composants UI! (FR)[0m[38;5;12m (https://www.youtube.com/watch?v=zMpSwo03aKo)[39m
[38;5;12m- [39m[38;5;14m[1mReact Storybook Tutorial with Examples - Getting Started with React Storybook[0m[38;5;12m (https://www.youtube.com/watch?v=E2c183LS4lA)[39m
[38;5;12m- [39m[38;5;14m[1mReact Storybook: Design, Dev, Doc, Debug Components - React Conf 2017[0m[38;5;12m (https://www.youtube.com/watch?v=PF0Vi-iIyoo)[39m
[38;5;12m- [39m[38;5;14m[1mVueNYC - Learn Storybook[0m[38;5;12m (https://www.youtube.com/watch?v=XN398jfTwQI)[39m

[38;2;255;187;0m[4mBlog posts[0m

[38;5;12m- [39m[38;5;14m[1mHow I manage to make my Storybook project the most efficient possible[0m[38;5;12m (https://dev.to/loicgoyet/how-i-manage-to-make-my-storybook-project-the-most-efficient-possible-2d8o) - A set of useful tips to help you manage a Storybook project.[39m
[38;5;12m- [39m[38;5;14m[1mStorybook 5.2[0m[38;5;12m (https://medium.com/storybookjs/storybook-5-2-794958b9b111) - World-class design systems infrastructure.[39m
[38;5;12m- [39m[38;5;14m[1mStorybook DocsPage[0m[38;5;12m (https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) - Beautiful documentation, instantly.[39m
[38;5;12m- [39m[38;5;14m[1mStorybook Docs sneak peek[0m[38;5;12m (https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) - Turning stories into living documentation.[39m
[38;5;12m- [39m[38;5;14m[1mStorybook 5.0[0m[38;5;12m (https://medium.com/storybookjs/storybook-5-0-db1d0f9c83b8) - A features' showcase about the biggest release to date.[39m
[38;5;12m- [39m[38;5;14m[1mReal-time accessibility testing with Storybook[0m[38;5;12m (https://medium.com/storybookjs/instant-accessibility-qa-linting-in-storybook-4a474b0f5347) - A comprehensive overview of the accessibility testing tools offered in Storybook.[39m
[38;5;12m- [39m[38;5;14m[1mUsing Storybook with VueJS[0m[38;5;12m (https://auth0.com/blog/using-storybook-with-vuejs/) - Learn how to build a component library with Vue and Storybook to create modular and reusable components.[39m
[38;5;12m- [39m[38;5;14m[1mSetting up Storybook for Preact[0m[38;5;12m (https://www.iamdeveloper.com/posts/setting-up-storybook-for-preact-p5a/) - A handy guide allowing us to add storybook easily on a Preact project.[39m
[38;5;12m-[39m[38;5;12m [39m[38;5;14m[1mSetting[0m[38;5;14m[1m [0m[38;5;14m[1mup[0m[38;5;14m[1m [0m[38;5;14m[1ma[0m[38;5;14m[1m [0m[38;5;14m[1mComponent[0m[38;5;14m[1m [0m[38;5;14m[1mLibrary[0m[38;5;14m[1m [0m[38;5;14m[1mwith[0m[38;5;14m[1m [0m[38;5;14m[1mReact[0m[38;5;14m[1m [0m[38;5;14m[1mand[0m[38;5;14m[1m [0m[38;5;14m[1mStorybook[0m[38;5;12m [39m[38;5;12m(https://auth0.com/blog/setting-up-a-component-library-with-react-and-storybook/)[39m[38;5;12m [39m[38;5;12m-[39m[38;5;12m [39m[38;5;12mLearn[39m[38;5;12m [39m[38;5;12mhow[39m[38;5;12m [39m[38;5;12mto[39m[38;5;12m [39m[38;5;12mset[39m[38;5;12m [39m[38;5;12mup[39m[38;5;12m [39m[38;5;12ma[39m[38;5;12m [39m[38;5;12mcomponent[39m[38;5;12m [39m[38;5;12mlibrary[39m[38;5;12m [39m[38;5;12mwith[39m[38;5;12m [39m[38;5;12mReact[39m[38;5;12m [39m[38;5;12mand[39m[38;5;12m [39m[38;5;12mStorybook[39m[38;5;12m [39m[38;5;12mto[39m[38;5;12m [39m[38;5;12mcreate[39m[38;5;12m [39m[38;5;12mmodular[39m[38;5;12m [39m[38;5;12mand[39m[38;5;12m [39m
[38;5;12mreusable[39m[38;5;12m [39m[38;5;12mcomponents[39m[38;5;12m [39m[38;5;12mthat[39m[38;5;12m [39m[38;5;12mcan[39m[38;5;12m [39m[38;5;12mbe[39m[38;5;12m [39m[38;5;12mshared[39m[38;5;12m [39m[38;5;12macross[39m[38;5;12m [39m[38;5;12mprojects.[39m
[38;5;12m-[39m[38;5;12m [39m[38;5;14m[1mStorybook[0m[38;5;14m[1m [0m[38;5;14m[1m-[0m[38;5;14m[1m [0m[38;5;14m[1mUI[0m[38;5;14m[1m [0m[38;5;14m[1mcomponent[0m[38;5;14m[1m [0m[38;5;14m[1mdevelopment[0m[38;5;14m[1m [0m[38;5;14m[1mtool[0m[38;5;14m[1m [0m[38;5;14m[1mfor[0m[38;5;14m[1m [0m[38;5;14m[1mReact,[0m[38;5;14m[1m [0m[38;5;14m[1mVue,[0m[38;5;14m[1m [0m[38;5;14m[1mand[0m[38;5;14m[1m [0m[38;5;14m[1mAngular[0m[38;5;14m[1m [0m[38;5;14m[1m(Article[0m[38;5;14m[1m [0m[38;5;14m[1mfocusing[0m[38;5;14m[1m [0m[38;5;14m[1mon[0m[38;5;14m[1m [0m[38;5;14m[1mReact)[0m[38;5;12m [39m[38;5;12m(https://dev.to/madhusudhansrinivas/storybook---ui-component-development-tool-for-react-vue-and-angular-article-focusing-on-react-29od)[39m[38;5;12m [39m
[38;5;12m-[39m[38;5;12m [39m[38;5;12mA[39m[38;5;12m [39m[38;5;12mbrief[39m[38;5;12m [39m[38;5;12mpresentation[39m[38;5;12m [39m[38;5;12mof[39m[38;5;12m [39m[38;5;12mStorybook[39m[38;5;12m [39m[38;5;12mand[39m[38;5;12m [39m[38;5;12mhow[39m[38;5;12m [39m[38;5;12mto[39m[38;5;12m [39m[38;5;12msetup[39m[38;5;12m [39m[38;5;12mon[39m[38;5;12m [39m[38;5;12ma[39m[38;5;12m [39m[38;5;12mReact[39m[38;5;12m [39m[38;5;12mapplication.[39m
[38;5;12m- [39m[38;5;14m[1mStorybook vs Styleguidist[0m[38;5;12m (https://blog.hichroma.com/storybook-vs-styleguidist-2bd93d6dcc06) - A comparison of the top UI component explorers.[39m
[38;5;12m-[39m[38;5;12m [39m[38;5;14m[1mFive[0m[38;5;14m[1m [0m[38;5;14m[1mReasons[0m[38;5;14m[1m [0m[38;5;14m[1mto[0m[38;5;14m[1m [0m[38;5;14m[1mUse[0m[38;5;14m[1m [0m[38;5;14m[1mStorybook[0m[38;5;14m[1m [0m[38;5;14m[1mTests[0m[38;5;12m [39m[38;5;12m(https://spin.atomicobject.com/2017/11/20/storybook-tests-react/)[39m[38;5;12m [39m[38;5;12m-[39m[38;5;12m [39m[38;5;12mA[39m[38;5;12m [39m[38;5;12mcomplete[39m[38;5;12m [39m[38;5;12mwalkthrough[39m[38;5;12m [39m[38;5;12mof[39m[38;5;12m [39m[38;5;12mdifferent[39m[38;5;12m [39m[38;5;12mtesting[39m[38;5;12m [39m[38;5;12msolutions[39m[38;5;12m [39m[38;5;12mfor[39m[38;5;12m [39m[38;5;12mStorybook:[39m[38;5;12m [39m[38;5;12mEasy[39m[38;5;12m [39m[38;5;12mCross-Browser[39m[38;5;12m [39m[38;5;12mVisual[39m[38;5;12m [39m[38;5;12mChecks,[39m[38;5;12m [39m[38;5;12mInteraction[39m[38;5;12m [39m[38;5;12mTesting[39m[38;5;12m [39m[38;5;12mand[39m[38;5;12m [39m
[38;5;12mStoryShots[39m[38;5;12m [39m[38;5;12mfor[39m[38;5;12m [39m[38;5;12mSnapshot[39m[38;5;12m [39m[38;5;12mTesting.[39m

[38;2;255;187;0m[4mExamples[0m

[38;5;12m- [39m[38;5;14m[1mStorybook Design System[0m[38;5;12m (https://storybooks-official.netlify.com)[39m
[38;5;12m- [39m[38;5;14m[1mDecathlon Design System (Vitamin)[0m[38;5;12m (https://decathlon.github.io/vitamin-web)[39m
[38;5;12m- [39m[38;5;14m[1mGitHub Design System[0m[38;5;12m (https://primer.github.io/storybook/)[39m
[38;5;12m- [39m[38;5;14m[1mAirbnb (react-dates)[0m[38;5;12m (https://airbnb.io/react-dates/)[39m
[38;5;12m- [39m[38;5;14m[1mSalesforce Design System[0m[38;5;12m (https://mashmatrix.github.io/react-lightning-design-system/)[39m
[38;5;12m- [39m[38;5;14m[1mAuth0 Design System[0m[38;5;12m (https://auth0-cosmos.now.sh/sandbox/)[39m
[38;5;12m- [39m[38;5;14m[1mAXA France Design System[0m[38;5;12m (https://axaguildev.github.io/react-toolkit/latest/storybook)[39m
[38;5;12m- [39m[38;5;14m[1mShared React Components Boilerplate[0m[38;5;12m (https://github.com/shared-components/shared-react-components-example)[39m
[38;5;12m- [39m[38;5;14m[1mApideck Components[0m[38;5;12m (https://www.apideck.design/)[39m
[38;5;12m- [39m[38;5;14m[1mQui - Vue 2/3 Design system[0m[38;5;12m (https://github.com/Qvant-lab/qui-max)[39m
[38;5;12m- [39m[38;5;14m[1mMística Design system[0m[38;5;12m (https://mistica-web.vercel.app/?path=/story/welcome-welcome--mistica)[39m

[38;2;255;187;0m[4mAddons[0m

[38;5;12mThe official & community addons lists are available on the Storybook's [39m[38;5;14m[1mAddon Page[0m[38;5;12m (https://storybook.js.org/addons/).[39m

[38;2;255;187;0m[4mContributing[0m

[38;5;12mContributions welcome! Read the [39m[38;5;14m[1mcontribution guidelines[0m[38;5;12m (CONTRIBUTING.md) first.[39m

[38;2;255;187;0m[4mLicense[0m

[38;5;14m[1m![0m[38;5;12mCC0[39m[38;5;14m[1m (http://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg)[0m[38;5;12m (https://creativecommons.org/publicdomain/zero/1.0/)[39m

[38;5;12mTo the extent possible under law, [39m[38;5;14m[1mLaurent Thiebault[0m[38;5;12m (https://lauthieb.github.io) has waived all copyright and related or neighboring rights to this work.[39m
