What's new Report an issue
GIG Cymru NHS Wales, Digital Health and Care Wales

Using Storybook

The interactive playground. Every reference component rendered with all of its variants and controls, so you can try a component before you build with it.

What it is for

This website documents when to use a component and how it should behave. Storybook shows you what it does: change a prop and the component re-renders, so you can see every variant, size and state without writing a page first.

Reach for it when you are choosing between two components, checking whether a variant already exists before building one, or confirming how a component behaves at a state you cannot easily reproduce in your own app.

How it relates to this site

Both are built from the same source. A component's page here and its Storybook entry render the same files from packages/react and packages/web, so they cannot disagree about behaviour. If they appear to, the site build is stale — report it.

What it does not cover

Storybook renders the React reference implementation. It is not a Blazor or MAUI preview, and it does not carry the usage guidance, accessibility requirements or content rules that live on the component pages here. Use both: this site for the decision, Storybook for the behaviour.

Running it locally

If you are working in the repository rather than reading the published copy:

npm install\nnpm run storybook