Design System Page
A living component explorer for the kit
DesignSystemPage is a built-in component playground — a Storybook-style explorer you can mount in your own app to browse the library, tweak props live and preview across viewports and themes. It's driven by a registry you provide (or the default one), so it documents your components as well as Nucleus's.
It's the same themeable, store-backed pattern as everything else: a sidebar of components, a canvas that renders the selected one, and a props panel that drives it.
The registry#
Each entry describes a component: how to import it, what props it takes (as typed controls) and example presets. createDefaultRegistry seeds it with the library's own components.
ComponentEntryregistry itemOptionalid, name, description, category (inputs / display / feedback / navigation / layout / data), importPath, a list of PropControls, example presets, and a render(props) function that draws the live preview.
PropControltyped controlOptionalDescribes one prop as an editable control — type text / number / boolean / select / color / range / json / reactnode, with defaultValue, options, and min/max/step for ranges. These render the props panel automatically.
createDefaultRegistry() => ComponentEntry[]OptionalReturns a ready registry of the kit's components so the explorer is useful out of the box; extend or replace it with your own entries.
DesignSystemPage & sub-parts#
Pass a registry and the page assembles the explorer. The pieces (ComponentSidebar, ComponentCanvas, PropsPanel) are exported for custom layouts.
DesignSystemPage{ registry }OptionalThe full explorer. useDesignSystemStore holds the active component, live prop values, theme mode (light / dark / system), viewport size (mobile→desktop), search query and the active example.
ComponentSidebar / ComponentCanvas / PropsPanelsub-componentsOptionalThe searchable, category-filtered component list; the viewport-framed live preview; and the auto-generated controls panel. designSystemTheme / extendDesignSystemTheme restyle the whole thing.
Related sections