Foundations
Library
Technology
Brand
Storybook
Storybook is our component development and testing environment. It lets you build, preview, and interact with UI components in isolation — outside the app, without needing real data or backend services. Every component in the Pellucid Library has stories that show its different states and variants.
What It Does
Component isolation
Render any component by itself without the full app. Test edge cases, loading states, and error handling.
Visual testing
See exactly how a component looks with different props, themes, and screen sizes before integrating it.
Documentation
Each story serves as living documentation — shows what props a component accepts and how it behaves.
Accessibility checks
Built-in a11y addon flags accessibility issues like missing labels, low contrast, and keyboard navigation problems.
Commands
Run locally
npm run storybookBuild static
npx storybook buildPort
6006Production
storybook.pellucidlabs.org