> For the complete documentation index, see [llms.txt](https://docs.devlaunchers.org/dl-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.devlaunchers.org/dl-docs/universal-design-system/universal-design-system/getting-started/design-stack/storybook.md). # Storybook Storybook is the **primary development environment** for building, testing, and documenting Universal Design System components in code. It serves as the single source of truth for how UDS components behave in real application contexts. At Dev Launchers, Storybook bridges the gap between **design intent and implementation**, enabling designers and developers to collaborate around the same component definitions, states, and behaviors. *** ### What Storybook Is Used For Storybook allows us to work with components in isolation, outside of product codebases. This makes it easier to: * Develop and test components independently * Validate component behavior across states, sizes, themes, and devices * Review accessibility, interaction, and responsiveness * Share implementation details with designers and product partners * Document component APIs and usage patterns Storybook is where components become **real, testable UI**, not just concepts. *** ### How Storybook Fits into the Design System Storybook complements Figma by representing the **coded version** of the Universal Design System. * **Figma** defines visual intent, tokens, and component structure * **Storybook** validates implementation, behavior, and accessibility in code Every production-ready component should have: * A documented Storybook entry * Defined props that mirror component properties in Figma * Stories covering key states, variants, and edge cases *** ### Who Uses Storybook Storybook is primarily used by: * **Developers** building and maintaining UDS components * **Designers** validating parity between design and implementation * **Product teams** reviewing component behavior and constraints * **Accessibility reviewers** testing focus, keyboard navigation, and states Even if you don’t write code, Storybook provides valuable insight into what components can and cannot do. *** ### What You’ll Find in Storybook Within Storybook, you’ll find: * Individual component stories * Variant and state examples * Interactive controls for props * Theme and device previews * Accessibility checks and notes * Links back to design specifications when available Storybook reflects the **current implementation status** of components, including limitations and known issues. *** ### When to Use Storybook Use Storybook when you need to: * Understand how a component behaves in code * Verify interaction states or edge cases * Review accessibility behavior * Test theme or device variations * Align on implementation details before or during development For visual design exploration and planning, start in Figma.\ For implementation validation and behavior, use Storybook. *** ### Accessing Storybook Use the button below to open the live Storybook instance for the Universal Design System. View Storybook --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.devlaunchers.org/dl-docs/universal-design-system/universal-design-system/getting-started/design-stack/storybook.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.