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 — a name and description, a type (text / number / boolean / select / color / range / json / reactnode), a defaultValue, options, and min/max/step for ranges. An optional `required` flag renders a 'Required' badge in the prop table (and an asterisk in the props panel). 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, className? }OptionalThe full explorer. Takes the registry plus an optional className that is forwarded onto the explorer's root container for styling. useDesignSystemStore holds the active component, live prop values, theme mode (defaults to light; the canvas toolbar toggles between light and dark), viewport size (defaults to desktop-lg / full width; six presets across mobile, tablet and desktop tiers — sm/lg each: mobile-sm, mobile-lg, tablet-sm, tablet-lg, desktop-sm, desktop-lg), search query, the active example, the active category filter (activeCategory, default 'all'), and panel-toggle state — sidebarOpen (default false, the mobile drawer) and propsPanelOpen (default true, toggled by the toolbar cog). The ThemeMode type union also includes a 'system' value, but it is not wired to an OS-preference toggle — no UI selects it and rendering keys solely off themeMode === 'dark', so 'system' renders as light.
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