Frontend workshop for building UI components and pages in isolation. Use for component documentation, testing, and visual development.
Use this library when:
npx storybook@latest initnpm run storybook| Category | File | Purpose | Condition |
|---|---|---|---|
| Knowledge | Core Concepts | Storybook fundamentals | Understanding the basics |
| Knowledge | Best Practices | Documentation patterns | Building stories |
| Rules | Setup | Installation and configuration | New project setup |
| Rules | Writing Stories | CSF format and stories | Component stories |
| Rules | Args and Controls | Interactive props | Testing variations |
| Rules | Decorators | Context and providers | Wrapper setup |
| Rules | Addons | Actions, docs, interactions | Extending Storybook |
| Rules | Testing | Interaction and visual tests | Component testing |
# Initialize
npx storybook@latest init
# Run Storybook
npm run storybook
# Build static Storybook
npm run build-storybook
# Write a story
export const Primary = {
args: {
label: 'Button',
primary: true,
},
}