Skip to content
Get Started

Component demo // Wizard

Metadata and variants keep generated UI consistent.

The component wizard pattern documents name, tier, dependencies and theme requirements so every generated snippet matches the Library examples exactly.

Wizard Metadata Component Lab
Metadata Name, tier, deps & theme
Variants Size, emphasis & layout switches
Output HTML matching Library examples
Declarative Consistent Auditable

Act I // Metadata

Name, tier, dependencies and theme requirements in a structured record.

Each component record declares its slot in the framework hierarchy so build tools and documentation generators stay in sync.

Field name Human-readable component name
Field tier atom / molecule / organism
Field dependencies Token layers and sibling components
Field theme Required editorial theme (noir / earth / any) 
{
  "name": "KineticCard",
  "tier": "molecule",
  "dependencies": ["vl-surface", "vl-elevation", "vl-motion"],
  "theme": "any"
}

Component metadata is consumed by the doc generator and Figma sync pipeline — keep it accurate so specs never drift from production code.

Act II // Variant switches

Size, emphasis and layout switches generate all permutations.

Variants are declared as enum arrays. The wizard generates every valid combination so the lab can render and snapshot each one automatically.

variant declaration "size": ["sm", "md", "lg"] "emphasis": ["primary", "secondary", "ghost"] "layout": ["inline", "block", "full-width"]
Rule

Enumerate, don’t infer.

Every valid combination must be declared so edge cases are tested explicitly.

Act III // HTML output

Generated snippets that match Library examples exactly.

The wizard outputs HTML fragments with the correct class names, attributes and ARIA roles. Paste directly into pages or use as test fixtures.

Wizard Metadata Lab
generated snippet <button class="vl-btn vl-btn--primary vl-btn--lg" vl-effect="hover-depth-press"> Get started </button>

Act IV // Applied wizard

Metadata, variants and output: one pipeline from spec to snippet.

Declare the record, enumerate variants, then generate HTML that matches the Library on the first pass.

Metadata Structured records keep every component catalogued.
Variants Size, emphasis and layout switches in enum arrays.
Output HTML snippets ready for production pages.
Consistency Generated code matches Library examples exactly.
Wizard Metadata Component Lab Gallery