Scaffold — run non-interactively, passing example names as the variants argument:
pnpm --filter docs scaffold component <name> "<description>" "<example1,example2>"
Generates preview files, registry entries, sources.ts entry, and the MDX page. See REFERENCE.md for the full file list.
Fill preview TODOs — for each src/previews/<name>/<name>-<example>.tsx, replace the TODO with real JSX derived from the component source. Follow the instance count convention (see Conventions below).
If any preview uses the select pattern (new or update path): also update src/previews/registry.ts — change the default import to named+default imports, and add a variants map to the registry entry. The select prop on <ComponentPreview> is non-functional without this.
import BadgeVariantsDefault, {
Solid as BadgeVariantsSolid,
Soft as BadgeVariantsSoft,
} from './badge/badge-variants';
'badge-variants': {
component: BadgeVariantsDefault,
variants: { solid: BadgeVariantsSolid, soft: BadgeVariantsSoft },
source: readSource('badge/badge-variants.tsx'),
},
Select pattern footgun — every variant needs a named export. ComponentPreview uses extractExport(source, 'Soft') to extract the code snippet for each variant. It scans the source file for export function Soft( literally — a default export never matches. If you map a variant key to the default export (e.g. soft: MyDefault), that variant's code block will be silently empty. Always give every variant its own named export function, including the first/primary one, and set the default export to one of them:
export function Soft() { ... }
export function Solid() { ... }
export default Soft;
export default function MyVariants() { ... }
export function Solid() { ... }
