Interface: VariantsProps
Props for Variants.
Properties
Section titled “Properties”accent?
Section titled “accent?”
optionalaccent?:string
Any CSS color for the switcher chrome (dot, ring, control cluster, count pill, confirm tick). Every accent element derives from this one value. Defaults to DEFAULT_ACCENT. The error state stays red regardless.
Examples
Section titled “Examples”accent="var(--primary)" // match the app themeaccent="#f43f5e" // roseblockId
Section titled “blockId”blockId:
string
Stable, unique identifier for this block. The variant-picking agent matches
on it to finalize the chosen variant into source, so it must be unique per
file. (Named blockId, not id, because it is a semantic key — not a DOM
element id.)
children
Section titled “children”children:
ReactNode
<Variant> children — one candidate UI each.
className?
Section titled “className?”
optionalclassName?:string
Class name applied to the block wrapper (merged after layout).
layout?
Section titled “layout?”
optionallayout?:"inline"|"block"
How the wrapper flows in the layout. Defaults to "block" (full width,
variants stack vertically) — the right choice for page sections, heroes,
and other block-level regions, which is the common case. Use "inline"
when wrapping a small inline element such as a single button, so the
wrapper hugs its content instead of spanning the row.