Storybook
Awesome Storybook 
¶
A curated list of awesome resources about Storybook's ecosystem
Storybook 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.
Official resources¶
Community resources¶
- Discord
- Medium
- DEV.to
- Brand's materials - Materials for your articles and talks about Storybook.
- Design system - Storybook's website design system.
- Storybook Deployer - Package for deploying your storybook as a static site.
- Documentation Primitives - Custom DocBlocks for Storybook Docs.
Tutorials¶
- Learn Storybook - A set of tutorials to learn Storybook.
- Practical Guide to Storybook-Driven Development - A tutorial on how to use the Storybook tool as a means of templating and driving forward your development efforts.
- Adding Storybook Style Guide to a Create React App - A tutorial on how to add Storybook in an application generated with Create React App.
- Build your components with Storybook - A tutorial on how to create your components and exposing them in a Storybook.
- Storybook React with Full Dark Mode Integration - A tutorial on how to integrate Storybook’s dark mode toggle with your React components.
- Intro to Storybook with React [Tutorial & Example] - Learn how to build UI components in Storybook with React for better collaboration from design to implementation.
Presentations¶
- Storybook, le playground qu'il vous faut pour vos composants UI! (FR)
- React Storybook Tutorial with Examples - Getting Started with React Storybook
- React Storybook: Design, Dev, Doc, Debug Components - React Conf 2017
- VueNYC - Learn Storybook
Blog posts¶
- How I manage to make my Storybook project the most efficient possible - A set of useful tips to help you manage a Storybook project.
- Storybook 5.2 - World-class design systems infrastructure.
- Storybook DocsPage - Beautiful documentation, instantly.
- Storybook Docs sneak peek - Turning stories into living documentation.
- Storybook 5.0 - A features' showcase about the biggest release to date.
- Real-time accessibility testing with Storybook - A comprehensive overview of the accessibility testing tools offered in Storybook.
- Using Storybook with VueJS - Learn how to build a component library with Vue and Storybook to create modular and reusable components.
- Setting up Storybook for Preact - A handy guide allowing us to add storybook easily on a Preact project.
- Setting up a Component Library with React and Storybook - Learn how to set up a component library with React and Storybook to create modular and reusable components that can be shared across projects.
- Storybook - UI component development tool for React, Vue, and Angular (Article focusing on React) - A brief presentation of Storybook and how to setup on a React application.
- Storybook vs Styleguidist - A comparison of the top UI component explorers.
- Five Reasons to Use Storybook Tests - A complete walkthrough of different testing solutions for Storybook: Easy Cross-Browser Visual Checks, Interaction Testing and StoryShots for Snapshot Testing.
Examples¶
- Storybook Design System
- Decathlon Design System (Vitamin)
- GitHub Design System
- Airbnb (react-dates)
- Salesforce Design System
- Auth0 Design System
- AXA France Design System
- Shared React Components Boilerplate
- Apideck Components
- Qui - Vue ⅔ Design system
- Mística Design system
- Recharts
Addons¶
The official & community addons lists are available on the Storybook's Addon Page.
Contributing¶
Contributions welcome! Read the contribution guidelines first.
License¶
To the extent possible under law, Laurent Thiebault has waived all copyright and related or neighboring rights to this work.