Getting started / Theming

Theming

Four variants, three sizes, and not one hardcoded colour. Everything resolves from the shadcn variables your app already owns.

Tokens read by the stylesheet

TOKENUSED FORNOTE

--backgroundField fillOutline and elevated variants

--inputField hairlineThe resting border colour

--ringFocus ringDrawn on the group, not the inner input

--primarySelected statesDay toggles, active presets, swatch rings

--destructiveInvalid stateBorder and ring when a rule fails

--muted / --accentAffixes, hoverSecondary surfaces inside a field

--radiusCorner radiusEvery field, popover and chip

Variants and sizes

<PhoneInput label="Phone" variant="outline" />   {/* default */}
<PhoneInput label="Phone" variant="filled" />
<PhoneInput label="Phone" variant="underline" />
<PhoneInput label="Phone" variant="elevated" />

<PhoneInput label="Phone" size="sm" />       {/* 28px */}
<PhoneInput label="Phone" size="default" />  {/* 32px */}
<PhoneInput label="Phone" size="lg" />       {/* 38px */}

Dark mode is not a prop

There is no dark prop and no theme context. If your app flips the shadcn variables for dark mode — whether by a .dark class, a data attribute, or a media query — the components follow, because they never read anything else. This site is proof: the toggle in its header changes nothing but those variables.