lauthieb / Awesome Storybook
Licence: other
A collection of awesome resources about @storybookjs ecosystem 🎨
Stars: ✭ 165
Projects that are alternatives of or similar to Awesome Storybook
Buffer Components
Buffer's shared collection of React UI components 🤜🤛
Stars: ✭ 120 (-27.27%)
Mutual labels: storybook
Storybook Addon Console
storybook-addon. Redirects console output into action logger panel
Stars: ✭ 138 (-16.36%)
Mutual labels: storybook
React Responsive Carousel
React.js Responsive Carousel (with Swipe)
Stars: ✭ 1,962 (+1089.09%)
Mutual labels: storybook
React Laravel Boilerplate
A Laravel REST API backend with React/Redux, hot module reloading in development and route-level code splitting
Stars: ✭ 146 (-11.52%)
Mutual labels: storybook
Creevey
Cross-browser screenshot testing tool for Storybook with fancy UI Runner.
Stars: ✭ 155 (-6.06%)
Mutual labels: storybook
React Storybook Addon Props Combinations
Given possible values for each prop, renders your component with all combinations of prop values.
Stars: ✭ 130 (-21.21%)
Mutual labels: storybook
React Storybook Addon Chapters
📒 Showcase multiple React components within a story
Stars: ✭ 149 (-9.7%)
Mutual labels: storybook
Storybook Addon
Develop themable components with Emotion/Styled Components/Material-UI with help of Storybook & React Theming
Stars: ✭ 122 (-26.06%)
Mutual labels: storybook
Mhy
🧩 A zero-config, out-of-the-box, multi-purpose toolbox and development environment
Stars: ✭ 128 (-22.42%)
Mutual labels: storybook
Vue Storybook
Custom <story> blocks for Vue single file components
Stars: ✭ 147 (-10.91%)
Mutual labels: storybook
Mdx Embed
Embed 3rd party media content in MDX - no import required 🧽
Stars: ✭ 119 (-27.88%)
Mutual labels: storybook
Babel Plugin React Docgen
📝 Babel plugin to add react-docgen info into your code.
Stars: ✭ 156 (-5.45%)
Mutual labels: storybook
Antd Data Table
A component that combines antd's Table and Form to do the search, display, and operating jobs for data.
Stars: ✭ 119 (-27.88%)
Mutual labels: storybook
Typescript With Electron React Kit
Don't just start your Electron app... TWERKit.
Stars: ✭ 143 (-13.33%)
Mutual labels: storybook
Cra Recipe
Step-by-step guide to bootstrap a CRA app from scratch.
Stars: ✭ 158 (-4.24%)
Mutual labels: 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.
Contents
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.
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
- GitHub Design System
- Airbnb (react-dates)
- Salesforce Design System
- Auth0 Design System
- AXA France Design System
- Shared React Components Boilerplate
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.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].