# Storybook Documentation
# Source: https://storybook.js.org/docs/get-started
# Page: /docs/get-started

# Get started with 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

Run this command to install Storybook into an existing project or create a new one from scratch:

npm Copy
    
    
    npm create storybook@latest

Want to know more about installing Storybook? Check out the [installation guide](./docs/get-started/install).

## 

Supported frameworks

[![](/images/logos/renderers/logo-nextjs.svg)Next.js](/docs/get-started/frameworks/nextjs/?renderer=react)[![](/images/logos/renderers/logo-nextjs.svg)Next.jswith Vite](/docs/get-started/frameworks/nextjs-vite/?renderer=react)[![](/images/logos/renderers/logo-react.svg)Reactwith Vite](/docs/get-started/frameworks/react-vite/?renderer=react)[![](/images/logos/renderers/logo-react.svg)Reactwith Webpack](/docs/get-started/frameworks/react-webpack5/?renderer=react)[![](/images/logos/renderers/logo-react.svg)React Native Webwith Vite (in browser)](/docs/get-started/frameworks/react-native-web-vite/?renderer=react-native-web)[![](/images/logos/renderers/logo-react.svg)React Nativeon device](https://github.com/storybookjs/react-native)[![](/images/logos/renderers/logo-preact.svg)Preactwith Vite](/docs/get-started/frameworks/preact-vite?renderer=preact)[![](/images/logos/renderers/logo-vue.svg)Vuewith Vite](/docs/get-started/frameworks/vue3-vite/?renderer=vue)[![](/images/logos/renderers/logo-angular.svg)Angular](/docs/get-started/frameworks/angular/?renderer=angular)[![](/images/logos/renderers/logo-svelte.svg)SvelteKit](/docs/get-started/frameworks/sveltekit/?renderer=svelte)[![](/images/logos/renderers/logo-svelte.svg)Sveltewith Vite](/docs/get-started/frameworks/svelte-vite/?renderer=svelte)[![](/images/logos/renderers/logo-web-components.svg)Web Componentswith Vite](/docs/get-started/frameworks/web-components-vite/?renderer=web-components)

## 

Community-maintained frameworks

Storybook includes an active community that supports additional frameworks and libraries. These community-maintained frameworks are actively developed and maintained by community contributors.

[![](/images/logos/renderers/logo-analog.svg)Analogwith Vite](https://analogjs.org/docs/integrations/storybook)[![](/images/logos/renderers/logo-nuxt.svg)Nuxtwith Vite](https://storybook.nuxtjs.org/)[![](/images/logos/renderers/logo-solidjs.svg)SolidJSwith Vite](https://github.com/solidjs-community/storybook)[![](/images/logos/renderers/logo-react.svg)Reactwith Rspack / Rsbuild](https://storybook.rsbuild.dev/guide/framework/react.html)[![](/images/logos/renderers/logo-vue.svg)Vuewith Rspack / Rsbuild](https://storybook.rsbuild.dev/guide/framework/vue.html)[![](/images/logos/renderers/logo-web-components.svg)Web Componentswith Rspack / Rsbuild](https://storybook.rsbuild.dev/guide/framework/web-components.html)

## 

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.

[![](/images/icons/icon-story.svg)StoriesA story captures the rendered state of a UI component. Each component can have multiple stories, where each story describes a different component state.](/docs/writing-stories)[![](/images/icons/icon-docs.svg)DocsStorybook 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.](/docs/writing-docs)[![](/images/icons/icon-testing.svg)TestingStories 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.](/docs/writing-tests)[![](/images/icons/icon-sharing.svg)SharingPublishing your Storybook allows you to share your work with others. You can also embed your stories in places like Notion or Figma.](/docs/sharing)

## 

Additional resources

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

[Essential features](/docs/essentials)[Configure Storybook](/docs/configure)[Addons & Integrations](/addons)[Showcase](/showcase)[Tutorials](/tutorials)[Migrate to 10.1](/docs/releases/migration-guide)[FAQ](/docs/faq)

Need some help?

[Join a discussion on GitHub](https://github.com/storybookjs/storybook/discussions/categories/help)

Latest product updates

[See changelog](https://storybook.js.org/releases/)

Was this page useful?

👍👎

[✍️ Edit on Github](https://github.com/storybookjs/storybook/tree/next/docs/index.mdx)