The showcase is generated from packages/ui/component-reference.json. It stays synchronized with the current component source rather than maintaining a second hand-written catalog.

bun run --cwd examples/component-showcase dev

Open http://localhost:3000.

Detail-page coverage

Every current UI component receives a dedicated detail page with:

an interactive server-rendered playground for every declared prop
typed boolean, number, array, and object controls
public component-tag syntax with single-quoted dynamic WRN expressions
component-specific production use cases when a profile exists
responsive fallback examples for every remaining component
copyable .wrn source beside every live preview
complete props, slots, and explicitly declared public events
live event.detail output for interactive components
previous and next component navigation

The specialized profiles for new and recently repaired components live in:

scripts/showcase-profiles.mjs

Update that file to add product-quality examples or public enum options. Do not infer allowed prop values from implementation comparisons; unrestricted values such as icon classes, labels, IDs, and URLs must remain free-form inputs.

Generated files

The generator creates:

app/layouts/showcase.wrn
app/layouts/document.wrn
app/pages/*.wrn
app/pages/components/*.wrn
showcase-manifest.json

showcase-manifest.json records component, category, demo, prop, slot, and event coverage and is used by the test suite. Do not hand-edit generated pages.

Validation

After changing UI components, metadata, profiles, the playground, or showcase styles, run:

bun run scripts/generate-ui-component-reference.mjs
bun run --cwd examples/component-showcase generate
bun run --cwd examples/component-showcase test
bun run --cwd examples/component-showcase build

The complete local check is:

bun run --cwd examples/component-showcase check

Review representative component pages at mobile, tablet, and desktop widths and in light, dark, keyboard-only, and reduced-motion modes before publishing.