Storybook is an open-source **[UI development tool](https://www.google.com/search?q=UI+development+tool&sca_esv=8ab2282fee241d3c&sxsrf=AE3TifPSVfYbyCUp3jW67zu5Rmfn0cxecA%3A1765433073999&ei=8V46afnXPIzRg8UPwdPPwA8&ved=2ahUKEwidha_d7rSRAxXzzjgGHSliKisQgK4QegQIARAD&uact=5&oq=storybook+tool++bsics&gs_lp=Egxnd3Mtd2l6LXNlcnAiFXN0b3J5Ym9vayB0b29sICBic2ljczIHECEYoAEYCjIHECEYoAEYCjIFECEYnwVI7B5Q3wtY9BtwAXgBkAEAmAGaAqABwQuqAQUwLjMuNLgBA8gBAPgBAZgCCKACtwzCAgoQABiwAxjWBBhHwgIGEAAYFhgewgIFECEYoAGYAwCIBgGQBgiSBwcxLjMuMy4xoAftGrIHBzAuMy4zLjG4B6oMwgcHMi01LjIuMcgHRoAIAA&sclient=gws-wiz-serp&mstk=AUtExfCJFd01ZrJ1TunK3o6YLF5fwWOkW19cNKst9C_zP3vrwcxuG4uoTKNFj0x9vkRWD6A-NE4Vwlpd66S10E46LtNRuXJzT3uwUGhspzfO2Ju5xUUfNoLzM2qjCzHwlGVHKtDiJ9QGlK5uA6cjH24vtNEe6zQIjP3fDQw9XwAHgzcYV-Wxr5oLeDtvZfYtS3oarFSB5m91qh9ANSAhwc1_JlmAywDQgtoKgbEd3foWwVj62ZKPx8-p2GmIdX2lm5nHnp-mNZiOGY2N2Xopg-POfcE1&csui=3)** that lets developers build, test, and document components in an isolated sandbox environment, separate from the main application, ensuring consistency and efficiency. Its basics involve creating "stories" (different states of a component), running the Storybook server (often `npm run storybook`), and using its interface to interactively adjust props, view different states (like error or loading), and leverage add-ons for testing (accessibility, visual regression) and documentation.
This video provides a quick overview of Storybook:
02:19
[
Fireship
YouTube • 27 Jun 2022
](https://www.youtube.com/watch?v=gdlTFPebzAU)
Core Concepts:
- **[Isolation](https://www.google.com/search?q=Isolation&sca_esv=8ab2282fee241d3c&sxsrf=AE3TifPSVfYbyCUp3jW67zu5Rmfn0cxecA%3A1765433073999&ei=8V46afnXPIzRg8UPwdPPwA8&ved=2ahUKEwidha_d7rSRAxXzzjgGHSliKisQgK4QegQIBRAB&uact=5&oq=storybook+tool++bsics&gs_lp=Egxnd3Mtd2l6LXNlcnAiFXN0b3J5Ym9vayB0b29sICBic2ljczIHECEYoAEYCjIHECEYoAEYCjIFECEYnwVI7B5Q3wtY9BtwAXgBkAEAmAGaAqABwQuqAQUwLjMuNLgBA8gBAPgBAZgCCKACtwzCAgoQABiwAxjWBBhHwgIGEAAYFhgewgIFECEYoAGYAwCIBgGQBgiSBwcxLjMuMy4xoAftGrIHBzAuMy4zLjG4B6oMwgcHMi01LjIuMcgHRoAIAA&sclient=gws-wiz-serp&mstk=AUtExfCJFd01ZrJ1TunK3o6YLF5fwWOkW19cNKst9C_zP3vrwcxuG4uoTKNFj0x9vkRWD6A-NE4Vwlpd66S10E46LtNRuXJzT3uwUGhspzfO2Ju5xUUfNoLzM2qjCzHwlGVHKtDiJ9QGlK5uA6cjH24vtNEe6zQIjP3fDQw9XwAHgzcYV-Wxr5oLeDtvZfYtS3oarFSB5m91qh9ANSAhwc1_JlmAywDQgtoKgbEd3foWwVj62ZKPx8-p2GmIdX2lm5nHnp-mNZiOGY2N2Xopg-POfcE1&csui=3):** Develop components without app complexities (data, routing) in a clean environment.
- **[Stories](https://www.google.com/search?q=Stories&sca_esv=8ab2282fee241d3c&sxsrf=AE3TifPSVfYbyCUp3jW67zu5Rmfn0cxecA%3A1765433073999&ei=8V46afnXPIzRg8UPwdPPwA8&ved=2ahUKEwidha_d7rSRAxXzzjgGHSliKisQgK4QegQIBRAD&uact=5&oq=storybook+tool++bsics&gs_lp=Egxnd3Mtd2l6LXNlcnAiFXN0b3J5Ym9vayB0b29sICBic2ljczIHECEYoAEYCjIHECEYoAEYCjIFECEYnwVI7B5Q3wtY9BtwAXgBkAEAmAGaAqABwQuqAQUwLjMuNLgBA8gBAPgBAZgCCKACtwzCAgoQABiwAxjWBBhHwgIGEAAYFhgewgIFECEYoAGYAwCIBgGQBgiSBwcxLjMuMy4xoAftGrIHBzAuMy4zLjG4B6oMwgcHMi01LjIuMcgHRoAIAA&sclient=gws-wiz-serp&mstk=AUtExfCJFd01ZrJ1TunK3o6YLF5fwWOkW19cNKst9C_zP3vrwcxuG4uoTKNFj0x9vkRWD6A-NE4Vwlpd66S10E46LtNRuXJzT3uwUGhspzfO2Ju5xUUfNoLzM2qjCzHwlGVHKtDiJ9QGlK5uA6cjH24vtNEe6zQIjP3fDQw9XwAHgzcYV-Wxr5oLeDtvZfYtS3oarFSB5m91qh9ANSAhwc1_JlmAywDQgtoKgbEd3foWwVj62ZKPx8-p2GmIdX2lm5nHnp-mNZiOGY2N2Xopg-POfcE1&csui=3):** Code snippets defining different UI states (e.g., a button in primary, secondary, disabled states) for a component.
- **[Sandbox](https://www.google.com/search?q=Sandbox&sca_esv=8ab2282fee241d3c&sxsrf=AE3TifPSVfYbyCUp3jW67zu5Rmfn0cxecA%3A1765433073999&ei=8V46afnXPIzRg8UPwdPPwA8&ved=2ahUKEwidha_d7rSRAxXzzjgGHSliKisQgK4QegQIBRAF&uact=5&oq=storybook+tool++bsics&gs_lp=Egxnd3Mtd2l6LXNlcnAiFXN0b3J5Ym9vayB0b29sICBic2ljczIHECEYoAEYCjIHECEYoAEYCjIFECEYnwVI7B5Q3wtY9BtwAXgBkAEAmAGaAqABwQuqAQUwLjMuNLgBA8gBAPgBAZgCCKACtwzCAgoQABiwAxjWBBhHwgIGEAAYFhgewgIFECEYoAGYAwCIBgGQBgiSBwcxLjMuMy4xoAftGrIHBzAuMy4zLjG4B6oMwgcHMi01LjIuMcgHRoAIAA&sclient=gws-wiz-serp&mstk=AUtExfCJFd01ZrJ1TunK3o6YLF5fwWOkW19cNKst9C_zP3vrwcxuG4uoTKNFj0x9vkRWD6A-NE4Vwlpd66S10E46LtNRuXJzT3uwUGhspzfO2Ju5xUUfNoLzM2qjCzHwlGVHKtDiJ9QGlK5uA6cjH24vtNEe6zQIjP3fDQw9XwAHgzcYV-Wxr5oLeDtvZfYtS3oarFSB5m91qh9ANSAhwc1_JlmAywDQgtoKgbEd3foWwVj62ZKPx8-p2GmIdX2lm5nHnp-mNZiOGY2N2Xopg-POfcE1&csui=3):** The Storybook UI where components are rendered and interacted with.
- **[Add-ons](https://www.google.com/search?q=Add-ons&sca_esv=8ab2282fee241d3c&sxsrf=AE3TifPSVfYbyCUp3jW67zu5Rmfn0cxecA%3A1765433073999&ei=8V46afnXPIzRg8UPwdPPwA8&ved=2ahUKEwidha_d7rSRAxXzzjgGHSliKisQgK4QegQIBRAH&uact=5&oq=storybook+tool++bsics&gs_lp=Egxnd3Mtd2l6LXNlcnAiFXN0b3J5Ym9vayB0b29sICBic2ljczIHECEYoAEYCjIHECEYoAEYCjIFECEYnwVI7B5Q3wtY9BtwAXgBkAEAmAGaAqABwQuqAQUwLjMuNLgBA8gBAPgBAZgCCKACtwzCAgoQABiwAxjWBBhHwgIGEAAYFhgewgIFECEYoAGYAwCIBgGQBgiSBwcxLjMuMy4xoAftGrIHBzAuMy4zLjG4B6oMwgcHMi01LjIuMcgHRoAIAA&sclient=gws-wiz-serp&mstk=AUtExfCJFd01ZrJ1TunK3o6YLF5fwWOkW19cNKst9C_zP3vrwcxuG4uoTKNFj0x9vkRWD6A-NE4Vwlpd66S10E46LtNRuXJzT3uwUGhspzfO2Ju5xUUfNoLzM2qjCzHwlGVHKtDiJ9QGlK5uA6cjH24vtNEe6zQIjP3fDQw9XwAHgzcYV-Wxr5oLeDtvZfYtS3oarFSB5m91qh9ANSAhwc1_JlmAywDQgtoKgbEd3foWwVj62ZKPx8-p2GmIdX2lm5nHnp-mNZiOGY2N2Xopg-POfcE1&csui=3):** Plugins that extend functionality, like controls for props, accessibility checks, or viewport resizing.
Basic Workflow:
1. **Install:** Add Storybook to your project (`npx sb init`).
2. **Create Stories:** In your component's `stories` folder, `export` your component and define stories (e.g., `export const Primary = () => ;`).
3. **Run:** Start the development server with `npm run storybook` (or `yarn storybook`).
4. **Develop & Test:**
- Use the sidebar to select stories.
- Interact with components in the sandbox.
- Use the Controls panel to change props dynamically.
- Add testing add-ons for quality assurance.
5. **Document:** Storybook automatically generates documentation from your stories, making them shareable and reusable.
This video demonstrates how to set up and use Storybook:
- **Faster Development:** Focus on one component at a time.
- **Consistency:** Build a shared library of components.
- **Collaboration:** Designers, developers, and stakeholders can review UIs easily.
- **Testing:** Integrated testing for UI bugs.
This video explains the core concepts of Storybook: