Get started with Storybook

Welcome to Storybook's documentation ✦ Learn how to get started with Storybook in your project. Then, explore Storybook's main concepts and discover additional resources to help you grow and maintain your Storybook.

What is Storybook?

Storybook is a frontend workshop for building UI components and pages in isolation. It helps you develop and share hard-to-reach states and edge cases without needing to run your whole app. Thousands of teams use it for UI development, testing, and documentation. It's open source and free.

Install Storybook

Storybook is a standalone tool that runs alongside your app. It's a zero-config environment that works with any modern frontend framework. You can install Storybook into an existing project or create a new one from scratch.

npx storybook@latest init

Next.js

React

with Vite

React

with Webpack

React Native

on device

Vue

with Vite

Vue

with Webpack

Angular

SvelteKit

Svelte

with Vite

Svelte

with Webpack

Web Components

with Vite

Web Components

with Webpack

Want to know more about installing Storybook? Check out the installation guide.

Main concepts

Storybook is a powerful tool that can help you with many aspects of your UI development workflow. Here are some of the main concepts to get you started.

Stories

A story captures the rendered state of a UI component. Each component can have multiple stories, where each story describes a different component state.

Docs

Storybook can analyze your components to automatically create documentation alongside your stories. This automatic documentation makes it easier for you to create UI library usage guidelines, design system sites, and more.

Testing

Stories are a pragmatic starting point for your UI testing strategy. You already write stories as a natural part of UI development, so testing those stories is a low-effort way to prevent UI bugs over time.

Sharing

Publishing your Storybook allows you to share your work with others. You can also embed your stories in places like Notion or Figma.

Additional resources

Once you've learned the basics, explore these other ways to get the most out of Storybook.