---
title: Get started with Storybook
hideRendererSelector: true
---

Welcome to Storybook documentation ✦ Learn how to get up and running with Storybook through tutorials, APIs and platform resources.

## What is Storybook?

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

## Install Storybook

TK

<!-- prettier-ignore-start -->

<CodeSnippets
  paths={[
   'common/init-command.npx.js.mdx',
   'common/init-command.yarn.js.mdx',
   'common/init-command.pnpm.js.mdx',
  ]}
/>

<!-- prettier-ignore-end -->

<div class="sb-grid two-up">
  <a href="./nextjs.md?renderer=react" class="sb-grid-item card media">
    <img src="/logo-nextjs.svg" width="28" height="28" alt="Next.js" class="img" />
    <h3>Next.js</h3>
    <p>Full-featured React framework with great developer experience</p>
  </a>
  <a href="./react-vite.md?renderer=react" class="sb-grid-item card media">
    <img src="/logo-react.svg" width="28" height="28" alt="React" class="img" />
    <h3>React + Vite</h3>
    <p>Full-featured React framework with great developer experience</p>
  </a>
  <a href="./react-webpack5.md?renderer=react" class="sb-grid-item card media">
    <img src="/logo-react.svg" width="28" height="28" alt="" class="img" />
    <h3>React + Webpack</h3>
    <p>Full-featured React framework with great developer experience</p>
  </a>
  <a href="./vue-vite.md?renderer=vue" class="sb-grid-item card media">
    <img src="/logo-vue.svg" width="28" height="28" alt="" class="img" />
    <h3>Vue + Vite</h3>
    <p>Full-featured React framework with great developer experience</p>
  </a>
  <a href="./vue-webpack5.md?renderer=vue" class="sb-grid-item card media">
    <img src="/logo-vue.svg" width="28" height="28" alt="" class="img" />
    <h3>Vue + Webpack</h3>
    <p>Full-featured React framework with great developer experience</p>
  </a>
  <a href="./angular.md?renderer=angular" class="sb-grid-item card media">
    <img src="/logo-angular.svg" width="28" height="28" alt="" class="img" />
    <h3>Angular</h3>
    <p>Full-featured React framework with great developer experience</p>
  </a>
  <a href="./sveltekit.md?renderer=svelte" class="sb-grid-item card media">
    <img src="/logo-svelte.svg" width="28" height="28" alt="" class="img" />
    <h3>SvelteKit</h3>
    <p>Full-featured React framework with great developer experience</p>
  </a>
  <a href="./svelte-vite.md?renderer=svelte" class="sb-grid-item card media">
    <img src="/logo-svelte.svg" width="28" height="28" alt="" class="img" />
    <h3>Svelte + Vite</h3>
    <p>Full-featured React framework with great developer experience</p>
  </a>
  <a href="./svelte-webpack5.md?renderer=svelte" class="sb-grid-item card media">
    <img src="/logo-svelte.svg" width="28" height="28" alt="" class="img" />
    <h3>Svelte + Webpack</h3>
    <p>Full-featured React framework with great developer experience</p>
  </a>
  <a href="./web-components-vite.md?renderer=web-components" class="sb-grid-item card media">
    <img src="/logo-web-components.svg" width="28" height="28" alt="" class="img" />
    <h3>Web components + Vite</h3>
    <p>Full-featured React framework with great developer experience</p>
  </a>
  <a href="./web-components-webpack5.md?renderer=web-components" class="sb-grid-item card media">
    <img src="/logo-web-components.svg" width="28" height="28" alt="" class="img" />
    <h3>Web components + Webpack</h3>
    <p>Full-featured React framework with great developer experience</p>
  </a>
</div>

## Main concepts

TK

<div class="sb-grid two-up">
  <a href="../writing-stories/index.md" class="sb-grid-item card card-fancy media media-title-only">
    <img src="/icon-story.svg" alt="Storybook Story" width="20" height="20" class="img" />
    <h3>Stories</h3>
    <p>A story captures the rendered state of a UI component. Developers write multiple stories per component that describe all the “interesting” states a component can support.</p>
  </a>
  <a href="../writing-docs/index.md" class="sb-grid-item card card-fancy media media-title-only">
    <img src="/icon-docs.svg" alt="Storybook Docs" width="20" height="20" class="img" />
    <h3>Docs</h3>
    <p>Storybook gives you tools to expand this essential documentation with prose and layout that feature your components and stories prominently.</p>
  </a>
  <a href="../writing-tests/index.md" class="sb-grid-item card card-fancy media media-title-only">
    <img src="/icon-testing.svg" alt="Storybook Testing" width="20" height="20" class="img" />
    <h3>Testing</h3>
    <p>TK</p>
  </a>
  <a href="../sharing/index.md" class="sb-grid-item card card-fancy media media-title-only">
    <img src="/icon-sharing.svg" alt="Share Storybook" width="20" height="20" class="img" />
    <h3>Sharing</h3>
    <p>TK</p>
  </a>
</div>

## Additional resources

TK

<div class="sb-grid three-up">
  <a href="../builders/index.md" class="sb-grid-item media">
    <img src="/icon-more.svg" width="28" height="28" alt="" class="img" />
    Builders
  </a>
  <a href="https://storybook.js.org/integrations/" class="sb-grid-item media">
    <img src="/icon-more.svg" width="28" height="28" alt="" class="img" />
    Addon library
  </a>
  <a href="../essentials/index.md" class="sb-grid-item media">
    <img src="/icon-more.svg" width="28" height="28" alt="" class="img" />
    Essential addons
  </a>
  <a href="https://storybook.js.org/integrations/" class="sb-grid-item media">
    <img src="/icon-more.svg" width="28" height="28" alt="" class="img" />
    Recipes
  </a>
  <a href="../contribute/index.md" class="sb-grid-item media">
    <img src="/icon-more.svg" width="28" height="28" alt="" class="img" />
    How to contribute
  </a>
  <a href="../migration-guide/index.md" class="sb-grid-item media">
    <img src="/icon-more.svg" width="28" height="28" alt="" class="img" />
    Migrate to 8.0
  </a>
  <a href="../faq.md" class="sb-grid-item media">
    <img src="/icon-more.svg" width="28" height="28" alt="" class="img" />
    FAQ
  </a>
</div>

---

<div class="sb-grid two-up">
  <div class="sb-grid-item">
    <h3>Need some help?</h3>
    <p><a href="https://github.com/storybookjs/storybook/discussions/categories/help">Join a discussion on GitHub</a></p>
  </div>
  <div class="sb-grid-item">
    <h3>Latest product updates</h3>
    <p><a href="https://storybook.js.org/releases/">See changelog</a></p>
  </div>
</div>

<style>
  {`
    .sb-grid {
      display: grid;
      gap: 16px;
    }

    .sb-grid.two-up {
      grid-template-columns: repeat(2, 1fr);
    }

    .sb-grid.three-up {
      grid-template-columns: repeat(3, 1fr);
    }
    
    .sb-grid.four-up {
      grid-template-columns: repeat(4, 1fr);
    }

    a.sb-grid-item.sb-grid-item.sb-grid-item {
      color: inherit;
      text-decoration: none;
    }

    .card {
      border-radius: 6px;
      border: 1px solid #D9E8F2;
      padding: 12px;
      transition: border-color 0.2s ease;
    }

    .card:hover {
      border-color: #B2C3CD;
    }

    .card h3 {
      font-size: 16px;
      font-weight: 600;
      line-height: 28px;
      margin: 0;
    }

    .card p {
      font-size: 14px;
      line-height: 24px;
      margin: 0;
    }

    .card.card-fancy {
      border: 1px solid #D9E8F2;
      padding: 24px 28px;
    }

    .card.card-fancy h3 {
      font-size: 18px;
      font-weight: 700;
    }

    .media.media.media {
      display: grid;
    }

    .media {
      grid-template-columns: auto 1fr;
      grid-template-rows: auto 1fr;
      gap: 0 12px;
    }

    .media .img {
      align-self: baseline;
    }

    .media:not(.media-title-only) .img {
      grid-row: span 2;
    }

    .media-title-only {
      row-gap: 12px;
    }

    .media-title-only .img {
      margin-top: 4px;
    }

    .media-title-only p {
      grid-column: span 2;
    }
  `}
</style>