# Awesome Storybook

> A curated list of awesome resources about Storybook’s ecosystem :art:

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
- Tutorials
- Presentations
- Blog posts
- Examples
- Addons

## Official resources

- Website
- Documentation
- GitHub organization
- Use cases
- Team

## Community resources

- Twitter
- 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 2/3 Design system
- Mística Design system

## 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.