Function: Variants()

Variants(__namedParameters): Element | null

Dev-time UI picker: renders several <Variant> candidates one at a time.

At rest the block shows a small, slowly-pulsing corner dot so it’s clear it’s “in variant state” without hovering — the dot pulses while a choice is still pending and goes calm once recorded. On hover (or focus) an accent ring outlines the block and the dot gives way to a compact control cluster (‹ index/total › ✓) that scales out of the corner. Confirming POSTs the choice to the uiVariants() recorder plugin; a coding agent then finalizes the chosen variant into source, removing this wrapper.

All switcher chrome uses the accent color (default DEFAULT_ACCENT, a violet distinct from most apps’ primary) so it doesn’t blend into the content it wraps.

Degrades gracefully. In a production build the picker chrome is dropped entirely and only the first variant renders as plain content — a safety net for a block that shipped without being finalized. In dev, if the recorder endpoint is absent (feature off) the switcher still works as a viewer and Confirm reports that recording is unavailable.

Parameters

__namedParameters

VariantsProps

Returns

Element | null

Examples

Page section (default layout — full-width, stacks vertically)

<Variants blockId="hero">
  <Variant label="Split"><section>…</section></Variant>
  <Variant label="Centered"><section>…</section></Variant>
</Variants>

Small inline element (hug the content)

<Variants blockId="hero-cta" layout="inline">
  <Variant label="Ghost"><Button variant="ghost">Get started</Button></Variant>
  <Variant label="Solid"><Button>Get started</Button></Variant>
</Variants>

Custom accent

<Variants blockId="hero" accent="#f43f5e">…</Variants>