Storybook: Component-Driven UI Development

Build, document and test UI components in isolation with Storybook. For front-end developers and design-system teams working in React.

Start course →

What you'll learn

  • Install Storybook and write stories in CSF3 with args and controls.
  • Cover component variants and states, and wrap stories with decorators.
  • Test components with play functions, the a11y addon and visual regression tools.
  • Document and deploy a shared component library for your team.
  • Run Storybook tests in CI and extend it with addons and themes.

Syllabus

Module 1: Getting Started

  1. What is Storybook?

Module 2: Foundation

  1. Installation and Setup
  2. Writing Your First Story

Module 3: Core Concepts

  1. Component Composition
  2. Props and Controls
  3. Variants and States

Module 4: Data & Integration

  1. Decorators and Global Setup

Module 5: Design & Documentation

  1. Addons and Enhancing Stories
  2. Testing with Storybook
  3. Accessibility and Best Practices

Module 6: Advanced Patterns

  1. Figma Integration
  2. Visual Testing
  3. CI/CD Integration
  4. Storybook for Teams

Module 7: Performance and Quality

  1. Performance Optimization
  2. Documentation Best Practices
  3. Deployment and Distribution

Module 8: Tools and Configuration

  1. Advanced Patterns and Techniques

Module 9: Real-World Applications

  1. Interview Questions and Cheat Sheet
  2. Best Practices and Workflow

Module 10: Advanced Topics

  1. Building Custom Addons
  2. Theming and Styling Storybook
  3. Monitoring and Debugging
  4. Popular Storybook Plugins

Module 11: Review & Summary

  1. Key Concepts Review