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.

Contents

• Official resources
• Community resources
• Examples
• Tutorials
• Talks
• Blog posts
• Contributing

Official resources

• Website
• Docs
• Showcase
• Blog
• Tutorials
• X
• GitHub
• Medium
• Discord
• Brand's materials
• Design system

Community resources

• DEV.to #storybook - Posts about Storybook on DEV.to blogging platform.
• Documentation Primitives - Custom DocBlocks for Storybook Docs.

Examples

• Decathlon - Design System
• GitHub - Design System
• Airbnb - react-date
• Salesforce - Design System
• Auth0/OKta - Quantum Design System
• AXA France - Design System
• Shared React Components Boilerplate
• Apideck - Components
• Qui - Vue 2/3 Design system
• Mística - Design system
• Recharts - Storybook

Tutorials

2022

• Storybook React: A Beginner's Tutorial to UI Components

2020

• Simple Storybook React Setup with Dark Mode Integration

2018

• Adding Storybook Style Guide to a Create React App
• Build your components with Storybook

Talks

2019

• Storybook, le playground qu'il vous faut pour vos composants UI! (FR)

2018

• VueNYC - Learn Storybook

2017

• React Storybook Tutorial with Examples - Getting Started with React Storybook
• React Storybook: Design, Dev, Doc, Debug Components - React Conf 2017

Blog posts

2019

• How I manage to make my Storybook project the most efficient possible
• Real-time accessibility testing with Storybook

2018

• Using Storybook with VueJS
• Setting up Storybook for Preact
• Setting Up a Component Library with React and Storybook
• Storybook - UI component development tool for React, Vue, and Angular (Article focusing on React)
• Storybook vs Styleguidist

2017

• Five Reasons to Use Storybook Tests

Contributing

Contributions welcome! Read the contribution guidelines first.