Library

Tokens

The complete Clay token registry. Every CSS variable that themes can override, grouped by layer and category.

01Layers3 layers

A three-layer cascade

Clay’s tokens cascade from foundational scalars through semantic roles down to component-scoped overrides.

  • Layer 0, Scalars. Eleven knobs that set the system’s voice: --radius, --spacing, --font-sans, --motion-duration, --ring-width, and friends. Themes touch these to retune the whole library at once.
  • Layer 1, Roles. Semantic colors (--primary, --background, --border), semantic radii (--radius-control, --radius-surface), semantic shadows (--shadow-overlay, --shadow-modal), motion channels, state-layer opacities. These are what most components consume.
  • Layer 2, Per-component. Each component reads its own variables (--button-padding-x, --card-shadow, --switch-thumb-size) that fall back to a Layer 1 role. Themes override one component without affecting the rest by writing to these.
02ScalarsLayer 0

Scalars

The eleven knobs. Set one of these in a theme’s geometry, borders, motion, or focus section and every downstream radius, shadow, motion channel, and component-scoped derivative scales accordingly.

Scalar tokens

12 tokens
ColorFill, border, and text colors.1
  • --glass-tintcolortransparent
    glass.tint

    Tint colour layered above blurred surfaces. Use rgba/oklch with alpha.

GeometrySizes, lengths, and corner radii.2
  • --radiusradius0.75rem
    geometry.radius

    Base corner radius. Drives the entire semantic radius scale.

  • --spacingsize0.25rem
    geometry.spacing

    Base spacing step. Drives Tailwind p-/m-/gap-/size-* utilities.

BorderBorder width and style.1
  • --border-widthborder-width1px
    borders.width

    Default border width. Honored by the bare `border` utility.

TypographyTypeface, size, weight, spacing.3
  • --text-basefont-size1rem
    geometry.textBase

    Reference font size. Rescales the entire typography scale.

  • --font-sansfont-family"Inter", ui-sans-serif, system-ui, sans-serif
    geometry.fontSans

    Default UI typeface for body and controls.

  • --font-monofont-family"JetBrains Mono", ui-monospace, SFMono-Regular, monospace
    geometry.fontMono

    Monospace typeface for code and tabular content.

ElevationDrop shadow and depth.1
  • --backdrop-blurblur8px
    geometry.backdropBlur

    Default backdrop blur. Honored by `backdrop-blur-theme`.

FocusFocus-ring appearance.2
  • --ring-widthcolor2px
    focus.width

    Default focus ring width. Used by the `ring-themed` utility.

  • --ring-offsetcolor2px
    focus.offset

    Default focus ring offset. Used by `ring-themed`.

MotionAnimation duration and easing.2
  • --motion-durationduration220ms
    motion.duration

    Base transition duration. Derived motion channels scale from this.

  • --motion-easingeasingcubic-bezier(0.16, 1, 0.3, 1)
    motion.easing

    Base transition easing. Used by the `ease-standard` utility.

03RolesLayer 1

Roles

Semantic colors and semantic geometry. These are what components reach for by default: bg-primary, rounded-control, shadow-overlay. Theme JSON sets light + dark color values under colors.light and colors.dark, mapped one-to-one to the variable names.

Role tokens

116 tokens
ColorFill, border, and text colors.68
  • --backgroundcoloroklch(0.99 0 0)
    colors.backgrounddark · oklch(0.14 0.02 260)

    Page background. The base canvas every surface sits on.

  • --foregroundcoloroklch(0.15 0.01 260)
    colors.foregrounddark · oklch(0.96 0.01 260)

    Default text color, paired with `background`.

  • --cardcoloroklch(1 0 0)
    colors.carddark · oklch(0.17 0.02 260)

    Background for resting cards and panels.

  • --card-foregroundcoloroklch(0.15 0.01 260)
    colors.cardForegrounddark · oklch(0.96 0.01 260)

    Text color for content inside cards.

  • --popovercoloroklch(1 0 0)
    colors.popoverdark · oklch(0.17 0.02 260)

    Background for floating surfaces (popovers, dropdowns, tooltips).

  • --popover-foregroundcoloroklch(0.15 0.01 260)
    colors.popoverForegrounddark · oklch(0.96 0.01 260)

    Text color for content inside popovers.

  • --primarycoloroklch(0.55 0.18 265)
    colors.primarydark · oklch(0.7 0.16 265)

    Brand primary. Used for filled buttons, focus ring, links.

  • --primary-foregroundcoloroklch(0.99 0 0)
    colors.primaryForegrounddark · oklch(0.14 0.02 260)

    Text color that reads on `primary` backgrounds.

  • --secondarycoloroklch(0.94 0.005 260)
    colors.secondarydark · oklch(0.22 0.02 260)

    Secondary surfaces and quiet button fills.

  • --secondary-foregroundcoloroklch(0.15 0.01 260)
    colors.secondaryForegrounddark · oklch(0.96 0.01 260)

    Text color paired with `secondary`.

  • --mutedcoloroklch(0.95 0.005 260)
    colors.muteddark · oklch(0.2 0.02 260)

    Subdued surface for placeholder content and inactive rails.

  • --muted-foregroundcoloroklch(0.5 0.01 260)
    colors.mutedForegrounddark · oklch(0.65 0.02 260)

    De-emphasized text (helper copy, captions, placeholders).

  • --accentcoloroklch(0.92 0.01 260)
    colors.accentdark · oklch(0.25 0.02 260)

    Hover/highlight surface for interactive items in menus and lists.

  • --accent-foregroundcoloroklch(0.15 0.01 260)
    colors.accentForegrounddark · oklch(0.96 0.01 260)

    Text color paired with `accent`.

  • --bordercoloroklch(0.9 0.01 260)
    colors.borderdark · oklch(0.25 0.02 260)

    Default border color across the system.

  • --inputcoloroklch(0.9 0.01 260)
    colors.inputdark · oklch(0.25 0.02 260)

    Border color for input controls (input, select, textarea).

  • --ringcoloroklch(0.55 0.18 265)
    colors.ringdark · oklch(0.7 0.16 265)

    Focus ring color. Defaults to `primary`.

  • --successcoloroklch(0.55 0.16 145)
    colors.successdark · oklch(0.72 0.15 145)

    Positive feedback (success toasts, confirmation states).

  • --success-foregroundcoloroklch(0.99 0 0)
    colors.successForegrounddark · oklch(0.14 0.02 260)

    Text color paired with `success`.

  • --warningcoloroklch(0.65 0.14 85)
    colors.warningdark · oklch(0.8 0.15 85)

    Cautionary feedback (warning banners, caution states).

  • --warning-foregroundcoloroklch(0.15 0.01 260)
    colors.warningForegrounddark · oklch(0.14 0.02 260)

    Text color paired with `warning`.

  • --infocoloroklch(0.5 0.18 230)
    colors.infodark · oklch(0.72 0.12 230)

    Informational feedback (tips, notes, neutral accents).

  • --info-foregroundcoloroklch(0.99 0 0)
    colors.infoForegrounddark · oklch(0.14 0.02 260)

    Text color paired with `info`.

  • --destructivecoloroklch(0.55 0.22 25)
    colors.destructivedark · oklch(0.65 0.2 25)

    Destructive actions (delete buttons, error states).

  • --destructive-foregroundcoloroklch(0.99 0 0)
    colors.destructiveForegrounddark · oklch(0.96 0.01 260)

    Text color paired with `destructive`.

  • --status-idlecoloroklch(0.7 0.02 260)
    colors.statusIdledark · oklch(0.5 0.02 260)

    Workflow status, idle / pending nodes.

  • --status-runningcoloroklch(0.55 0.18 265)
    colors.statusRunningdark · oklch(0.7 0.16 265)

    Workflow status, currently executing.

  • --status-completedcoloroklch(0.55 0.16 145)
    colors.statusCompleteddark · oklch(0.72 0.15 145)

    Workflow status, finished successfully.

  • --status-errorcoloroklch(0.55 0.22 25)
    colors.statusErrordark · oklch(0.65 0.2 25)

    Workflow status, failed / errored.

  • --data-1coloroklch(0.55 0.18 265)
    colors.data1dark · oklch(0.7 0.16 265)

    Data-viz sequential color 1.

  • --data-2coloroklch(0.6 0.18 45)
    colors.data2dark · oklch(0.72 0.18 45)

    Data-viz sequential color 2.

  • --data-3coloroklch(0.55 0.16 145)
    colors.data3dark · oklch(0.72 0.15 145)

    Data-viz sequential color 3.

  • --data-4coloroklch(0.55 0.22 25)
    colors.data4dark · oklch(0.65 0.2 25)

    Data-viz sequential color 4.

  • --data-5coloroklch(0.55 0.18 300)
    colors.data5dark · oklch(0.7 0.16 300)

    Data-viz sequential color 5.

  • --data-6coloroklch(0.65 0.14 85)
    colors.data6dark · oklch(0.8 0.15 85)

    Data-viz sequential color 6.

  • --data-7coloroklch(0.55 0.15 200)
    colors.data7dark · oklch(0.72 0.14 200)

    Data-viz sequential color 7.

  • --data-8coloroklch(0.6 0.18 340)
    colors.data8dark · oklch(0.72 0.16 340)

    Data-viz sequential color 8.

  • --sidebarcolorvar(--card)
    colors.sidebardark · var(--card)

    Sidebar surface, defaults to the card role.

  • --sidebar-foregroundcolorvar(--card-foreground)
    colors.sidebarForegrounddark · var(--card-foreground)

    Text color inside the sidebar.

  • --sidebar-primarycolorvar(--primary)
    colors.sidebarPrimarydark · var(--primary)

    Primary accent for sidebar selection / focus.

  • --sidebar-primary-foregroundcolorvar(--primary-foreground)
    colors.sidebarPrimaryForegrounddark · var(--primary-foreground)

    Text on `sidebar-primary` surfaces.

  • --sidebar-accentcolorvar(--secondary)
    colors.sidebarAccentdark · var(--secondary)

    Secondary accent surface inside the sidebar.

  • --sidebar-accent-foregroundcolorvar(--secondary-foreground)
    colors.sidebarAccentForegrounddark · var(--secondary-foreground)

    Text on `sidebar-accent` surfaces.

  • --sidebar-bordercolorvar(--border)
    colors.sidebarBorderdark · var(--border)

    Border color used inside the sidebar.

  • --sidebar-ringcolorvar(--ring)
    colors.sidebarRingdark · var(--ring)

    Focus ring color used inside the sidebar.

  • --outlinecolorvar(--border)
    colors.outlinedark · var(--border)

    Default border alias. Themes can override to decouple from `border`.

  • --outline-variantcolorcolor-mix(in oklch, var(--border) 60%, transparent)
    colors.outlineVariantdark · color-mix(in oklch, var(--border) 60%, transparent)

    Softer outline for dividers and inactive rails.

  • --primary-containercolorcolor-mix(in oklch, var(--primary) 18%, var(--background))
    colors.primaryContainerdark · color-mix(in oklch, var(--primary) 18%, var(--background))

    Tonal container in the primary family (Material-inspired).

  • --on-primary-containercolorcolor-mix(in oklch, var(--primary) 85%, var(--foreground))
    colors.onPrimaryContainerdark · color-mix(in oklch, var(--primary) 85%, var(--foreground))

    Text color paired with `primary-container`.

  • --secondary-containercolorcolor-mix(in oklch, var(--secondary) 70%, var(--background))
    colors.secondaryContainerdark · color-mix(in oklch, var(--secondary) 70%, var(--background))

    Tonal container in the secondary family.

  • --on-secondary-containercolorcolor-mix(in oklch, var(--secondary-foreground) 90%, var(--foreground))
    colors.onSecondaryContainerdark · color-mix(in oklch, var(--secondary-foreground) 90%, var(--foreground))

    Text color paired with `secondary-container`.

  • --accent-containercolorcolor-mix(in oklch, var(--accent) 70%, var(--background))
    colors.accentContainerdark · color-mix(in oklch, var(--accent) 70%, var(--background))

    Tonal container in the accent family.

  • --on-accent-containercolorcolor-mix(in oklch, var(--accent-foreground) 90%, var(--foreground))
    colors.onAccentContainerdark · color-mix(in oklch, var(--accent-foreground) 90%, var(--foreground))

    Text color paired with `accent-container`.

  • --success-containercolorcolor-mix(in oklch, var(--success) 18%, var(--background))
    colors.successContainerdark · color-mix(in oklch, var(--success) 18%, var(--background))

    Tonal container for success surfaces.

  • --on-success-containercolorcolor-mix(in oklch, var(--success) 85%, var(--foreground))
    colors.onSuccessContainerdark · color-mix(in oklch, var(--success) 85%, var(--foreground))

    Text color paired with `success-container`.

  • --warning-containercolorcolor-mix(in oklch, var(--warning) 18%, var(--background))
    colors.warningContainerdark · color-mix(in oklch, var(--warning) 18%, var(--background))

    Tonal container for warning surfaces.

  • --on-warning-containercolorcolor-mix(in oklch, var(--warning) 85%, var(--foreground))
    colors.onWarningContainerdark · color-mix(in oklch, var(--warning) 85%, var(--foreground))

    Text color paired with `warning-container`.

  • --info-containercolorcolor-mix(in oklch, var(--info) 18%, var(--background))
    colors.infoContainerdark · color-mix(in oklch, var(--info) 18%, var(--background))

    Tonal container for informational surfaces.

  • --on-info-containercolorcolor-mix(in oklch, var(--info) 85%, var(--foreground))
    colors.onInfoContainerdark · color-mix(in oklch, var(--info) 85%, var(--foreground))

    Text color paired with `info-container`.

  • --destructive-containercolorcolor-mix(in oklch, var(--destructive) 18%, var(--background))
    colors.destructiveContainerdark · color-mix(in oklch, var(--destructive) 18%, var(--background))

    Tonal container for destructive surfaces.

  • --on-destructive-containercolorcolor-mix(in oklch, var(--destructive) 85%, var(--foreground))
    colors.onDestructiveContainerdark · color-mix(in oklch, var(--destructive) 85%, var(--foreground))

    Text color paired with `destructive-container`.

  • --surface-dimcolorcolor-mix(in oklch, var(--background) 88%, var(--surface-tint, var(--primary)))
    colors.surfaceDimdark · color-mix(in oklch, var(--background) 88%, var(--surface-tint, var(--primary)))

    Lowest tonal surface in the Material-inspired surface scale.

  • --surface-brightcolorcolor-mix(in oklch, var(--background) 96%, white)
    colors.surfaceBrightdark · color-mix(in oklch, var(--background) 96%, white)

    Highest tonal surface, lifted toward white.

  • --surface-container-lowestcolorcolor-mix(in oklch, var(--background) 96%, var(--surface-tint, var(--primary)))
    colors.surfaceContainerLowestdark · color-mix(in oklch, var(--background) 96%, var(--surface-tint, var(--primary)))

    Surface container, lowest elevation.

  • --surface-container-lowcolorcolor-mix(in oklch, var(--background) 93%, var(--surface-tint, var(--primary)))
    colors.surfaceContainerLowdark · color-mix(in oklch, var(--background) 93%, var(--surface-tint, var(--primary)))

    Surface container, low elevation.

  • --surface-containercolorcolor-mix(in oklch, var(--background) 90%, var(--surface-tint, var(--primary)))
    colors.surfaceContainerdark · color-mix(in oklch, var(--background) 90%, var(--surface-tint, var(--primary)))

    Surface container, default elevation.

  • --surface-container-highcolorcolor-mix(in oklch, var(--background) 86%, var(--surface-tint, var(--primary)))
    colors.surfaceContainerHighdark · color-mix(in oklch, var(--background) 86%, var(--surface-tint, var(--primary)))

    Surface container, high elevation.

  • --surface-container-highestcolorcolor-mix(in oklch, var(--background) 82%, var(--surface-tint, var(--primary)))
    colors.surfaceContainerHighestdark · color-mix(in oklch, var(--background) 82%, var(--surface-tint, var(--primary)))

    Surface container, highest elevation.

GeometrySizes, lengths, and corner radii.11
  • --radius-tightradiusmax(0rem, calc(var(--radius) - 0.625rem))

    Tight radius for tag dots and micro shapes.

  • --radius-pillradiusmax(0rem, calc(var(--radius) - 0.375rem))

    Pill radius for chips, tags, and badges.

  • --radius-controlradiusmax(0rem, calc(var(--radius) - 0.25rem))

    Radius for buttons, inputs, switches and other controls.

  • --radius-containerradiusvar(--radius)

    Radius for cards, panels, sidebars.

  • --radius-surfaceradiuscalc(var(--radius) + 0.25rem)

    Radius for dialogs, sheets, popovers, surfaces that float.

  • --radius-smradiusmax(0rem, calc(var(--radius) - 0.375rem))

    Theme-aware `rounded-sm`.

  • --radius-mdradiusmax(0rem, calc(var(--radius) - 0.25rem))

    Theme-aware `rounded-md`.

  • --radius-lgradiusvar(--radius)

    Theme-aware `rounded-lg`.

  • --radius-xlradiuscalc(var(--radius) + 0.25rem)

    Theme-aware `rounded-xl`.

  • --radius-2xlradiuscalc(var(--radius) + 0.5rem)

    Theme-aware `rounded-2xl`.

  • --radius-3xlradiuscalc(var(--radius) + 1rem)

    Theme-aware `rounded-3xl`.

TypographyTypeface, size, weight, spacing.15
  • --text-display-lgfont-sizecalc(var(--text-base, 1rem) * 3.5625)

    `text-display-lg` typography tier (size + line-height pair).

  • --text-display-mdfont-sizecalc(var(--text-base, 1rem) * 2.8125)

    `text-display-md` typography tier (size + line-height pair).

  • --text-display-smfont-sizecalc(var(--text-base, 1rem) * 2.25)

    `text-display-sm` typography tier (size + line-height pair).

  • --text-headline-lgfont-sizecalc(var(--text-base, 1rem) * 2)

    `text-headline-lg` typography tier (size + line-height pair).

  • --text-headline-mdfont-sizecalc(var(--text-base, 1rem) * 1.75)

    `text-headline-md` typography tier (size + line-height pair).

  • --text-headline-smfont-sizecalc(var(--text-base, 1rem) * 1.5)

    `text-headline-sm` typography tier (size + line-height pair).

  • --text-title-lgfont-sizecalc(var(--text-base, 1rem) * 1.375)

    `text-title-lg` typography tier (size + line-height pair).

  • --text-title-mdfont-sizecalc(var(--text-base, 1rem) * 1)

    `text-title-md` typography tier (size + line-height pair).

  • --text-title-smfont-sizecalc(var(--text-base, 1rem) * 0.875)

    `text-title-sm` typography tier (size + line-height pair).

  • --text-body-lgfont-sizecalc(var(--text-base, 1rem) * 1)

    `text-body-lg` typography tier (size + line-height pair).

  • --text-body-mdfont-sizecalc(var(--text-base, 1rem) * 0.875)

    `text-body-md` typography tier (size + line-height pair).

  • --text-body-smfont-sizecalc(var(--text-base, 1rem) * 0.75)

    `text-body-sm` typography tier (size + line-height pair).

  • --text-label-lgfont-sizecalc(var(--text-base, 1rem) * 0.875)

    `text-label-lg` typography tier (size + line-height pair).

  • --text-label-mdfont-sizecalc(var(--text-base, 1rem) * 0.75)

    `text-label-md` typography tier (size + line-height pair).

  • --text-label-smfont-sizecalc(var(--text-base, 1rem) * 0.6875)

    `text-label-sm` typography tier (size + line-height pair).

ElevationDrop shadow and depth.11
  • --shadow-xsshadow0 1px rgb(0 0 0 / 0.05)

    Smallest numeric shadow. Underpins `shadow-surface`.

  • --shadow-smshadow0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)

    Small numeric shadow. Underpins `shadow-raised`.

  • --shadow-mdshadow0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)

    Medium numeric shadow. Underpins `shadow-overlay`.

  • --shadow-lgshadow0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)

    Large numeric shadow. Underpins `shadow-modal`.

  • --shadow-xlshadow0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)

    Extra-large numeric shadow. Underpins `shadow-spotlight`.

  • --shadow-2xlshadow0 25px 50px -12px rgb(0 0 0 / 0.25)

    Heaviest numeric shadow. Skeuomorph-style elevation.

  • --shadow-surfaceshadowvar(--shadow-xs)

    Subtle resting elevation (inline cards, quiet chrome).

  • --shadow-raisedshadowvar(--shadow-sm)

    Cards and buttons at rest or hover.

  • --shadow-overlayshadowvar(--shadow-md)

    Popovers, dropdowns, tooltips, anything floating.

  • --shadow-modalshadowvar(--shadow-lg)

    Dialogs and sheets that command focus.

  • --shadow-spotlightshadowvar(--shadow-xl)

    Toasts and command palettes, most-elevated transient surfaces.

MotionAnimation duration and easing.6
  • --motion-instant-durationdurationmax(80ms, calc(var(--motion-duration, 220ms) * 0.45))

    Fastest channel, hover, focus, instant feedback.

  • --motion-standard-durationdurationvar(--motion-duration, 220ms)

    Default transition channel for most state changes.

  • --motion-considered-durationdurationcalc(var(--motion-duration, 220ms) * 1.8)

    Emphasized reveals, sheets, accordions, accordions.

  • --motion-instant-easingeasingvar(--motion-easing, cubic-bezier(0.16, 1, 0.3, 1))

    Easing for the instant motion channel.

  • --motion-standard-easingeasingvar(--motion-easing, cubic-bezier(0.16, 1, 0.3, 1))

    Easing for the standard motion channel.

  • --motion-considered-easingeasingvar(--motion-easing, cubic-bezier(0.16, 1, 0.3, 1))

    Easing for the considered motion channel.

StateHover / pressed / disabled overlays.5
  • --state-hover-opacityopacity0.08
    state.hoverOpacity

    Overlay opacity for hover state layers.

  • --state-focus-opacityopacity0.12
    state.focusOpacity

    Overlay opacity for focus state layers.

  • --state-pressed-opacityopacity0.16
    state.pressedOpacity

    Overlay opacity for pressed state layers.

  • --state-selected-opacityopacity0.12
    state.selectedOpacity

    Overlay opacity for selected state layers.

  • --state-disabled-opacityopacity0.38
    state.disabledOpacity

    Opacity applied to disabled controls.

04Per-componentLayer 2

Per-component overrides

Every component-scoped variable has a fallback chain: when a theme leaves it blank, the component reads its Layer 1 role default. Override a single component’s tokens via components.<name> in a theme JSON without disturbing anything else.

Component tokens

772 tokens
ColorFill, border, and text colors.352
  • --accordion-chevron-colorcolorvar(--muted-foreground)
    components.accordion.chevronColor

    Color of the chevron icon at the right of an accordion trigger. Rotates 180° when the item is open.

  • --alert-accentcolorcurrentColor
    components.alert.accent

    Accent color the variant icon picks up. Each variant overrides this inline (`[--alert-accent:var(--destructive)]` etc.); the default falls back to `currentColor` so a custom variant inherits the alert label color.

  • --alert-backgroundcolorvar(--background)
    components.alert.background

    Background fill of the default (untinted) alert variant. Tinted variants override the bg via inline `color-mix()` and ignore this slot.

  • --alert-foregroundcolorvar(--foreground)
    components.alert.foreground

    Body text color shared by every alert variant; the title and surface inherit this so swapping it retints the whole alert label.

  • --alert-border-colorcolorvar(--border)
    components.alert.borderColor

    Border color of the default (untinted) alert variant. Tinted variants override the border via inline `color-mix()` and ignore this slot.

  • --alert-description-foregroundcolorvar(--muted-foreground)
    components.alert.descriptionForeground

    Text color of the alert description block; muted by default so the title stays the visual anchor.

  • --alert-destructive-titlecolorvar(--destructive)
    components.alert.destructiveTitle

    Title text color when the alert is the `destructive` variant. Lifted into a slot so themes can dial the title saturation independently of the destructive role token.

  • --alert-close-foregroundcolorvar(--muted-foreground)
    components.alert.closeForeground

    Resting text color of the close (X) button.

  • --alert-close-foreground-hovercolorvar(--foreground)
    components.alert.closeForegroundHover

    Hover text color of the close (X) button.

  • --alert-close-bg-hovercolorcolor-mix(in oklch, var(--foreground) 5%, transparent)
    components.alert.closeBgHover

    Hover background fill of the close (X) button.

  • --alert-close-ringcolorvar(--ring)
    components.alert.closeRing

    Focus ring color of the close (X) button.

  • --alert-tint-basecolorvar(--background)
    components.alert.tintBase

    Base color the per-variant accent is mixed into. Defaults to the page surface for opaque tints; set to `transparent` for translucent / glass variants.

  • --alert-dialog-media-containercolorvar(--muted)
    components.alertDialog.mediaContainer

    Background of the `<AlertDialogMedia>` thumbnail / icon tile shown above the title.

  • --alert-dialog-border-colorcolorvar(--border)
    components.alertDialog.borderColor

    Border color drawn around the `<AlertDialogContent>` surface. Defaults to the theme border color.

  • --avatar-fallback-containercolorvar(--muted)
    components.avatar.fallbackContainer

    Background of the avatar fallback (and the `<AvatarGroupCount>` chip).

  • --avatar-fallback-labelcolorvar(--muted-foreground)
    components.avatar.fallbackLabel

    Text color (initials) of the avatar fallback.

  • --avatar-badge-containercolorvar(--primary)
    components.avatar.badgeContainer

    Background of the small `<AvatarBadge>` indicator pinned to the bottom-right corner.

  • --avatar-badge-labelcolorvar(--primary-foreground)
    components.avatar.badgeLabel

    Foreground (icon / count) color of the `<AvatarBadge>` indicator.

  • --avatar-ring-colorcolorvar(--background)
    components.avatar.ringColor

    Color of the 2px ring drawn around the avatar badge and around grouped avatars to separate them from the surrounding surface.

  • --badge-filled-containercolorvar(--primary)
    components.badge.filledContainer

    Background of the default (filled) badge variant.

  • --badge-filled-labelcolorvar(--primary-foreground)
    components.badge.filledLabel

    Label color of the default (filled) badge variant.

  • --badge-secondary-containercolorvar(--secondary)
    components.badge.secondaryContainer

    Background of the secondary badge variant.

  • --badge-secondary-labelcolorvar(--secondary-foreground)
    components.badge.secondaryLabel

    Label color of the secondary badge variant.

  • --badge-destructive-containercolorvar(--destructive)
    components.badge.destructiveContainer

    Background of the destructive badge variant.

  • --badge-destructive-labelcoloroklch(1 0 0)
    components.badge.destructiveLabel

    Label color of the destructive badge variant. Defaults to white so it stays legible regardless of `--destructive` hue.

  • --badge-outline-bordercolorvar(--border)
    components.badge.outlineBorder

    Border color of the outline badge variant.

  • --badge-outline-labelcolorvar(--foreground)
    components.badge.outlineLabel

    Label color of the outline badge variant.

  • --badge-ghost-hover-containercolorvar(--accent)
    components.badge.ghostHoverContainer

    Hover background of the outline / ghost badge variants when wrapped in an `<a>` (`[a&]:hover`).

  • --badge-ghost-hover-labelcolorvar(--accent-foreground)
    components.badge.ghostHoverLabel

    Hover label color of the outline / ghost badge variants when wrapped in an `<a>`.

  • --badge-link-colorcolorvar(--primary)
    components.badge.linkColor

    Foreground color of the link badge variant.

  • --badge-focus-bordercolorvar(--ring)
    components.badge.focusBorder

    Border color of the badge while focus-visible. Defaults to the `--ring` role so focus rings stay consistent with the rest of the system.

  • --badge-focus-ringcolorvar(--ring)
    components.badge.focusRing

    Outer focus halo of the badge, applied via `focus-visible:ring-badge-focus-ring/50`. Defaults to the `--ring` role at 50% so themes can recolor the badge focus halo without affecting other components.

  • --badge-invalid-bordercolorvar(--destructive)
    components.badge.invalidBorder

    Border color when the badge carries `aria-invalid`. Defaults to the destructive role so themes can retune the validation tint independently.

  • --badge-invalid-ringcolorvar(--destructive)
    components.badge.invalidRing

    Outer ring color when the badge carries `aria-invalid`, applied at 20% (40% in dark mode) via `aria-invalid:ring-badge-invalid-ring/20`.

  • --badge-destructive-focuscolorvar(--destructive)
    components.badge.destructiveFocus

    Focus-ring color of the destructive badge variant. Applied via `focus-visible:ring-badge-destructive-focus/20` (and `dark:.../40`) so themes can shift the destructive halo independently of the fill.

  • --breadcrumb-link-foregroundcolorvar(--muted-foreground)
    components.breadcrumb.linkForeground

    Resting text color of breadcrumb links and the surrounding list (inactive crumbs).

  • --breadcrumb-link-hover-foregroundcolorvar(--foreground)
    components.breadcrumb.linkHoverForeground

    Text color of a breadcrumb link on hover.

  • --breadcrumb-page-foregroundcolorvar(--foreground)
    components.breadcrumb.pageForeground

    Text color of the current-page crumb (the last item, marked `aria-current="page"`).

  • --breadcrumb-separator-colorcolorvar(--muted-foreground)
    components.breadcrumb.separatorColor

    Color of the separator glyph between breadcrumb items.

  • --brika-logo-full-bgcolorblack
    components.brikaLogo.fullBg

    Background color of the rounded-rect chip in the `full` lockup. Defaults to literal `black` to preserve the canonical black-on-white brand mark.

  • --brika-logo-full-fgcolorwhite
    components.brikaLogo.fullFg

    Fill color of the brick shapes in the `full` lockup. Defaults to literal `white` to preserve the canonical black-on-white brand mark.

  • --button-filled-containercolorvar(--primary)
    components.button.filledContainer

    Background of the filled button variant.

  • --button-filled-labelcolorvar(--primary-foreground)
    components.button.filledLabel

    Label color of the filled button variant.

  • --button-outline-bordercolorvar(--border)
    components.button.outlineBorder

    Border color of the outline button variant.

  • --button-outline-labelcolorvar(--foreground)
    components.button.outlineLabel

    Label color of the outline button variant.

  • --button-destructive-containercolorvar(--destructive)
    components.button.destructiveContainer

    Background of the destructive button variant.

  • --button-destructive-labelcoloroklch(1 0 0)
    components.button.destructiveLabel

    Label color of the destructive button variant. Defaults to white so it stays legible regardless of `--destructive` hue.

  • --button-secondary-containercolorvar(--secondary)
    components.button.secondaryContainer

    Background of the secondary button variant.

  • --button-secondary-labelcolorvar(--secondary-foreground)
    components.button.secondaryLabel

    Label color of the secondary button variant.

  • --button-ghost-hover-containercolorvar(--accent)
    components.button.ghostHoverContainer

    Hover background of the ghost button variant. Resting state has no fill, the hover affordance is the only paint.

  • --button-ghost-hover-labelcolorvar(--accent-foreground)
    components.button.ghostHoverLabel

    Hover label color of the ghost button variant.

  • --button-link-colorcolorvar(--primary)
    components.button.linkColor

    Foreground color of the link button variant. Underline is rendered in this same color.

  • --button-invalid-bordercolorvar(--destructive)
    components.button.invalidBorder

    Border color applied when the button carries `aria-invalid`. Defaults to the destructive role so themes can retune the validation tint without affecting other destructive surfaces.

  • --button-destructive-focuscolorvar(--destructive)
    components.button.destructiveFocus

    Focus-ring color of the destructive button variant. Applied via the `focus-visible:ring-button-destructive-focus/20` (and `dark:.../40`) opacity-modified utility, so themes can shift the destructive halo independently of the fill.

  • --button-outline-containercolorvar(--background)
    components.button.outlineContainer

    Resting background of the outline button variant in light mode. Defaults to the surface background; dark mode uses `outline-dark-container` instead.

  • --button-outline-dark-containercolorvar(--input)
    components.button.outlineDarkContainer

    Dark-mode resting background of the outline button variant, applied at 30% opacity (50% on hover). Defaults to the `--input` role so the outline button picks up the same tinted dark surface as inputs.

  • --button-group-frame-containercolorvar(--input-container)
    components.buttonGroup.frameContainer

    Background fill of the button-group frame. Defaults to the `--input-container` role so a group reads as a single grouped control matching other inputs.

  • --button-group-frame-bordercolorvar(--input-border)
    components.buttonGroup.frameBorder

    Border color of the button-group outer frame. Defaults to the `--input-border` role so the frame matches other input edges.

  • --button-group-divider-colorcolorvar(--input-border)
    components.buttonGroup.dividerColor

    Color of the 1px separator drawn between adjacent buttons in the group, and of the explicit `ButtonGroupSeparator` bar. Defaults to `--input-border` so dividers blend with the frame.

  • --button-group-text-colorcolorvar(--muted-foreground)
    components.buttonGroup.textColor

    Foreground color of the inline `ButtonGroupText` label slot. Defaults to the muted-foreground role so plain text inside a group reads as supporting content.

  • --calendar-week-separator-colorcolorvar(--border)
    components.calendar.weekSeparatorColor

    Color of the row separator drawn below each week. Inherits the theme border color by default; only visible when `week-separator-width` is non-zero.

  • --calendar-range-barcolorcolor-mix(in oklch, var(--primary) 15%, transparent)
    components.calendar.rangeBar

    Background color of the range highlight bar between the start and end days.

  • --calendar-range-bar-hovercolorcolor-mix(in oklch, var(--primary) 20%, transparent)
    components.calendar.rangeBarHover

    Hover background tint applied over the range bar on range_middle days. Should be slightly more opaque than `range-bar` to read as a hover state.

  • --calendar-pillcolorvar(--primary)
    components.calendar.pill

    Background color of the solid day pill for single-day selections and range endpoints (start/end).

  • --calendar-pill-foregroundcolorvar(--primary-foreground)
    components.calendar.pillForeground

    Text color of the solid day pill.

  • --calendar-todaycolorvar(--accent)
    components.calendar.today

    Background color of the today indicator when the day is not selected.

  • --calendar-today-foregroundcolorvar(--accent-foreground)
    components.calendar.todayForeground

    Text color of the today indicator when the day is not selected.

  • --calendar-day-hovercolorvar(--accent)
    components.calendar.dayHover

    Background color of a day on hover when it is neither today, selected, nor in a range middle.

  • --calendar-day-hover-foregroundcolorvar(--accent-foreground)
    components.calendar.dayHoverForeground

    Text color of a day on hover.

  • --calendar-weekday-foregroundcolorvar(--muted-foreground)
    components.calendar.weekdayForeground

    Text color of the weekday-name header row (Su, Mo, Tu, …).

  • --calendar-outside-foregroundcolorvar(--muted-foreground)
    components.calendar.outsideForeground

    Text color of days that fall outside the visible month (the leading/trailing greyed-out dates).

  • --calendar-surface-containercolorvar(--card)
    components.calendar.surfaceContainer

    Background color of the calendar surface. Defaults to the theme `--card` so the calendar reads as a card-shorthand surface.

  • --calendar-surface-labelcolorvar(--card-foreground)
    components.calendar.surfaceLabel

    Default text color of the calendar surface (caption, day numbers). Defaults to the theme `--card-foreground`.

  • --calendar-surface-bordercolorvar(--border)
    components.calendar.surfaceBorder

    Border color drawn around the calendar surface. Defaults to the theme `--border`.

  • --calendar-range-middle-foregroundcolorvar(--foreground)
    components.calendar.rangeMiddleForeground

    Text color of day numbers inside a selected range (excluding the start/end pills). Defaults to the theme `--foreground`.

  • --card-containercolorvar(--card)
    components.card.container

    Card background.

  • --card-labelcolorvar(--card-foreground)
    components.card.label

    Card text color.

  • --card-border-colorcolorvar(--border)
    components.card.borderColor

    Resting border color of a card without an accent stripe.

  • --card-interactive-border-restcolorcolor-mix(in oklch, var(--foreground) 10%, transparent)
    components.card.interactiveBorderRest

    Border color of an interactive (`interactive`) card in its resting state, no accent. The light foreground tint reads as a quiet hairline against either light or dark surfaces.

  • --card-interactive-border-hovercolorcolor-mix(in oklch, var(--foreground) 20%, transparent)
    components.card.interactiveBorderHover

    Border color of an interactive card on hover, no accent. Doubles the resting tint to telegraph the interactive affordance.

  • --card-description-colorcolorvar(--muted-foreground)
    components.card.descriptionColor

    Foreground color of `<CardDescription>` text.

  • --chart-tooltip-containercolorvar(--popover)
    components.chart.tooltipContainer

    Background color of the chart tooltip surface. Defaults to the theme popover so tooltips read as floating UI.

  • --chart-tooltip-labelcolorvar(--popover-foreground)
    components.chart.tooltipLabel

    Text color of the chart tooltip readout. Defaults to the theme popover foreground.

  • --chart-tooltip-bordercolorvar(--border)
    components.chart.tooltipBorder

    Border color of the chart tooltip surface. Defaults to the theme border.

  • --checkbox-unchecked-containercolorvar(--input-container)
    components.checkbox.uncheckedContainer

    Box background in the resting (unchecked) state.

  • --checkbox-unchecked-bordercolorvar(--input-border)
    components.checkbox.uncheckedBorder

    Box border color in the resting (unchecked) state.

  • --checkbox-checked-containercolorvar(--primary)
    components.checkbox.checkedContainer

    Box background when checked or indeterminate (`data-[state=checked]` / `data-[state=indeterminate]`).

  • --checkbox-checked-bordercolorvar(--primary)
    components.checkbox.checkedBorder

    Box border color when checked or indeterminate.

  • --checkbox-checked-glyphcolorvar(--primary-foreground)
    components.checkbox.checkedGlyph

    Color of the check / dash glyph painted inside a checked box.

  • --checkbox-invalid-bordercolorvar(--destructive)
    components.checkbox.invalidBorder

    Box border color when the checkbox has `aria-invalid="true"`. Defaults to the theme destructive hue.

  • --checkbox-invalid-ringcolorvar(--destructive)
    components.checkbox.invalidRing

    Color of the invalid-state focus halo. Painted at 20% opacity in light mode, 40% in dark mode for parity with other form controls.

  • --clay-logo-bgcolorvar(--secondary)
    components.clayLogo.bg

    Background color of the rounded badge that wraps the tiles in the `badge` variant. Defaults to the theme `--secondary` so the chip reads as distinct from the page surface.

  • --code-block-bgcolorvar(--muted)
    components.codeBlock.bg

    Code block background.

  • --code-block-border-colorcolorvar(--border)
    components.codeBlock.borderColor

    Border color of the code-block surface and the header divider.

  • --code-block-subtle-bgcolorcolor-mix(in oklch, var(--muted) 30%, transparent)
    components.codeBlock.subtleBg

    Background of the `subtle` variant, a faded muted tint that drops the surrounding chrome.

  • --code-block-header-bgcolorcolor-mix(in oklch, var(--muted) 60%, transparent)
    components.codeBlock.headerBg

    Background color of the code-block header strip (filename + actions row).

  • --code-block-gutter-bgcolorcolor-mix(in oklch, var(--muted) 40%, transparent)
    components.codeBlock.gutterBg

    Background color of the line-number gutter on the left edge.

  • --code-block-gutter-bordercolorcolor-mix(in oklch, var(--border) 60%, transparent)
    components.codeBlock.gutterBorder

    Color of the divider between the line-number gutter and the code body.

  • --code-block-gutter-labelcolorvar(--muted-foreground)
    components.codeBlock.gutterLabel

    Text color of the line numbers in the gutter.

  • --code-block-tab-labelcolorvar(--muted-foreground)
    components.codeBlock.tabLabel

    Text color of an inactive file tab in the header (multi-file blocks).

  • --code-block-tab-active-labelcolorvar(--foreground)
    components.codeBlock.tabActiveLabel

    Text color of the active file tab in the header (multi-file blocks).

  • --combobox-trigger-placeholder-colorcolorvar(--muted-foreground)
    components.combobox.triggerPlaceholderColor

    Foreground color of the placeholder rendered inside the trigger button when no value is selected.

  • --combobox-selected-icon-colorcolorvar(--foreground)
    components.combobox.selectedIconColor

    Color of the check icon shown next to the currently selected option inside the listbox.

  • --command-surface-containercolorvar(--popover)
    components.command.surfaceContainer

    Background of the command palette surface.

  • --command-surface-labelcolorvar(--popover-foreground)
    components.command.surfaceLabel

    Default foreground color inside the command palette.

  • --command-separator-colorcolorvar(--border)
    components.command.separatorColor

    Color of the divider rule between command palette groups.

  • --command-input-border-colorcolorvar(--border)
    components.command.inputBorderColor

    Color of the bottom border under the command input row.

  • --command-shortcut-colorcolorvar(--muted-foreground)
    components.command.shortcutColor

    Color of the keyboard-shortcut hint inside command items.

  • --command-icon-colorcolorvar(--muted-foreground)
    components.command.iconColor

    Default color of inline SVG icons inside command items.

  • --command-group-heading-colorcolorvar(--muted-foreground)
    components.command.groupHeadingColor

    Foreground color of the group heading rendered above grouped items.

  • --command-placeholder-colorcolorvar(--muted-foreground)
    components.command.placeholderColor

    Foreground color of the input placeholder in the command search field.

  • --command-empty-colorcolorvar(--muted-foreground)
    components.command.emptyColor

    Foreground color of the empty-results message.

  • --command-item-focus-containercolorvar(--accent)
    components.commandItem.focusContainer

    Background of a command item under selection (`data-[selected=true]`) / hover.

  • --command-item-focus-labelcolorvar(--accent-foreground)
    components.commandItem.focusLabel

    Foreground color of a command item under selection / hover.

  • --data-table-sort-indicator-colorcolorvar(--muted-foreground)
    components.dataTable.sortIndicatorColor

    Color of the chevron rendered next to a sortable column header (asc / desc / unsorted).

  • --data-table-selected-row-bgcolorvar(--accent)
    components.dataTable.selectedRowBg

    Background fill applied to a row when it is selected via the row-selection checkbox.

  • --date-picker-trigger-placeholder-colorcolorvar(--muted-foreground)
    components.datePicker.triggerPlaceholderColor

    Foreground color of the trigger label when no date is selected (the placeholder copy).

  • --date-picker-trigger-icon-colorcolorvar(--muted-foreground)
    components.datePicker.triggerIconColor

    Color of the leading calendar icon rendered inside the trigger button.

  • --dialog-containercolorvar(--popover)
    components.dialog.container

    Dialog background.

  • --dialog-labelcolorvar(--popover-foreground)
    components.dialog.label

    Dialog text color.

  • --dialog-overlay-bgcoloroklch(0 0 0 / 0.5)
    components.dialog.overlayBg

    Modal scrim color behind the dialog. Lower alpha + non-zero `overlay-backdrop-blur` produces an iOS-style glass scrim that frosts the page instead of dimming it.

  • --dialog-description-colorcolorvar(--muted-foreground)
    components.dialog.descriptionColor

    Foreground color of `<DialogDescription>` text rendered beneath the dialog title.

  • --dialog-close-active-containercolorvar(--accent)
    components.dialog.closeActiveContainer

    Background of the built-in close-X button when its data-state is open.

  • --dialog-close-active-labelcolorvar(--muted-foreground)
    components.dialog.closeActiveLabel

    Glyph color of the built-in close-X button when its data-state is open.

  • --dialog-close-focus-ring-colorcolorvar(--ring)
    components.dialog.closeFocusRingColor

    Focus ring color of the built-in close-X button when keyboard-focused. Defaults to the theme ring color.

  • --dialog-close-focus-ring-offset-colorcolorvar(--background)
    components.dialog.closeFocusRingOffsetColor

    Color drawn between the close-X button and its focus ring (the ring offset). Should match the page background so the offset reads as a gap.

  • --drawer-surface-containercolorvar(--popover)
    components.drawer.surfaceContainer

    Background of the drawer panel.

  • --drawer-overlay-colorcoloroklch(0 0 0 / 0.5)
    components.drawer.overlayColor

    Color of the modal scrim shown behind an open drawer. Defaults to black at 50% opacity.

  • --drawer-handle-colorcolorvar(--muted)
    components.drawer.handleColor

    Fill of the small horizontal handle pill drawn at the top of the drawer panel.

  • --drawer-description-colorcolorvar(--muted-foreground)
    components.drawer.descriptionColor

    Foreground color of the drawer description text.

  • --color-picker-surface-containercolorvar(--popover)
    components.colorPicker.surfaceContainer

    Background of the picker panel.

  • --color-picker-surface-labelcolorvar(--popover-foreground)
    components.colorPicker.surfaceLabel

    Default foreground inside the picker panel.

  • --color-picker-bordercolorvar(--border)
    components.colorPicker.border

    Color of the panel and inner control borders.

  • --color-picker-markercolor#ffffff
    components.colorPicker.marker

    Ring color around the sat/val pad cursor and slider thumbs. Defaults to white so the marker is visible over both light and dark colors.

  • --color-picker-checkercolorvar(--muted)
    components.colorPicker.checker

    Color of the dark cells in the alpha-track checkerboard. The light cells are white.

  • --cropper-stage-bgcolorvar(--accent)
    components.cropper.stageBg

    Background fill of the crop canvas stage, visible as letterboxing when the image does not cover the full square.

  • --cropper-overlay-colorcoloroklch(0.08 0.01 60 / 0.42)
    components.cropper.overlayColor

    Dim color applied outside the crop area via a large box-shadow on the crop mask. Defaults to a near-black at ~42% opacity so the outside of the circle is visibly darkened.

  • --cropper-overlay-bordercoloroklch(1 0 0 / 0.45)
    components.cropper.overlayBorder

    Border drawn on the inner edge of the crop mask to delineate the crop area. Defaults to 45% white.

  • --cropper-drop-active-ringcolorvar(--primary)
    components.cropper.dropActiveRing

    Outline ring color applied to CropperViewport while an image file is dragged over it. Uses the brand primary so it matches the theme accent.

  • --cropper-placeholder-colorcolorvar(--muted-foreground)
    components.cropper.placeholderColor

    Icon and text color for the empty-state placeholder shown inside CropperViewport when no image has been loaded yet.

  • --menu-surface-containercolorvar(--popover)
    components.menu.surfaceContainer

    Background of the menu surface (popover, dropdown, sub-menu).

  • --menu-surface-labelcolorvar(--popover-foreground)
    components.menu.surfaceLabel

    Default foreground color inside the menu surface.

  • --menu-separator-colorcolorvar(--border)
    components.menu.separatorColor

    Color of the horizontal divider rule between menu groups.

  • --menu-shortcut-colorcolorvar(--muted-foreground)
    components.menu.shortcutColor

    Color of the keyboard-shortcut hint shown at the right of an item.

  • --menu-icon-colorcolorvar(--muted-foreground)
    components.menu.iconColor

    Default color of inline SVG icons inside menu items. Items can opt out by setting an explicit `text-*` class on the icon.

  • --menu-item-focus-containercolorvar(--accent)
    components.menuItem.focusContainer

    Background of a menu item under focus / hover / open state.

  • --menu-item-focus-labelcolorvar(--accent-foreground)
    components.menuItem.focusLabel

    Foreground color of a menu item under focus / hover / open state.

  • --menu-item-destructive-colorcolorvar(--destructive)
    components.menuItem.destructiveColor

    Single color driving the destructive variant: text uses it directly, focus background uses it at 10% (light) / 20% (dark) opacity. Override to retune the destructive intent across every menu.

  • --dropzone-bordercolorvar(--border)
    components.dropzone.border

    Dashed border color at rest.

  • --dropzone-containercolortransparent
    components.dropzone.container

    Surface background at rest.

  • --dropzone-active-bordercolorvar(--primary)
    components.dropzone.activeBorder

    Dashed border color while a file is dragged over the surface.

  • --dropzone-active-containercolorcolor-mix(in oklch, var(--primary) 8%, transparent)
    components.dropzone.activeContainer

    Surface background while a file is dragged over (and on hover).

  • --dropzone-iconcolorvar(--muted-foreground)
    components.dropzone.icon

    Color of the upload glyph.

  • --dropzone-titlecolorvar(--foreground)
    components.dropzone.title

    Primary instruction text color.

  • --dropzone-descriptioncolorvar(--muted-foreground)
    components.dropzone.description

    Secondary hint text color (accepted types, size limits).

  • --empty-state-icon-bgcolorcolor-mix(in oklch, var(--muted) 50%, transparent)
    components.emptyState.iconBg

    Background fill of the rounded icon pill above the title.

  • --empty-state-icon-foregroundcolorvar(--muted-foreground)
    components.emptyState.iconForeground

    Color of the glyph rendered inside the icon pill.

  • --empty-state-description-foregroundcolorvar(--muted-foreground)
    components.emptyState.descriptionForeground

    Text color of the supporting description copy below the title.

  • --field-description-colorcolorvar(--muted-foreground)
    components.field.descriptionColor

    Text color of the supporting description copy below the control.

  • --field-error-colorcolorvar(--destructive)
    components.field.errorColor

    Text color of the validation error message rendered by `FieldError`.

  • --field-legend-colorcolorvar(--foreground)
    components.field.legendColor

    Text color of the `FieldLegend` heading inside a `FieldSet`.

  • --field-separator-colorcolorvar(--border)
    components.field.separatorColor

    Line color of the optional `FieldSeparator` divider.

  • --file-upload-item-containercolorvar(--card)
    components.fileUpload.itemContainer

    Background of a file-list row.

  • --file-upload-item-bordercolorvar(--border)
    components.fileUpload.itemBorder

    Border color of a file-list row.

  • --file-upload-preview-bgcolorvar(--muted)
    components.fileUpload.previewBg

    Background of the leading preview/icon tile on each row.

  • --file-upload-iconcolorvar(--muted-foreground)
    components.fileUpload.icon

    Color of the file-type glyph inside the preview tile.

  • --file-upload-namecolorvar(--foreground)
    components.fileUpload.name

    File name text color.

  • --file-upload-metacolorvar(--muted-foreground)
    components.fileUpload.meta

    Secondary text color for file size and status.

  • --hover-card-surface-containercolorvar(--popover)
    components.hoverCard.surfaceContainer

    Background of the hover-card surface.

  • --hover-card-surface-labelcolorvar(--popover-foreground)
    components.hoverCard.surfaceLabel

    Default foreground color inside the hover-card.

  • --icon-mutedcolorvar(--muted-foreground)
    components.icon.muted

    Muted icon color.

  • --icon-primarycolorvar(--primary)
    components.icon.primary

    Primary icon color (interactive accents).

  • --iconcolorvar(--foreground)
    components.icon.default

    Default icon color.

  • --image-skeleton-colorcolorvar(--skeleton-pulse-color, var(--accent))
    components.image.skeletonColor

    Color of the animated skeleton pulse shown while the image loads. Falls back to `--skeleton-pulse-color` so the Image skeleton always matches any standalone Skeleton components in the same theme.

  • --image-fallback-bgcolorvar(--muted)
    components.image.fallbackBg

    Background of the container while the image is loading or has errored. Keeps the layout stable and provides a neutral backdrop for the fallback icon.

  • --image-fallback-icon-colorcolorvar(--muted-foreground)
    components.image.fallbackIconColor

    Color of the default `ImageOff` icon shown when the source fails and no custom `fallback` is provided.

  • --input-group-containercolorvar(--input-container)
    components.inputGroup.container

    Background color of the InputGroup wrapper. Inherits the standalone Input container so themes that retune `--input-container` retune the group automatically.

  • --input-group-labelcolorvar(--input-label)
    components.inputGroup.label

    Default foreground color of text rendered inside the InputGroup wrapper. Mirrors `--input-label`.

  • --input-group-bordercolorvar(--input-border)
    components.inputGroup.border

    Resting border color of the InputGroup wrapper. Mirrors `--input-border`.

  • --input-group-focus-bordercolorvar(--ring)
    components.inputGroup.focusBorder

    Border color drawn on the wrapper when the inner control receives keyboard focus (`focus-visible`). Pairs with `focus-ring` to render the focus halo.

  • --input-group-focus-ringcolorvar(--ring)
    components.inputGroup.focusRing

    Color of the 3px focus halo painted around the wrapper when the inner control is focus-visible. Rendered at 50% opacity to soften the outer glow.

  • --input-group-invalid-ringcolorvar(--destructive)
    components.inputGroup.invalidRing

    Single color driving the invalid state: the wrapper border uses it directly while the surrounding ring uses it at 20% (light) / 40% (dark) opacity.

  • --input-group-addon-labelcolorvar(--muted-foreground)
    components.inputGroup.addonLabel

    Foreground color of inline addon content (icons, text, kbd) docked at the start or end of the group.

  • --input-group-text-labelcolorvar(--muted-foreground)
    components.inputGroup.textLabel

    Foreground color of `InputGroupText` spans rendered inside the group (helper labels, separators).

  • --input-otp-containercolorvar(--input-container)
    components.inputOtp.container

    Background color of each OTP slot in its resting state.

  • --input-otp-bordercolorvar(--input-border)
    components.inputOtp.border

    Border color of each OTP slot in its resting state.

  • --input-otp-labelcolorvar(--foreground)
    components.inputOtp.label

    Foreground color of the entered character rendered inside an OTP slot.

  • --input-otp-focus-bordercolorvar(--ring)
    components.inputOtp.focusBorder

    Border color of the active OTP slot (`data-active=true`).

  • --input-otp-focus-ringcolorvar(--ring)
    components.inputOtp.focusRing

    Color of the 3px focus halo painted around the active OTP slot. Rendered at 50% opacity to soften the outer glow.

  • --input-otp-invalid-ringcolorvar(--destructive)
    components.inputOtp.invalidRing

    Single color driving the invalid state on an OTP slot: the border uses it directly while the surrounding ring uses it at 20% opacity.

  • --input-otp-placeholder-colorcolorvar(--muted-foreground)
    components.inputOtp.placeholderColor

    Fill color of the placeholder dot rendered in an empty, non-focused OTP slot. Applied at 40% opacity in the rendered output.

  • --input-otp-caret-colorcolorvar(--foreground)
    components.inputOtp.caretColor

    Color of the blinking fake caret rendered inside the active OTP slot.

  • --input-otp-separator-colorcolorvar(--muted-foreground)
    components.inputOtp.separatorColor

    Color of the minus icon used as a visual separator between OTP groups.

  • --input-containercolorvar(--background)
    components.input.container

    Input background.

  • --input-labelcolorvar(--foreground)
    components.input.label

    Input text color.

  • --input-bordercolorvar(--input)
    components.input.border

    Input border color.

  • --input-placeholdercolorvar(--muted-foreground)
    components.input.placeholder

    Input placeholder text color.

  • --input-invalid-bordercolorvar(--destructive)
    components.input.invalidBorder

    Border color drawn when the input is in an invalid state (`aria-invalid=true`).

  • --input-selection-containercolorvar(--primary)
    components.input.selectionContainer

    Background color of selected text inside the input.

  • --input-selection-labelcolorvar(--primary-foreground)
    components.input.selectionLabel

    Foreground color of selected text inside the input.

  • --input-file-labelcolorvar(--foreground)
    components.input.fileLabel

    Foreground color of the inline file picker button rendered for `type="file"` inputs.

  • --kbd-containercolorvar(--muted)
    components.kbd.container

    Background of the kbd pill.

  • --kbd-labelcolorvar(--muted-foreground)
    components.kbd.label

    Glyph color of the kbd pill.

  • --kbd-border-colorcolorvar(--border)
    components.kbd.borderColor

    Hairline border color of the kbd pill.

  • --menubar-containercolorvar(--background)
    components.menubar.container

    Background of the menubar root rail.

  • --menubar-border-colorcolorvar(--input)
    components.menubar.borderColor

    Border color of the menubar root rail.

  • --menubar-content-surface-containercolorvar(--popover)
    components.menubarContent.surfaceContainer

    Background of the menubar dropdown surface.

  • --menubar-content-surface-labelcolorvar(--popover-foreground)
    components.menubarContent.surfaceLabel

    Default foreground color inside the menubar dropdown surface.

  • --menubar-content-border-colorcolorvar(--input)
    components.menubarContent.borderColor

    Border color of the menubar dropdown surface.

  • --menubar-content-separator-colorcolorvar(--border)
    components.menubarContent.separatorColor

    Color of the divider rule between menubar item groups.

  • --menubar-content-shortcut-colorcolorvar(--muted-foreground)
    components.menubarContent.shortcutColor

    Color of the keyboard-shortcut hint inside menubar items.

  • --menubar-content-icon-colorcolorvar(--muted-foreground)
    components.menubarContent.iconColor

    Default color of inline SVG icons inside menubar items.

  • --menubar-item-focus-containercolorvar(--accent)
    components.menubarItem.focusContainer

    Background of a menubar item under focus / hover / open state.

  • --menubar-item-focus-labelcolorvar(--accent-foreground)
    components.menubarItem.focusLabel

    Foreground color of a menubar item under focus / hover / open state.

  • --menubar-item-destructive-colorcolorvar(--destructive)
    components.menubarItem.destructiveColor

    Single color driving the destructive variant: text uses it directly, focus background uses it at 10% (light) / 20% (dark) opacity.

  • --mini-calendar-day-labelcolorvar(--foreground)
    components.miniCalendar.dayLabel

    Day-number text color at rest.

  • --mini-calendar-weekdaycolorvar(--muted-foreground)
    components.miniCalendar.weekday

    Weekday-abbreviation text color at rest.

  • --mini-calendar-day-hovercolorvar(--accent)
    components.miniCalendar.dayHover

    Day cell background on hover.

  • --mini-calendar-day-selectedcolorvar(--primary)
    components.miniCalendar.daySelected

    Selected day cell background.

  • --mini-calendar-day-selected-labelcolorvar(--primary-foreground)
    components.miniCalendar.daySelectedLabel

    Selected day cell text color.

  • --navigation-menu-containercolorvar(--background)
    components.navigationMenu.container

    Resting background of the navigation-menu trigger.

  • --navigation-menu-focus-containercolorvar(--accent)
    components.navigationMenu.focusContainer

    Background of the navigation-menu trigger under hover / focus. Active and open states use this color at 50% opacity.

  • --navigation-menu-focus-labelcolorvar(--accent-foreground)
    components.navigationMenu.focusLabel

    Foreground color of the navigation-menu trigger under hover / focus.

  • --navigation-menu-indicator-colorcolorvar(--border)
    components.navigationMenu.indicatorColor

    Color of the navigation-menu indicator arrow shown beneath the active trigger.

  • --navigation-menu-viewport-surface-containercolorvar(--popover)
    components.navigationMenuViewport.surfaceContainer

    Background of the navigation-menu flyout viewport.

  • --navigation-menu-viewport-surface-labelcolorvar(--popover-foreground)
    components.navigationMenuViewport.surfaceLabel

    Default foreground color inside the navigation-menu flyout viewport.

  • --page-header-description-colorcolorvar(--muted-foreground)
    components.pageHeader.descriptionColor

    Foreground color of `<PageHeaderDescription>` (and the inline `<PageHeaderCount>` chip). Defaults to the muted role so the description reads as secondary against the title.

  • --pagination-link-containercolorvar(--background)
    components.pagination.linkContainer

    Resting background of a page-link item (transparent-feeling against the page).

  • --pagination-link-labelcolorvar(--foreground)
    components.pagination.linkLabel

    Resting text/icon color of a page-link item, including the prev/next arrows.

  • --pagination-link-hover-containercolorvar(--accent)
    components.pagination.linkHoverContainer

    Background fill of a page-link item on hover or keyboard focus.

  • --pagination-link-hover-labelcolorvar(--accent-foreground)
    components.pagination.linkHoverLabel

    Text/icon color of a page-link item on hover or keyboard focus.

  • --pagination-link-active-containercolorvar(--background)
    components.pagination.linkActiveContainer

    Background fill of the current-page link (kept neutral so the outline reads).

  • --pagination-link-active-labelcolorvar(--foreground)
    components.pagination.linkActiveLabel

    Text color of the current-page link.

  • --pagination-link-active-bordercolorvar(--border)
    components.pagination.linkActiveBorder

    Outline color drawn around the current-page link to mark `aria-current="page"`.

  • --pagination-ellipsis-colorcolorvar(--muted-foreground)
    components.pagination.ellipsisColor

    Color of the `...` truncation glyph between page-link clusters.

  • --popover-surface-containercolorvar(--popover)
    components.popover.surfaceContainer

    Background of the popover surface.

  • --popover-surface-labelcolorvar(--popover-foreground)
    components.popover.surfaceLabel

    Default foreground color inside the popover surface.

  • --popover-description-colorcolorvar(--muted-foreground)
    components.popover.descriptionColor

    Foreground color of `<PopoverDescription>` text shown beneath the popover title.

  • --progress-display-phase-foregroundcolorvar(--muted-foreground)
    components.progressDisplay.phaseForeground

    Text color of the phase label rendered above the bar.

  • --progress-display-log-foregroundcolorvar(--muted-foreground)
    components.progressDisplay.logForeground

    Text color of the log entries (and empty-logs message) inside the scroll area.

  • --progress-display-log-bgcolorcolor-mix(in oklch, var(--muted) 30%, transparent)
    components.progressDisplay.logBg

    Background fill of the log scroll area surface.

  • --progress-display-spinner-colorcolorvar(--primary)
    components.progressDisplay.spinnerColor

    Color of the in-flight spinner glyph shown while processing.

  • --progress-display-success-colorcolorvar(--success)
    components.progressDisplay.successColor

    Color of the success indicator (check icon and progress fill) and the success block accents.

  • --progress-display-success-bgcolorcolor-mix(in oklch, var(--success) 10%, transparent)
    components.progressDisplay.successBg

    Background fill of the success message block.

  • --progress-display-success-bordercolorcolor-mix(in oklch, var(--success) 50%, transparent)
    components.progressDisplay.successBorder

    Border color of the success message block.

  • --progress-display-error-colorcolorvar(--destructive)
    components.progressDisplay.errorColor

    Color of the error indicator (X icon and progress fill) and the error block text.

  • --progress-display-error-bgcolorcolor-mix(in oklch, var(--destructive) 10%, transparent)
    components.progressDisplay.errorBg

    Background fill of the error message block.

  • --progress-display-error-bordercolorcolor-mix(in oklch, var(--destructive) 50%, transparent)
    components.progressDisplay.errorBorder

    Border color of the error message block.

  • --progress-track-colorcolorvar(--secondary)
    components.progress.trackColor

    Background of the progress track.

  • --progress-indicator-colorcolorvar(--primary)
    components.progress.indicatorColor

    Foreground of the progress indicator.

  • --radio-group-unchecked-containercolorvar(--input-container)
    components.radioGroup.uncheckedContainer

    Disc background in the resting (unchecked) state.

  • --radio-group-unchecked-bordercolorvar(--input-border)
    components.radioGroup.uncheckedBorder

    Disc border color in the resting (unchecked) state.

  • --radio-group-checked-containercolorvar(--primary)
    components.radioGroup.checkedContainer

    Disc background when selected (`data-[state=checked]`).

  • --radio-group-checked-bordercolorvar(--primary)
    components.radioGroup.checkedBorder

    Disc border color when selected.

  • --radio-group-indicator-colorcolorvar(--primary-foreground)
    components.radioGroup.indicatorColor

    Color of the inner dot painted on the selected disc.

  • --radio-group-invalid-bordercolorvar(--destructive)
    components.radioGroup.invalidBorder

    Disc border color when the radio has `aria-invalid="true"`. Defaults to the theme destructive hue.

  • --radio-group-invalid-ringcolorvar(--destructive)
    components.radioGroup.invalidRing

    Color of the invalid-state focus halo. Painted at 20% opacity in light mode, 40% in dark mode for parity with other form controls.

  • --rating-filled-colorcolorvar(--warning)
    components.rating.filledColor

    Fill and stroke color for stars at or below the rounded value. Defaults to `--warning` (amber) so the hue follows the theme without a hard-coded color.

  • --rating-empty-colorcolorcolor-mix(in oklch, var(--muted-foreground) 30%, transparent)
    components.rating.emptyColor

    Stroke color for stars above the rounded value. A 30% mix of `--muted-foreground` against transparent gives a faint ghost that reads on both light and dark surfaces.

  • --resizable-handle-colorcolorvar(--border)
    components.resizable.handleColor

    Resting handle color.

  • --resizable-handle-hovercolorvar(--primary)
    components.resizable.handleHover

    Hover-state handle color; applied at 40% opacity.

  • --resizable-handle-ringcolorvar(--ring)
    components.resizable.handleRing

    Focus ring color drawn around the handle when keyboard-focused.

  • --resizable-grip-bordercolorvar(--border)
    components.resizable.gripBorder

    Border color of the optional grip pill rendered when `withHandle` is set.

  • --resizable-grip-containercolorvar(--background)
    components.resizable.gripContainer

    Background fill of the optional grip pill rendered when `withHandle` is set.

  • --resizable-grip-iconcolorvar(--muted-foreground)
    components.resizable.gripIcon

    Icon color of the grip glyph drawn inside the optional grip pill.

  • --scroll-area-thumb-colorcolorvar(--border)
    components.scrollArea.thumbColor

    Background color of the draggable scrollbar thumb.

  • --scroll-area-track-colorcolortransparent
    components.scrollArea.trackColor

    Border color drawn along the scrollbar track edge that meets the viewport (left edge for vertical, top edge for horizontal). Defaults to transparent so the track blends into the surface behind it.

  • --scroll-area-viewport-ringcolorvar(--ring)
    components.scrollArea.viewportRing

    Focus ring color drawn around the scroll viewport when keyboard-focused; rendered at 50% opacity.

  • --section-description-colorcolorvar(--muted-foreground)
    components.section.descriptionColor

    Foreground color of `<SectionDescription>`, the muted line under the section title.

  • --section-label-colorcolorvar(--muted-foreground)
    components.sectionLabel.color

    Foreground color of the section label text and the default-tone icon. Defaults to the muted role so the label reads as quiet metadata above a content group.

  • --section-label-icon-destructive-colorcolorvar(--destructive)
    components.sectionLabel.iconDestructiveColor

    Icon color used when `tone="destructive"` flags an error or dangerous-action label.

  • --select-trigger-containercolorvar(--input-container)
    components.select.triggerContainer

    Background of the select trigger in its resting state.

  • --select-trigger-labelcolorvar(--input-label)
    components.select.triggerLabel

    Foreground color of the selected value rendered inside the trigger.

  • --select-trigger-bordercolorvar(--input-border)
    components.select.triggerBorder

    Border color of the select trigger in its resting state.

  • --select-trigger-placeholdercolorvar(--input-placeholder)
    components.select.triggerPlaceholder

    Foreground color of the placeholder shown when no value is selected.

  • --select-trigger-hover-containercolorvar(--accent)
    components.select.triggerHoverContainer

    Background color of the select trigger on hover (dark theme only by default).

  • --select-trigger-icon-colorcolorvar(--muted-foreground)
    components.select.triggerIconColor

    Default color of inline SVG icons inside the trigger (chevron, leading icon).

  • --select-focus-ringcolorvar(--ring)
    components.select.focusRing

    Color of the focus ring drawn around the trigger when focus-visible.

  • --select-invalid-ringcolorvar(--destructive)
    components.select.invalidRing

    Single color driving the invalid state: border uses it directly, ring uses it at 20% (light) / 40% (dark) opacity.

  • --select-label-colorcolorvar(--muted-foreground)
    components.select.labelColor

    Foreground color of the SelectLabel section header inside the listbox.

  • --separator-colorcolorvar(--border)
    components.separator.color

    Separator line color.

  • --sheet-surface-containercolorvar(--popover)
    components.sheet.surfaceContainer

    Background of the sliding sheet surface.

  • --sheet-surface-labelcolorvar(--popover-foreground)
    components.sheet.surfaceLabel

    Default foreground color inside the sheet.

  • --sheet-title-colorcolorvar(--foreground)
    components.sheet.titleColor

    Foreground color of the sheet title.

  • --sheet-description-colorcolorvar(--muted-foreground)
    components.sheet.descriptionColor

    Foreground color of the sheet description text.

  • --sheet-close-active-containercolorvar(--secondary)
    components.sheet.closeActiveContainer

    Background of the built-in close-X button when its data-state is open.

  • --sheet-close-ring-colorcolorvar(--ring)
    components.sheet.closeRingColor

    Focus ring color of the built-in close-X button.

  • --sheet-close-ring-offset-colorcolorvar(--background)
    components.sheet.closeRingOffsetColor

    Focus ring offset color of the built-in close-X button (matches the surface behind the sheet, so the offset reads as a gap).

  • --sidebar-inset-containercolorvar(--background)
    components.sidebar.insetContainer

    Background of the `<SidebarInset>` main content panel that sits next to the sidebar.

  • --sidebar-input-containercolorvar(--background)
    components.sidebar.inputContainer

    Background of the `<SidebarInput>` text field nested inside a sidebar header / footer.

  • --skeleton-pulse-colorcolorvar(--accent)
    components.skeleton.pulseColor

    Background color of the skeleton placeholder block. The Tailwind `animate-pulse` keyframes fade this fill in and out to read as loading.

  • --slider-trackcolorvar(--muted)
    components.slider.track

    Unfilled portion of the track.

  • --slider-fillcolorvar(--primary)
    components.slider.fill

    Filled portion of the track (left of the thumb).

  • --slider-thumbcolorvar(--primary)
    components.slider.thumb

    Thumb fill color.

  • --slider-thumb-bordercolorvar(--background)
    components.slider.thumbBorder

    Thumb border (the halo separating thumb from track).

  • --slider-tickcolorvar(--foreground)
    components.slider.tick

    Inactive tick dot color (over the unfilled track). Used with reduced opacity.

  • --slider-tick-activecolorvar(--primary-foreground)
    components.slider.tickActive

    Active tick dot color (over the filled track). Used with reduced opacity.

  • --slider-labelcolorvar(--muted-foreground)
    components.slider.label

    Tick label text color.

  • --slider-label-activecolorvar(--foreground)
    components.slider.labelActive

    Tick label color when its value matches the current slider value.

  • --slider-value-containercolorvar(--input-container)
    components.slider.valueContainer

    Background color of the boxed numeric `<SliderValue>` readout/input. Defaults to the input-component fill so the readout matches sibling inputs.

  • --slider-value-bordercolorvar(--input-border)
    components.slider.valueBorder

    Border color of the `<SliderValue>` input box. Defaults to the input-component border.

  • --slider-value-labelcolorvar(--input-label)
    components.slider.valueLabel

    Numeric text color inside `<SliderValue>`. Defaults to the input-component label color.

  • --slider-value-ringcolorvar(--ring)
    components.slider.valueRing

    Border color of `<SliderValue>` when its inner input is focus-visible.

  • --slider-value-unitcolorvar(--muted-foreground)
    components.slider.valueUnit

    Color of the optional unit suffix rendered next to the value (e.g. "%", "px").

  • --spinner-colorcolorcurrentColor
    components.spinner.color

    Spinner stroke color, defaults to `currentColor` so it inherits text color.

  • --switch-checked-containercolorvar(--primary)
    components.switch.checkedContainer

    Track background when the switch is on (`data-[state=checked]`).

  • --switch-unchecked-containercolorvar(--input)
    components.switch.uncheckedContainer

    Track background when the switch is off (`data-[state=unchecked]`). Dark mode applies an 80% opacity automatically.

  • --switch-focus-bordercolorvar(--ring)
    components.switch.focusBorder

    Border color drawn on the track when keyboard focus lands on the switch (`focus-visible`). Pairs with `focus-ring` to render the focus halo.

  • --switch-focus-ringcolorvar(--ring)
    components.switch.focusRing

    Color of the 3px focus halo painted around the switch on `focus-visible`. Rendered at 50% opacity to soften the outer glow.

  • --switch-thumb-unchecked-colorcolorvar(--background)
    components.switchThumb.uncheckedColor

    Thumb fill when the switch is off. Dark mode swaps to `--foreground` automatically.

  • --switch-thumb-checked-color-darkcolorvar(--primary-foreground)
    components.switchThumb.checkedColorDark

    Thumb fill when the switch is on, dark mode only. Light mode keeps the unchecked color so the thumb reads against the primary track.

  • --switch-thumb-unchecked-color-darkcolorvar(--foreground)
    components.switchThumb.uncheckedColorDark

    Thumb fill when the switch is off, dark mode only. Light mode uses `unchecked-color` so the thumb stands out against the input-tinted track.

  • --table-header-bgcolorvar(--muted)
    components.table.headerBg

    Background for the table footer (and any consumer-defined header rows).

  • --table-row-hover-bgcolorvar(--muted)
    components.table.rowHoverBg

    Background for hovered and selected rows; the hover state applies it at 50% opacity.

  • --table-head-colorcolorvar(--foreground)
    components.table.headColor

    Foreground color of `<TableHead>` cells.

  • --table-caption-colorcolorvar(--muted-foreground)
    components.table.captionColor

    Foreground color of the `<TableCaption>` rendered beneath the table.

  • --tabs-list-containercolorvar(--muted)
    components.tabs.listContainer

    Background of the tabs list rail in the default (pill) variant. The line variant keeps the list transparent.

  • --tabs-list-labelcolorvar(--muted-foreground)
    components.tabs.listLabel

    Default label color for tabs in their inactive state. Active tabs override to `trigger-active-label`.

  • --tabs-trigger-active-containercolorvar(--background)
    components.tabs.triggerActiveContainer

    Background of the active tab pill (default variant).

  • --tabs-trigger-active-labelcolorvar(--foreground)
    components.tabs.triggerActiveLabel

    Foreground color of the active tab.

  • --tabs-trigger-hover-labelcolorvar(--foreground)
    components.tabs.triggerHoverLabel

    Foreground color of an inactive tab on hover.

  • --tabs-line-indicatorcolorvar(--foreground)
    components.tabs.lineIndicator

    Color of the underline rule painted under the active tab in the line variant.

  • --tabs-trigger-focus-bordercolorvar(--ring)
    components.tabs.triggerFocusBorder

    Border color drawn on a tab trigger on `focus-visible`. Pairs with `trigger-focus-ring` to render the keyboard focus halo.

  • --tabs-trigger-focus-outlinecolorvar(--ring)
    components.tabs.triggerFocusOutline

    Outline color drawn on a tab trigger on `focus-visible`. Sits underneath the focus ring at 1px width.

  • --tabs-trigger-focus-ringcolorvar(--ring)
    components.tabs.triggerFocusRing

    Color of the 3px focus halo painted around a tab trigger on `focus-visible`. Rendered at 50% opacity to soften the outer glow.

  • --tabs-trigger-active-border-darkcolorvar(--input)
    components.tabs.triggerActiveBorderDark

    Border color of the active tab pill in dark mode (default variant). Light mode keeps the transparent resting border so only the pill background reads as active.

  • --textarea-containercolorvar(--input-container)
    components.textarea.container

    Background color of the textarea. Inherits the standalone Input container so themes that retune `--input-container` retune the textarea automatically.

  • --textarea-labelcolorvar(--input-label)
    components.textarea.label

    Foreground color of the text typed into the textarea. Mirrors `--input-label`.

  • --textarea-bordercolorvar(--input-border)
    components.textarea.border

    Resting border color of the textarea. Mirrors `--input-border`.

  • --textarea-placeholdercolorvar(--input-placeholder)
    components.textarea.placeholder

    Foreground color of the textarea placeholder. Mirrors `--input-placeholder`.

  • --textarea-invalid-bordercolorvar(--destructive)
    components.textarea.invalidBorder

    Border color drawn when the textarea is in an invalid state (`aria-invalid=true`).

  • --toggle-hover-containercolorvar(--muted)
    components.toggle.hoverContainer

    Hover background of the toggle in its resting (off) state. Pairs with `hover-label` and the hover backdrop blur.

  • --toggle-hover-labelcolorvar(--muted-foreground)
    components.toggle.hoverLabel

    Hover label color of the toggle in its resting (off) state.

  • --toggle-hover-bordercolorvar(--border)
    components.toggle.hoverBorder

    Hover border color of the toggle in its resting (off) state.

  • --toggle-active-containercolorvar(--accent)
    components.toggle.activeContainer

    Background of the toggle when pressed (`data-[state=on]`).

  • --toggle-active-labelcolorvar(--accent-foreground)
    components.toggle.activeLabel

    Label color of the toggle when pressed (`data-[state=on]`).

  • --toggle-active-bordercolorvar(--border)
    components.toggle.activeBorder

    Border color of the toggle when pressed (`data-[state=on]`).

  • --toggle-outline-bordercolorvar(--input)
    components.toggle.outlineBorder

    Resting border color of the outline toggle variant. Hover and active states fall through to `hover-border` / `active-border`.

  • --toggle-group-frame-containercolorvar(--input-container)
    components.toggleGroup.frameContainer

    Background fill of the toggle-group frame. Defaults to the `--input-container` role so a group reads as a single grouped control matching other inputs.

  • --toggle-group-frame-bordercolorvar(--input-border)
    components.toggleGroup.frameBorder

    Border color of the toggle-group outer frame. Defaults to the `--input-border` role so the frame matches other input edges.

  • --toggle-group-divider-colorcolorvar(--input-border)
    components.toggleGroup.dividerColor

    Color of the 1px separator drawn between adjacent items inside the group (left edge in horizontal orientation, top edge in vertical). Defaults to `--input-border` so dividers blend with the frame.

  • --tooltip-surface-containercolorvar(--foreground)
    components.tooltip.surfaceContainer

    Background of the tooltip body. Defaults to the inverted page foreground for the conventional dark-on-light tooltip.

  • --tooltip-surface-labelcolorvar(--background)
    components.tooltip.surfaceLabel

    Foreground color of the tooltip body. Defaults to the inverted page background.

  • --tooltip-arrow-colorcolorvar(--foreground)
    components.tooltip.arrowColor

    Fill of the small arrow that points from the tooltip body towards the trigger. Override jointly with `surface-container` to keep the arrow flush.

  • --tree-guidecolorvar(--border)
    components.tree.guide

    Color of the vertical guide lines connecting nested items (shown when `showLines`).

  • --tree-iconcolorvar(--muted-foreground)
    components.tree.icon

    Color of the chevron and file glyphs.

  • --tree-folder-iconcolorvar(--primary)
    components.tree.folderIcon

    Color of the folder and folder-open glyphs. Defaults to the brand primary so folder icons pick up the theme accent color automatically.

  • --tree-labelcolorvar(--foreground)
    components.tree.label

    Text color of a resting tree row.

  • --tree-item-hovercolorvar(--accent)
    components.tree.itemHover

    Row background on hover.

  • --tree-selectedcolorcolor-mix(in oklch, var(--primary) 12%, transparent)
    components.tree.selected

    Row background when the node is selected. Defaults to a light tint of the brand primary.

  • --tree-selected-labelcolorvar(--primary)
    components.tree.selectedLabel

    Row text color when the node is selected. Defaults to the brand primary so text and file icon read in the theme accent color.

  • --tree-selected-accentcolorvar(--primary)
    components.tree.selectedAccent

    Color of the vertical accent bar on the leading edge of a selected row. Defaults to the brand primary so it picks up theme coral, navy, etc. automatically.

GeometrySizes, lengths, and corner radii.154
  • --accordion-radiusradiusvar(--radius-control)
    components.accordion.radius

    Accordion trigger corner radius.

  • --accordion-padding-xsizecalc(var(--spacing) * 4)
    components.accordion.paddingX

    Inline padding inside the accordion.

  • --accordion-padding-ysizecalc(var(--spacing) * 2)
    components.accordion.paddingY

    Block padding inside the accordion.

  • --alert-radiusradiusvar(--radius-container)
    components.alert.radius

    Alert corner radius.

  • --avatar-sizesize2rem
    components.avatar.size

    Avatar diameter at the default size.

  • --avatar-group-spacingsize0.5rem
    components.avatar.groupSpacing

    Negative inline overlap between adjacent avatars inside an `<AvatarGroup>`. Larger values pull stacked avatars further apart.

  • --avatar-radiusradius9999px
    components.avatar.radius

    Avatar corner radius. Default is fully circular.

  • --badge-radiusradiusvar(--radius-pill)
    components.badge.radius

    Badge corner radius.

  • --badge-heightsize1.5rem
    components.badge.height

    Default badge height.

  • --badge-padding-xsizecalc(var(--spacing) * 2)
    components.badge.paddingX

    Inline padding inside the badge.

  • --badge-padding-ysize0.125rem
    components.badge.paddingY

    Block padding inside the badge.

  • --badge-gapsizecalc(var(--spacing) * 1)
    components.badge.gap

    Gap between adjacent children inside the badge.

  • --button-radiusradiusvar(--radius-control)
    components.button.radius

    Button corner radius. Falls back to `radius-control`.

  • --button-heightsize2.25rem
    components.button.height

    Default button height.

  • --button-padding-xsizecalc(var(--spacing) * 4)
    components.button.paddingX

    Inline padding inside the button.

  • --button-padding-ysizecalc(var(--spacing) * 2)
    components.button.paddingY

    Block padding inside the button.

  • --button-gapsizecalc(var(--spacing) * 2)
    components.button.gap

    Gap between adjacent children inside the button.

  • --calendar-range-margin-ysizecalc(var(--spacing) * 1)
    components.calendar.rangeMarginY

    Vertical margin between the range highlight bar and the cell edges. Increase to leave more breathing room above and below the bar.

  • --calendar-week-margin-ysizecalc(var(--spacing) * 2)
    components.calendar.weekMarginY

    Vertical margin between week rows. Adds breathing room between rows independent of the bar height; useful when the range bar fills the full cell.

  • --calendar-radiusradiusvar(--radius-control)
    components.calendar.radius

    Calendar day button corner radius.

  • --calendar-padding-xsizecalc(var(--spacing) * 4)
    components.calendar.paddingX

    Inline padding inside the calendar.

  • --calendar-padding-ysizecalc(var(--spacing) * 4)
    components.calendar.paddingY

    Block padding inside the calendar.

  • --card-radiusradiusvar(--radius-container)
    components.card.radius

    Card corner radius.

  • --card-padding-xsizecalc(var(--spacing) * 6)
    components.card.paddingX

    Inline padding inside the card.

  • --card-padding-ysizecalc(var(--spacing) * 6)
    components.card.paddingY

    Block padding inside the card.

  • --card-gapsizecalc(var(--spacing) * 4)
    components.card.gap

    Gap between adjacent children inside the card.

  • --checkbox-sizesize1rem
    components.checkbox.size

    Checkbox box edge length.

  • --checkbox-radiusradiusvar(--radius-tight)
    components.checkbox.radius

    Checkbox corner radius.

  • --code-block-radiusradiusvar(--radius-control)
    components.codeBlock.radius

    Code block corner radius.

  • --command-radiusradiusvar(--radius-surface)
    components.command.radius

    Command palette container radius.

  • --command-padding-xsize0px
    components.command.paddingX

    Inline padding inside the command.

  • --command-padding-ysize0px
    components.command.paddingY

    Block padding inside the command.

  • --command-gapsize0px
    components.command.gap

    Gap between adjacent children inside the command.

  • --command-item-radiusradiusvar(--radius-control)
    components.commandItem.radius

    Command palette item corner radius.

  • --command-item-padding-xsizecalc(var(--spacing) * 2)
    components.commandItem.paddingX

    Inline padding inside the command-item.

  • --command-item-padding-ysizecalc(var(--spacing) * 1.5)
    components.commandItem.paddingY

    Block padding inside the command-item.

  • --command-item-gapsizecalc(var(--spacing) * 2)
    components.commandItem.gap

    Gap between adjacent children inside the command-item.

  • --dialog-radiusradiusvar(--radius-surface)
    components.dialog.radius

    Dialog corner radius.

  • --dialog-padding-xsizecalc(var(--spacing) * 6)
    components.dialog.paddingX

    Inline padding inside the dialog.

  • --dialog-padding-ysizecalc(var(--spacing) * 6)
    components.dialog.paddingY

    Block padding inside the dialog.

  • --dialog-gapsizecalc(var(--spacing) * 4)
    components.dialog.gap

    Gap between adjacent children inside the dialog.

  • --drawer-radiusradiusvar(--radius-container)
    components.drawer.radius

    Drawer sheet top-corner radius.

  • --drawer-padding-xsizecalc(var(--spacing) * 6)
    components.drawer.paddingX

    Inline padding inside the drawer.

  • --drawer-padding-ysizecalc(var(--spacing) * 4)
    components.drawer.paddingY

    Block padding inside the drawer.

  • --drawer-gapsizecalc(var(--spacing) * 2)
    components.drawer.gap

    Gap between adjacent children inside the drawer.

  • --color-picker-pad-radiusradius0.5rem
    components.colorPicker.padRadius

    Corner radius of the saturation/value pad. Set to `0` for square / brutalist looks.

  • --color-picker-track-radiusradius9999px
    components.colorPicker.trackRadius

    Corner radius of the hue and alpha slider tracks and their markers. Defaults to a full pill; set lower for square / brutalist looks.

  • --color-picker-radiusradiusvar(--radius-surface)
    components.colorPicker.radius

    ColorPicker panel corner radius.

  • --menu-radiusradiusvar(--radius-surface)
    components.menu.radius

    Menu surface corner radius.

  • --menu-padding-xsizecalc(var(--spacing) * 1)
    components.menu.paddingX

    Inline padding inside the menu.

  • --menu-padding-ysizecalc(var(--spacing) * 1)
    components.menu.paddingY

    Block padding inside the menu.

  • --menu-gapsize0.125rem
    components.menu.gap

    Gap between adjacent children inside the menu.

  • --menu-item-radiusradiusvar(--radius-control)
    components.menuItem.radius

    Menu-item corner radius.

  • --menu-item-padding-xsizecalc(var(--spacing) * 2)
    components.menuItem.paddingX

    Inline padding inside the menu-item.

  • --menu-item-padding-ysizecalc(var(--spacing) * 1.5)
    components.menuItem.paddingY

    Block padding inside the menu-item.

  • --menu-item-gapsizecalc(var(--spacing) * 2)
    components.menuItem.gap

    Gap between adjacent children inside the menu-item.

  • --dropzone-radiusradiusvar(--radius-container)
    components.dropzone.radius

    Corner radius of the dropzone surface.

  • --dropzone-padding-xsizecalc(var(--spacing) * 6)
    components.dropzone.paddingX

    Inline padding inside the dropzone.

  • --dropzone-padding-ysizecalc(var(--spacing) * 6)
    components.dropzone.paddingY

    Block padding inside the dropzone.

  • --dropzone-gapsizecalc(var(--spacing) * 2)
    components.dropzone.gap

    Gap between adjacent children inside the dropzone.

  • --field-gapsizecalc(var(--spacing) * 1.5)
    components.field.gap

    Gap between adjacent children inside the field.

  • --file-upload-radiusradiusvar(--radius-control)
    components.fileUpload.radius

    Corner radius of a file-list row and its preview tile.

  • --file-upload-padding-xsizecalc(var(--spacing) * 3)
    components.fileUpload.paddingX

    Inline padding inside the file-upload.

  • --file-upload-padding-ysizecalc(var(--spacing) * 2)
    components.fileUpload.paddingY

    Block padding inside the file-upload.

  • --file-upload-gapsizecalc(var(--spacing) * 3)
    components.fileUpload.gap

    Gap between adjacent children inside the file-upload.

  • --hover-card-radiusradiusvar(--radius-surface)
    components.hoverCard.radius

    HoverCard corner radius.

  • --hover-card-padding-xsizecalc(var(--spacing) * 3)
    components.hoverCard.paddingX

    Inline padding inside the hover-card.

  • --hover-card-padding-ysizecalc(var(--spacing) * 3)
    components.hoverCard.paddingY

    Block padding inside the hover-card.

  • --hover-card-gapsizecalc(var(--spacing) * 2)
    components.hoverCard.gap

    Gap between adjacent children inside the hover-card.

  • --input-otp-sizesize2.5rem
    components.inputOtp.size

    OTP slot width and height.

  • --input-otp-radiusradiusvar(--radius-control)
    components.inputOtp.radius

    OTP slot corner radius.

  • --input-radiusradiusvar(--radius-control)
    components.input.radius

    Input corner radius.

  • --input-heightsize2.25rem
    components.input.height

    Default input height.

  • --input-padding-xsizecalc(var(--spacing) * 3)
    components.input.paddingX

    Inline padding inside the input.

  • --input-padding-ysizecalc(var(--spacing) * 2)
    components.input.paddingY

    Block padding inside the input.

  • --input-gapsizecalc(var(--spacing) * 2)
    components.input.gap

    Gap between adjacent children inside the input.

  • --kbd-radiusradiusvar(--radius-control)
    components.kbd.radius

    Kbd corner radius.

  • --kbd-heightsize1.25rem
    components.kbd.height

    Default kbd height.

  • --kbd-padding-xsizecalc(var(--spacing) * 1.5)
    components.kbd.paddingX

    Inline padding inside the kbd.

  • --kbd-padding-ysize0.0625rem
    components.kbd.paddingY

    Block padding inside the kbd.

  • --kbd-gapsizecalc(var(--spacing) * 1)
    components.kbd.gap

    Gap between adjacent children inside the kbd.

  • --menubar-radiusradiusvar(--radius-control)
    components.menubar.radius

    Menubar root border radius.

  • --menubar-heightsize2.25rem
    components.menubar.height

    Default menubar height.

  • --menubar-padding-xsizecalc(var(--spacing) * 1.5)
    components.menubar.paddingX

    Inline padding inside the menubar.

  • --menubar-padding-ysizecalc(var(--spacing) * 1)
    components.menubar.paddingY

    Block padding inside the menubar.

  • --menubar-content-radiusradiusvar(--radius-surface)
    components.menubarContent.radius

    Menubar dropdown content corner radius.

  • --menubar-content-padding-xsizecalc(var(--spacing) * 1)
    components.menubarContent.paddingX

    Inline padding inside the menubar-content.

  • --menubar-content-padding-ysizecalc(var(--spacing) * 1)
    components.menubarContent.paddingY

    Block padding inside the menubar-content.

  • --menubar-item-radiusradiusvar(--radius-control)
    components.menubarItem.radius

    Menubar item corner radius.

  • --menubar-item-padding-xsizecalc(var(--spacing) * 2)
    components.menubarItem.paddingX

    Inline padding inside the menubar-item.

  • --menubar-item-padding-ysizecalc(var(--spacing) * 1.5)
    components.menubarItem.paddingY

    Block padding inside the menubar-item.

  • --menubar-item-gapsizecalc(var(--spacing) * 2)
    components.menubarItem.gap

    Gap between adjacent children inside the menubar-item.

  • --mini-calendar-radiusradiusvar(--radius-control)
    components.miniCalendar.radius

    Corner radius of a day cell.

  • --navigation-menu-radiusradiusvar(--radius-control)
    components.navigationMenu.radius

    Navigation menu trigger corner radius.

  • --navigation-menu-heightsize2.25rem
    components.navigationMenu.height

    Default navigation-menu height.

  • --navigation-menu-padding-xsizecalc(var(--spacing) * 4)
    components.navigationMenu.paddingX

    Inline padding inside the navigation-menu.

  • --navigation-menu-padding-ysizecalc(var(--spacing) * 2)
    components.navigationMenu.paddingY

    Block padding inside the navigation-menu.

  • --navigation-menu-viewport-radiusradiusvar(--radius-surface)
    components.navigationMenuViewport.radius

    Navigation menu viewport corner radius.

  • --navigation-menu-viewport-padding-xsizecalc(var(--spacing) * 3)
    components.navigationMenuViewport.paddingX

    Inline padding inside the navigation-menu-viewport.

  • --navigation-menu-viewport-padding-ysizecalc(var(--spacing) * 3)
    components.navigationMenuViewport.paddingY

    Block padding inside the navigation-menu-viewport.

  • --navigation-menu-viewport-gapsizecalc(var(--spacing) * 2)
    components.navigationMenuViewport.gap

    Gap between adjacent children inside the navigation-menu-viewport.

  • --popover-radiusradiusvar(--radius-surface)
    components.popover.radius

    Popover corner radius.

  • --popover-padding-xsizecalc(var(--spacing) * 3)
    components.popover.paddingX

    Inline padding inside the popover.

  • --popover-padding-ysizecalc(var(--spacing) * 3)
    components.popover.paddingY

    Block padding inside the popover.

  • --popover-gapsizecalc(var(--spacing) * 2)
    components.popover.gap

    Gap between adjacent children inside the popover.

  • --progress-track-heightsize0.5rem
    components.progress.trackHeight

    Progress track thickness.

  • --radio-group-sizesize1rem
    components.radioGroup.size

    Radio button diameter.

  • --radio-group-radiusradius9999px
    components.radioGroup.radius

    Radio button border radius.

  • --rating-star-size-smsize0.75rem
    components.rating.starSizeSm

    Star icon diameter at the `sm` size variant.

  • --rating-star-sizesize0.875rem
    components.rating.starSize

    Star icon diameter at the `default` size variant.

  • --rating-star-size-lgsize1.25rem
    components.rating.starSizeLg

    Star icon diameter at the `lg` size variant.

  • --resizable-handle-sizesize1px
    components.resizable.handleSize

    Resize handle thickness along the resize axis.

  • --select-radiusradiusvar(--radius-control)
    components.select.radius

    Select trigger corner radius.

  • --select-heightsize2.25rem
    components.select.height

    Default select height.

  • --select-padding-xsizecalc(var(--spacing) * 3)
    components.select.paddingX

    Inline padding inside the select.

  • --select-padding-ysizecalc(var(--spacing) * 2)
    components.select.paddingY

    Block padding inside the select.

  • --select-gapsizecalc(var(--spacing) * 2)
    components.select.gap

    Gap between adjacent children inside the select.

  • --sheet-padding-xsizecalc(var(--spacing) * 6)
    components.sheet.paddingX

    Inline padding inside the sheet.

  • --sheet-padding-ysizecalc(var(--spacing) * 6)
    components.sheet.paddingY

    Block padding inside the sheet.

  • --sheet-gapsizecalc(var(--spacing) * 4)
    components.sheet.gap

    Gap between adjacent children inside the sheet.

  • --sidebar-widthsize16rem
    components.sidebar.width

    Sidebar width when expanded.

  • --sidebar-width-iconsize3rem
    components.sidebar.widthIcon

    Sidebar width when collapsed to icon-only mode.

  • --sidebar-width-mobilesize18rem
    components.sidebar.widthMobile

    Sidebar width when shown as a mobile sheet.

  • --slider-track-heightsize0.25rem
    components.slider.trackHeight

    Slider track thickness.

  • --slider-thumb-sizesize1rem
    components.slider.thumbSize

    Slider thumb diameter.

  • --slider-thumb-radiusradius9999px
    components.slider.thumbRadius

    Thumb corner radius. Lower for square thumbs.

  • --slider-tick-sizesize0.25rem
    components.slider.tickSize

    Tick dot diameter on the track.

  • --slider-radiusradius9999px
    components.slider.radius

    Track corner radius. Set lower for square / brutalist looks.

  • --spinner-sizesize1rem
    components.spinner.size

    Default spinner dimension (width and height) for the `default` size variant.

  • --switch-track-widthsize2.5rem
    components.switch.trackWidth

    Switch track width. Fits two thumb diameters + padding + border.

  • --switch-track-heightsize1.5rem
    components.switch.trackHeight

    Switch track height. Leaves room for thumb + padding + border.

  • --switch-radiusradius9999px
    components.switch.radius

    Switch track corner radius. Default is fully rounded.

  • --switch-thumb-sizesize1rem
    components.switchThumb.size

    Switch thumb diameter at the default size.

  • --switch-thumb-radiusradius9999px
    components.switchThumb.radius

    Switch thumb corner radius.

  • --tabs-trigger-padding-xsizecalc(var(--spacing) * 3)
    components.tabs.triggerPaddingX

    Inline padding inside a tab trigger.

  • --tabs-trigger-padding-ysizecalc(var(--spacing) * 1.5)
    components.tabs.triggerPaddingY

    Block padding inside a tab trigger.

  • --tabs-radiusradiusvar(--radius-control)
    components.tabs.radius

    Tabs corner radius.

  • --textarea-radiusradiusvar(--radius-control)
    components.textarea.radius

    Textarea corner radius.

  • --textarea-padding-xsizecalc(var(--spacing) * 3)
    components.textarea.paddingX

    Inline padding inside the textarea.

  • --textarea-padding-ysizecalc(var(--spacing) * 2)
    components.textarea.paddingY

    Block padding inside the textarea.

  • --textarea-gapsizecalc(var(--spacing) * 2)
    components.textarea.gap

    Gap between adjacent children inside the textarea.

  • --toast-radiusradiusvar(--radius-container)
    components.toast.radius

    Toast corner radius.

  • --toggle-radiusradiusvar(--radius-control)
    components.toggle.radius

    Toggle corner radius.

  • --toggle-heightsize2.25rem
    components.toggle.height

    Default toggle height.

  • --toggle-padding-xsizecalc(var(--spacing) * 3)
    components.toggle.paddingX

    Inline padding inside the toggle.

  • --toggle-padding-ysizecalc(var(--spacing) * 2)
    components.toggle.paddingY

    Block padding inside the toggle.

  • --toggle-gapsizecalc(var(--spacing) * 2)
    components.toggle.gap

    Gap between adjacent children inside the toggle.

  • --tooltip-radiusradiusvar(--radius-control)
    components.tooltip.radius

    Tooltip corner radius.

  • --tooltip-padding-xsizecalc(var(--spacing) * 2)
    components.tooltip.paddingX

    Inline padding inside the tooltip.

  • --tooltip-padding-ysizecalc(var(--spacing) * 1)
    components.tooltip.paddingY

    Block padding inside the tooltip.

  • --tree-indentsize1.25rem
    components.tree.indent

    Horizontal indentation added per nesting level.

  • --tree-padding-xsizecalc(var(--spacing) * 2)
    components.tree.paddingX

    Inline padding inside the tree.

  • --tree-padding-ysizecalc(var(--spacing) * 1.5)
    components.tree.paddingY

    Block padding inside the tree.

  • --tree-gapsizecalc(var(--spacing) * 2)
    components.tree.gap

    Gap between adjacent children inside the tree.

BorderBorder width and style.62
  • --badge-border-widthborder-width0px
    components.badge.borderWidth

    Border width on the badge. Set non-zero for outline-style variants.

  • --badge-border-styleborder-stylesolid
    components.badge.borderStyle

    Border style on the badge (`solid`, `dashed`, `double`, `none`).

  • --button-border-widthborder-width0px
    components.button.borderWidth

    Border width on the button. Set non-zero for outline-style variants.

  • --button-border-styleborder-stylesolid
    components.button.borderStyle

    Border style on the button (`solid`, `dashed`, `double`, `none`).

  • --calendar-week-separator-widthborder-width1px
    components.calendar.weekSeparatorWidth

    Width of the horizontal divider drawn below each week row. Set to `0px` to hide the separator entirely.

  • --card-border-widthborder-width1px
    components.card.borderWidth

    Border width on the card. Set non-zero for outline-style variants.

  • --card-border-styleborder-stylesolid
    components.card.borderStyle

    Border style on the card (`solid`, `dashed`, `double`, `none`).

  • --checkbox-border-widthborder-width1px
    components.checkbox.borderWidth

    Border width on the checkbox. Set non-zero for outline-style variants.

  • --checkbox-border-styleborder-stylesolid
    components.checkbox.borderStyle

    Border style on the checkbox (`solid`, `dashed`, `double`, `none`).

  • --command-border-widthborder-width1px
    components.command.borderWidth

    Border width on the command. Set non-zero for outline-style variants.

  • --command-border-styleborder-stylesolid
    components.command.borderStyle

    Border style on the command (`solid`, `dashed`, `double`, `none`).

  • --command-item-border-widthborder-width0px
    components.commandItem.borderWidth

    Border width on the command-item. Set non-zero for outline-style variants.

  • --command-item-border-styleborder-stylesolid
    components.commandItem.borderStyle

    Border style on the command-item (`solid`, `dashed`, `double`, `none`).

  • --dialog-border-widthborder-width1px
    components.dialog.borderWidth

    Border width on the dialog. Set non-zero for outline-style variants.

  • --dialog-border-styleborder-stylesolid
    components.dialog.borderStyle

    Border style on the dialog (`solid`, `dashed`, `double`, `none`).

  • --drawer-border-widthborder-width1px
    components.drawer.borderWidth

    Border width on the drawer. Set non-zero for outline-style variants.

  • --drawer-border-styleborder-stylesolid
    components.drawer.borderStyle

    Border style on the drawer (`solid`, `dashed`, `double`, `none`).

  • --color-picker-border-widthborder-width1px
    components.colorPicker.borderWidth

    Border width on the color-picker. Set non-zero for outline-style variants.

  • --color-picker-border-styleborder-stylesolid
    components.colorPicker.borderStyle

    Border style on the color-picker (`solid`, `dashed`, `double`, `none`).

  • --menu-border-widthborder-width1px
    components.menu.borderWidth

    Border width on the menu. Set non-zero for outline-style variants.

  • --menu-border-styleborder-stylesolid
    components.menu.borderStyle

    Border style on the menu (`solid`, `dashed`, `double`, `none`).

  • --menu-item-border-widthborder-width0px
    components.menuItem.borderWidth

    Border width on the menu-item. Set non-zero for outline-style variants.

  • --menu-item-border-styleborder-stylesolid
    components.menuItem.borderStyle

    Border style on the menu-item (`solid`, `dashed`, `double`, `none`).

  • --file-upload-border-widthborder-width1px
    components.fileUpload.borderWidth

    Border width on the file-upload. Set non-zero for outline-style variants.

  • --file-upload-border-styleborder-stylesolid
    components.fileUpload.borderStyle

    Border style on the file-upload (`solid`, `dashed`, `double`, `none`).

  • --hover-card-border-widthborder-width1px
    components.hoverCard.borderWidth

    Border width on the hover-card. Set non-zero for outline-style variants.

  • --hover-card-border-styleborder-stylesolid
    components.hoverCard.borderStyle

    Border style on the hover-card (`solid`, `dashed`, `double`, `none`).

  • --input-otp-border-widthborder-width1px
    components.inputOtp.borderWidth

    Border width on the input-otp. Set non-zero for outline-style variants.

  • --input-otp-border-styleborder-stylesolid
    components.inputOtp.borderStyle

    Border style on the input-otp (`solid`, `dashed`, `double`, `none`).

  • --input-border-widthborder-width1px
    components.input.borderWidth

    Border width on the input. Set non-zero for outline-style variants.

  • --input-border-styleborder-stylesolid
    components.input.borderStyle

    Border style on the input (`solid`, `dashed`, `double`, `none`).

  • --kbd-border-widthborder-width1px
    components.kbd.borderWidth

    Border width on the kbd. Set non-zero for outline-style variants.

  • --kbd-border-styleborder-stylesolid
    components.kbd.borderStyle

    Border style on the kbd (`solid`, `dashed`, `double`, `none`).

  • --menubar-border-widthborder-width1px
    components.menubar.borderWidth

    Border width on the menubar. Set non-zero for outline-style variants.

  • --menubar-border-styleborder-stylesolid
    components.menubar.borderStyle

    Border style on the menubar (`solid`, `dashed`, `double`, `none`).

  • --menubar-content-border-widthborder-width1px
    components.menubarContent.borderWidth

    Border width on the menubar-content. Set non-zero for outline-style variants.

  • --menubar-content-border-styleborder-stylesolid
    components.menubarContent.borderStyle

    Border style on the menubar-content (`solid`, `dashed`, `double`, `none`).

  • --menubar-item-border-widthborder-width0px
    components.menubarItem.borderWidth

    Border width on the menubar-item. Set non-zero for outline-style variants.

  • --menubar-item-border-styleborder-stylesolid
    components.menubarItem.borderStyle

    Border style on the menubar-item (`solid`, `dashed`, `double`, `none`).

  • --navigation-menu-viewport-border-widthborder-width1px
    components.navigationMenuViewport.borderWidth

    Border width on the navigation-menu-viewport. Set non-zero for outline-style variants.

  • --navigation-menu-viewport-border-styleborder-stylesolid
    components.navigationMenuViewport.borderStyle

    Border style on the navigation-menu-viewport (`solid`, `dashed`, `double`, `none`).

  • --popover-border-widthborder-width1px
    components.popover.borderWidth

    Border width on the popover. Set non-zero for outline-style variants.

  • --popover-border-styleborder-stylesolid
    components.popover.borderStyle

    Border style on the popover (`solid`, `dashed`, `double`, `none`).

  • --radio-group-border-widthborder-width1px
    components.radioGroup.borderWidth

    Border width on the radio-group. Set non-zero for outline-style variants.

  • --radio-group-border-styleborder-stylesolid
    components.radioGroup.borderStyle

    Border style on the radio-group (`solid`, `dashed`, `double`, `none`).

  • --select-border-widthborder-width1px
    components.select.borderWidth

    Border width on the select. Set non-zero for outline-style variants.

  • --select-border-styleborder-stylesolid
    components.select.borderStyle

    Border style on the select (`solid`, `dashed`, `double`, `none`).

  • --separator-widthborder-width1px
    components.separator.width

    Separator line thickness.

  • --separator-styleborder-stylesolid
    components.separator.style

    Separator line style (`solid`, `dashed`, `double`).

  • --sheet-border-widthborder-width1px
    components.sheet.borderWidth

    Border width on the sheet. Set non-zero for outline-style variants.

  • --sheet-border-styleborder-stylesolid
    components.sheet.borderStyle

    Border style on the sheet (`solid`, `dashed`, `double`, `none`).

  • --slider-thumb-border-widthborder-width2px
    components.slider.thumbBorderWidth

    Thumb border width, the contrast halo between the thumb and the track.

  • --switch-border-widthborder-width0px
    components.switch.borderWidth

    Border width on the switch. Set non-zero for outline-style variants.

  • --switch-border-styleborder-stylesolid
    components.switch.borderStyle

    Border style on the switch (`solid`, `dashed`, `double`, `none`).

  • --tabs-border-widthborder-width1px
    components.tabs.borderWidth

    Border width on the tabs. Set non-zero for outline-style variants.

  • --tabs-border-styleborder-stylesolid
    components.tabs.borderStyle

    Border style on the tabs (`solid`, `dashed`, `double`, `none`).

  • --textarea-border-widthborder-width1px
    components.textarea.borderWidth

    Border width on the textarea. Set non-zero for outline-style variants.

  • --textarea-border-styleborder-stylesolid
    components.textarea.borderStyle

    Border style on the textarea (`solid`, `dashed`, `double`, `none`).

  • --toggle-border-widthborder-width0px
    components.toggle.borderWidth

    Border width on the toggle. Set non-zero for outline-style variants.

  • --toggle-border-styleborder-stylesolid
    components.toggle.borderStyle

    Border style on the toggle (`solid`, `dashed`, `double`, `none`).

  • --tooltip-border-widthborder-width0px
    components.tooltip.borderWidth

    Border width on the tooltip. Set non-zero for outline-style variants.

  • --tooltip-border-styleborder-stylesolid
    components.tooltip.borderStyle

    Border style on the tooltip (`solid`, `dashed`, `double`, `none`).

TypographyTypeface, size, weight, spacing.96
  • --badge-font-familyfont-familyvar(--font-sans)
    components.badge.fontFamily

    Typeface for badge.

  • --badge-font-sizefont-sizevar(--text-label-md)
    components.badge.fontSize

    Font size for badge.

  • --badge-font-weightfont-weight500
    components.badge.fontWeight

    Font weight for badge.

  • --badge-line-heightline-height1.25
    components.badge.lineHeight

    Line height for badge.

  • --badge-letter-spacingletter-spacing0
    components.badge.letterSpacing

    Letter spacing for badge. Useful for caps labels.

  • --badge-text-transformtext-transformnone
    components.badge.textTransform

    Text transform for badge (`uppercase`, `lowercase`, `capitalize`, `none`).

  • --button-font-familyfont-familyvar(--font-sans)
    components.button.fontFamily

    Typeface for button.

  • --button-font-sizefont-sizevar(--text-body-md)
    components.button.fontSize

    Font size for button.

  • --button-font-weightfont-weight500
    components.button.fontWeight

    Font weight for button.

  • --button-line-heightline-height1.25
    components.button.lineHeight

    Line height for button.

  • --button-letter-spacingletter-spacing0
    components.button.letterSpacing

    Letter spacing for button. Useful for caps labels.

  • --button-text-transformtext-transformnone
    components.button.textTransform

    Text transform for button (`uppercase`, `lowercase`, `capitalize`, `none`).

  • --card-font-familyfont-familyvar(--font-sans)
    components.card.fontFamily

    Typeface for card.

  • --card-font-sizefont-sizevar(--text-body-md)
    components.card.fontSize

    Font size for card.

  • --card-font-weightfont-weight500
    components.card.fontWeight

    Font weight for card.

  • --card-line-heightline-height1.25
    components.card.lineHeight

    Line height for card.

  • --card-letter-spacingletter-spacing0
    components.card.letterSpacing

    Letter spacing for card. Useful for caps labels.

  • --card-text-transformtext-transformnone
    components.card.textTransform

    Text transform for card (`uppercase`, `lowercase`, `capitalize`, `none`).

  • --code-block-font-familyfont-familyvar(--font-mono)
    components.codeBlock.fontFamily

    Typeface for code-block.

  • --code-block-font-sizefont-sizevar(--text-body-md)
    components.codeBlock.fontSize

    Font size for code-block.

  • --code-block-font-weightfont-weight500
    components.codeBlock.fontWeight

    Font weight for code-block.

  • --code-block-line-heightline-height1.25
    components.codeBlock.lineHeight

    Line height for code-block.

  • --code-block-letter-spacingletter-spacing0
    components.codeBlock.letterSpacing

    Letter spacing for code-block. Useful for caps labels.

  • --code-block-text-transformtext-transformnone
    components.codeBlock.textTransform

    Text transform for code-block (`uppercase`, `lowercase`, `capitalize`, `none`).

  • --command-item-font-familyfont-familyvar(--font-sans)
    components.commandItem.fontFamily

    Typeface for command-item.

  • --command-item-font-sizefont-sizevar(--text-body-md)
    components.commandItem.fontSize

    Font size for command-item.

  • --command-item-font-weightfont-weight500
    components.commandItem.fontWeight

    Font weight for command-item.

  • --command-item-line-heightline-height1.25
    components.commandItem.lineHeight

    Line height for command-item.

  • --command-item-letter-spacingletter-spacing0
    components.commandItem.letterSpacing

    Letter spacing for command-item. Useful for caps labels.

  • --command-item-text-transformtext-transformnone
    components.commandItem.textTransform

    Text transform for command-item (`uppercase`, `lowercase`, `capitalize`, `none`).

  • --menu-item-font-familyfont-familyvar(--font-sans)
    components.menuItem.fontFamily

    Typeface for menu-item.

  • --menu-item-font-sizefont-sizevar(--text-body-md)
    components.menuItem.fontSize

    Font size for menu-item.

  • --menu-item-font-weightfont-weight500
    components.menuItem.fontWeight

    Font weight for menu-item.

  • --menu-item-line-heightline-height1.25
    components.menuItem.lineHeight

    Line height for menu-item.

  • --menu-item-letter-spacingletter-spacing0
    components.menuItem.letterSpacing

    Letter spacing for menu-item. Useful for caps labels.

  • --menu-item-text-transformtext-transformnone
    components.menuItem.textTransform

    Text transform for menu-item (`uppercase`, `lowercase`, `capitalize`, `none`).

  • --input-otp-font-familyfont-familyvar(--font-sans)
    components.inputOtp.fontFamily

    Typeface for input-otp.

  • --input-otp-font-sizefont-sizevar(--text-body-md)
    components.inputOtp.fontSize

    Font size for input-otp.

  • --input-otp-font-weightfont-weight500
    components.inputOtp.fontWeight

    Font weight for input-otp.

  • --input-otp-line-heightline-height1.25
    components.inputOtp.lineHeight

    Line height for input-otp.

  • --input-otp-letter-spacingletter-spacing0
    components.inputOtp.letterSpacing

    Letter spacing for input-otp. Useful for caps labels.

  • --input-otp-text-transformtext-transformnone
    components.inputOtp.textTransform

    Text transform for input-otp (`uppercase`, `lowercase`, `capitalize`, `none`).

  • --input-font-familyfont-familyvar(--font-sans)
    components.input.fontFamily

    Typeface for input.

  • --input-font-sizefont-sizevar(--text-body-md)
    components.input.fontSize

    Font size for input.

  • --input-font-weightfont-weight500
    components.input.fontWeight

    Font weight for input.

  • --input-line-heightline-height1.25
    components.input.lineHeight

    Line height for input.

  • --input-letter-spacingletter-spacing0
    components.input.letterSpacing

    Letter spacing for input. Useful for caps labels.

  • --input-text-transformtext-transformnone
    components.input.textTransform

    Text transform for input (`uppercase`, `lowercase`, `capitalize`, `none`).

  • --kbd-font-familyfont-familyvar(--font-mono)
    components.kbd.fontFamily

    Typeface for kbd.

  • --kbd-font-sizefont-sizevar(--text-label-sm)
    components.kbd.fontSize

    Font size for kbd.

  • --kbd-font-weightfont-weight500
    components.kbd.fontWeight

    Font weight for kbd.

  • --kbd-line-heightline-height1.25
    components.kbd.lineHeight

    Line height for kbd.

  • --kbd-letter-spacingletter-spacing0
    components.kbd.letterSpacing

    Letter spacing for kbd. Useful for caps labels.

  • --kbd-text-transformtext-transformnone
    components.kbd.textTransform

    Text transform for kbd (`uppercase`, `lowercase`, `capitalize`, `none`).

  • --menubar-item-font-familyfont-familyvar(--font-sans)
    components.menubarItem.fontFamily

    Typeface for menubar-item.

  • --menubar-item-font-sizefont-sizevar(--text-body-md)
    components.menubarItem.fontSize

    Font size for menubar-item.

  • --menubar-item-font-weightfont-weight500
    components.menubarItem.fontWeight

    Font weight for menubar-item.

  • --menubar-item-line-heightline-height1.25
    components.menubarItem.lineHeight

    Line height for menubar-item.

  • --menubar-item-letter-spacingletter-spacing0
    components.menubarItem.letterSpacing

    Letter spacing for menubar-item. Useful for caps labels.

  • --menubar-item-text-transformtext-transformnone
    components.menubarItem.textTransform

    Text transform for menubar-item (`uppercase`, `lowercase`, `capitalize`, `none`).

  • --navigation-menu-font-familyfont-familyvar(--font-sans)
    components.navigationMenu.fontFamily

    Typeface for navigation-menu.

  • --navigation-menu-font-sizefont-sizevar(--text-body-md)
    components.navigationMenu.fontSize

    Font size for navigation-menu.

  • --navigation-menu-font-weightfont-weight500
    components.navigationMenu.fontWeight

    Font weight for navigation-menu.

  • --navigation-menu-line-heightline-height1.25
    components.navigationMenu.lineHeight

    Line height for navigation-menu.

  • --navigation-menu-letter-spacingletter-spacing0
    components.navigationMenu.letterSpacing

    Letter spacing for navigation-menu. Useful for caps labels.

  • --navigation-menu-text-transformtext-transformnone
    components.navigationMenu.textTransform

    Text transform for navigation-menu (`uppercase`, `lowercase`, `capitalize`, `none`).

  • --select-font-familyfont-familyvar(--font-sans)
    components.select.fontFamily

    Typeface for select.

  • --select-font-sizefont-sizevar(--text-body-md)
    components.select.fontSize

    Font size for select.

  • --select-font-weightfont-weight500
    components.select.fontWeight

    Font weight for select.

  • --select-line-heightline-height1.25
    components.select.lineHeight

    Line height for select.

  • --select-letter-spacingletter-spacing0
    components.select.letterSpacing

    Letter spacing for select. Useful for caps labels.

  • --select-text-transformtext-transformnone
    components.select.textTransform

    Text transform for select (`uppercase`, `lowercase`, `capitalize`, `none`).

  • --tabs-font-familyfont-familyvar(--font-sans)
    components.tabs.fontFamily

    Typeface for tabs.

  • --tabs-font-sizefont-sizevar(--text-label-lg)
    components.tabs.fontSize

    Font size for tabs.

  • --tabs-font-weightfont-weight500
    components.tabs.fontWeight

    Font weight for tabs.

  • --tabs-line-heightline-height1.25
    components.tabs.lineHeight

    Line height for tabs.

  • --tabs-letter-spacingletter-spacing0
    components.tabs.letterSpacing

    Letter spacing for tabs. Useful for caps labels.

  • --tabs-text-transformtext-transformnone
    components.tabs.textTransform

    Text transform for tabs (`uppercase`, `lowercase`, `capitalize`, `none`).

  • --textarea-font-familyfont-familyvar(--font-sans)
    components.textarea.fontFamily

    Typeface for textarea.

  • --textarea-font-sizefont-sizevar(--text-body-md)
    components.textarea.fontSize

    Font size for textarea.

  • --textarea-font-weightfont-weight500
    components.textarea.fontWeight

    Font weight for textarea.

  • --textarea-line-heightline-height1.25
    components.textarea.lineHeight

    Line height for textarea.

  • --textarea-letter-spacingletter-spacing0
    components.textarea.letterSpacing

    Letter spacing for textarea. Useful for caps labels.

  • --textarea-text-transformtext-transformnone
    components.textarea.textTransform

    Text transform for textarea (`uppercase`, `lowercase`, `capitalize`, `none`).

  • --toggle-font-familyfont-familyvar(--font-sans)
    components.toggle.fontFamily

    Typeface for toggle.

  • --toggle-font-sizefont-sizevar(--text-body-md)
    components.toggle.fontSize

    Font size for toggle.

  • --toggle-font-weightfont-weight500
    components.toggle.fontWeight

    Font weight for toggle.

  • --toggle-line-heightline-height1.25
    components.toggle.lineHeight

    Line height for toggle.

  • --toggle-letter-spacingletter-spacing0
    components.toggle.letterSpacing

    Letter spacing for toggle. Useful for caps labels.

  • --toggle-text-transformtext-transformnone
    components.toggle.textTransform

    Text transform for toggle (`uppercase`, `lowercase`, `capitalize`, `none`).

  • --tooltip-font-familyfont-familyvar(--font-sans)
    components.tooltip.fontFamily

    Typeface for tooltip.

  • --tooltip-font-sizefont-sizevar(--text-label-md)
    components.tooltip.fontSize

    Font size for tooltip.

  • --tooltip-font-weightfont-weight500
    components.tooltip.fontWeight

    Font weight for tooltip.

  • --tooltip-line-heightline-height1.25
    components.tooltip.lineHeight

    Line height for tooltip.

  • --tooltip-letter-spacingletter-spacing0
    components.tooltip.letterSpacing

    Letter spacing for tooltip. Useful for caps labels.

  • --tooltip-text-transformtext-transformnone
    components.tooltip.textTransform

    Text transform for tooltip (`uppercase`, `lowercase`, `capitalize`, `none`).

ElevationDrop shadow and depth.41
  • --alert-backdrop-blurblur0px
    components.alert.backdropBlur

    Backdrop blur applied to the alert. Set non-zero alongside a translucent `tint-base` (e.g. `transparent`) for a glass variant.

  • --button-shadowshadowvar(--shadow-surface)
    components.button.shadow

    Resting elevation under a button.

  • --calendar-range-backdrop-blurblur0px
    components.calendar.rangeBackdropBlur

    Backdrop blur applied to the range highlight bar. Set non-zero for a frosted-glass treatment on the bar itself, independent of the surface blur.

  • --calendar-backdrop-blurblur0px
    components.calendar.backdropBlur

    Backdrop blur applied to the calendar surface. Set non-zero for a frosted-glass treatment.

  • --card-shadowshadowvar(--shadow-raised)
    components.card.shadow

    Card elevation.

  • --card-backdrop-blurblur0px
    components.card.backdropBlur

    Backdrop blur applied behind a translucent card. Set non-zero for glass.

  • --code-block-backdrop-blurblur0px
    components.codeBlock.backdropBlur

    Backdrop blur applied to the code-block surface. Set non-zero for a frosted-glass treatment.

  • --command-shadowshadowvar(--shadow-overlay)
    components.command.shadow

    Command palette elevation.

  • --command-backdrop-blurblur0px
    components.command.backdropBlur

    Backdrop blur on the command palette container. Set non-zero for a frosted-glass overlay.

  • --dialog-overlay-backdrop-blurblur0px
    components.dialog.overlayBackdropBlur

    Backdrop blur applied to the modal scrim. Set non-zero so the page content behind the dialog is frosted by the overlay itself.

  • --dialog-shadowshadowvar(--shadow-modal)
    components.dialog.shadow

    Dialog elevation.

  • --dialog-backdrop-blurblur0px
    components.dialog.backdropBlur

    Backdrop blur applied behind a translucent dialog.

  • --drawer-shadowshadowvar(--shadow-overlay)
    components.drawer.shadow

    Drawer elevation.

  • --drawer-backdrop-blurblur0px
    components.drawer.backdropBlur

    Backdrop blur behind translucent drawer.

  • --color-picker-shadowshadowvar(--shadow-overlay)
    components.colorPicker.shadow

    ColorPicker panel elevation.

  • --menu-shadowshadowvar(--shadow-overlay)
    components.menu.shadow

    Menu surface elevation.

  • --menu-backdrop-blurblur0px
    components.menu.backdropBlur

    Backdrop blur applied behind a translucent dropdown menu.

  • --empty-state-backdrop-blurblur0px
    components.emptyState.backdropBlur

    Backdrop blur applied to the empty-state surface. Set non-zero for a frosted-glass treatment.

  • --hover-card-shadowshadowvar(--shadow-overlay)
    components.hoverCard.shadow

    HoverCard elevation.

  • --hover-card-backdrop-blurblur0px
    components.hoverCard.backdropBlur

    Backdrop blur on the hover card. Set non-zero for a frosted-glass surface.

  • --input-group-backdrop-blurblur0px
    components.inputGroup.backdropBlur

    Backdrop blur applied to the input-group surface. Set non-zero for a frosted-glass treatment.

  • --input-otp-backdrop-blurblur0px
    components.inputOtp.backdropBlur

    Backdrop blur applied to the input-otp slot surface. Set non-zero for a frosted-glass treatment.

  • --input-backdrop-blurblur0px
    components.input.backdropBlur

    Backdrop blur applied to the input surface. Set non-zero for a frosted-glass treatment.

  • --menubar-content-shadowshadowvar(--shadow-overlay)
    components.menubarContent.shadow

    Menubar dropdown elevation.

  • --menubar-content-backdrop-blurblur0px
    components.menubarContent.backdropBlur

    Backdrop blur on the menubar dropdown content. Set non-zero for a frosted-glass overlay.

  • --navigation-menu-viewport-shadowshadowvar(--shadow-overlay)
    components.navigationMenuViewport.shadow

    Navigation menu viewport elevation.

  • --navigation-menu-viewport-backdrop-blurblur0px
    components.navigationMenuViewport.backdropBlur

    Backdrop blur on the navigation menu viewport. Set non-zero for a frosted-glass overlay.

  • --popover-shadowshadowvar(--shadow-overlay)
    components.popover.shadow

    Popover elevation.

  • --popover-backdrop-blurblur0px
    components.popover.backdropBlur

    Backdrop blur applied behind a translucent popover.

  • --progress-display-backdrop-blurblur0px
    components.progressDisplay.backdropBlur

    Backdrop blur applied to the progress-display log surface. Set non-zero for a frosted-glass treatment.

  • --sheet-shadowshadowvar(--shadow-modal)
    components.sheet.shadow

    Sheet elevation.

  • --sheet-backdrop-blurblur0px
    components.sheet.backdropBlur

    Backdrop blur applied behind a translucent sheet.

  • --sidebar-backdrop-blurblur0px
    components.sidebar.backdropBlur

    Backdrop blur applied to the sidebar surface. Set non-zero for a frosted-glass treatment.

  • --slider-thumb-shadowshadowvar(--shadow-raised)
    components.slider.thumbShadow

    Thumb drop shadow. Falls back to the global `--shadow-raised`.

  • --tabs-backdrop-blurblur0px
    components.tabs.backdropBlur

    Backdrop blur applied to the tab pill bar. Set non-zero (with a translucent muted color) for a frosted-glass tab strip.

  • --textarea-backdrop-blurblur0px
    components.textarea.backdropBlur

    Backdrop blur applied to the textarea surface. Set non-zero for a frosted-glass treatment.

  • --toast-shadowshadowvar(--shadow-spotlight)
    components.toast.shadow

    Toast elevation.

  • --toast-backdrop-blurblur0px
    components.toast.backdropBlur

    Backdrop blur on the toast surface. Set non-zero for a frosted-glass toast.

  • --toggle-backdrop-blurblur0px
    components.toggle.backdropBlur

    Backdrop blur applied to the toggle on hover and active (`data-[state=on]`). Set non-zero for a frosted-glass affordance, the resting state stays transparent.

  • --tooltip-shadowshadowvar(--shadow-overlay)
    components.tooltip.shadow

    Tooltip elevation.

  • --tooltip-backdrop-blurblur0px
    components.tooltip.backdropBlur

    Backdrop blur on the tooltip. Set non-zero for a frosted-glass tooltip.

MotionAnimation duration and easing.65
  • --accordion-durationdurationvar(--motion-standard-duration)
    components.accordion.duration

    Transition duration for accordion state changes.

  • --accordion-easingeasingvar(--motion-standard-easing)
    components.accordion.easing

    Transition easing for accordion state changes.

  • --badge-durationdurationvar(--motion-standard-duration)
    components.badge.duration

    Transition duration for badge state changes.

  • --badge-easingeasingvar(--motion-standard-easing)
    components.badge.easing

    Transition easing for badge state changes.

  • --button-durationdurationvar(--motion-standard-duration)
    components.button.duration

    Transition duration for button state changes.

  • --button-easingeasingvar(--motion-standard-easing)
    components.button.easing

    Transition easing for button state changes.

  • --card-durationdurationvar(--motion-standard-duration)
    components.card.duration

    Transition duration for card state changes.

  • --card-easingeasingvar(--motion-standard-easing)
    components.card.easing

    Transition easing for card state changes.

  • --checkbox-durationdurationvar(--motion-standard-duration)
    components.checkbox.duration

    Transition duration for checkbox state changes.

  • --checkbox-easingeasingvar(--motion-standard-easing)
    components.checkbox.easing

    Transition easing for checkbox state changes.

  • --command-item-durationdurationvar(--motion-standard-duration)
    components.commandItem.duration

    Transition duration for command-item state changes.

  • --command-item-easingeasingvar(--motion-standard-easing)
    components.commandItem.easing

    Transition easing for command-item state changes.

  • --dialog-durationdurationvar(--motion-standard-duration)
    components.dialog.duration

    Transition duration for dialog state changes.

  • --dialog-easingeasingvar(--motion-standard-easing)
    components.dialog.easing

    Transition easing for dialog state changes.

  • --drawer-durationdurationvar(--motion-standard-duration)
    components.drawer.duration

    Transition duration for drawer state changes.

  • --drawer-easingeasingvar(--motion-standard-easing)
    components.drawer.easing

    Transition easing for drawer state changes.

  • --color-picker-durationdurationvar(--motion-standard-duration)
    components.colorPicker.duration

    Transition duration for color-picker state changes.

  • --color-picker-easingeasingvar(--motion-standard-easing)
    components.colorPicker.easing

    Transition easing for color-picker state changes.

  • --menu-durationdurationvar(--motion-standard-duration)
    components.menu.duration

    Transition duration for menu state changes.

  • --menu-easingeasingvar(--motion-standard-easing)
    components.menu.easing

    Transition easing for menu state changes.

  • --menu-item-durationdurationvar(--motion-standard-duration)
    components.menuItem.duration

    Transition duration for menu-item state changes.

  • --menu-item-easingeasingvar(--motion-standard-easing)
    components.menuItem.easing

    Transition easing for menu-item state changes.

  • --dropzone-durationdurationvar(--motion-standard-duration)
    components.dropzone.duration

    Transition duration for dropzone state changes.

  • --dropzone-easingeasingvar(--motion-standard-easing)
    components.dropzone.easing

    Transition easing for dropzone state changes.

  • --file-upload-durationdurationvar(--motion-standard-duration)
    components.fileUpload.duration

    Transition duration for file-upload state changes.

  • --file-upload-easingeasingvar(--motion-standard-easing)
    components.fileUpload.easing

    Transition easing for file-upload state changes.

  • --hover-card-durationdurationvar(--motion-standard-duration)
    components.hoverCard.duration

    Transition duration for hover-card state changes.

  • --hover-card-easingeasingvar(--motion-standard-easing)
    components.hoverCard.easing

    Transition easing for hover-card state changes.

  • --image-transition-durationduration300ms
    components.image.transitionDuration

    Duration of the fade-in transition when an image finishes loading and of the crossfade when the `src` changes. Set to `0ms` to disable animation.

  • --input-otp-durationdurationvar(--motion-standard-duration)
    components.inputOtp.duration

    Transition duration for input-otp state changes.

  • --input-otp-easingeasingvar(--motion-standard-easing)
    components.inputOtp.easing

    Transition easing for input-otp state changes.

  • --input-durationdurationvar(--motion-standard-duration)
    components.input.duration

    Transition duration for input state changes.

  • --input-easingeasingvar(--motion-standard-easing)
    components.input.easing

    Transition easing for input state changes.

  • --kbd-durationdurationvar(--motion-standard-duration)
    components.kbd.duration

    Transition duration for kbd state changes.

  • --kbd-easingeasingvar(--motion-standard-easing)
    components.kbd.easing

    Transition easing for kbd state changes.

  • --menubar-durationdurationvar(--motion-standard-duration)
    components.menubar.duration

    Transition duration for menubar state changes.

  • --menubar-easingeasingvar(--motion-standard-easing)
    components.menubar.easing

    Transition easing for menubar state changes.

  • --menubar-content-durationdurationvar(--motion-standard-duration)
    components.menubarContent.duration

    Transition duration for menubar-content state changes.

  • --menubar-content-easingeasingvar(--motion-standard-easing)
    components.menubarContent.easing

    Transition easing for menubar-content state changes.

  • --menubar-item-durationdurationvar(--motion-standard-duration)
    components.menubarItem.duration

    Transition duration for menubar-item state changes.

  • --menubar-item-easingeasingvar(--motion-standard-easing)
    components.menubarItem.easing

    Transition easing for menubar-item state changes.

  • --mini-calendar-durationdurationvar(--motion-standard-duration)
    components.miniCalendar.duration

    Transition duration for mini-calendar state changes.

  • --mini-calendar-easingeasingvar(--motion-standard-easing)
    components.miniCalendar.easing

    Transition easing for mini-calendar state changes.

  • --navigation-menu-durationdurationvar(--motion-standard-duration)
    components.navigationMenu.duration

    Transition duration for navigation-menu state changes.

  • --navigation-menu-easingeasingvar(--motion-standard-easing)
    components.navigationMenu.easing

    Transition easing for navigation-menu state changes.

  • --popover-durationdurationvar(--motion-standard-duration)
    components.popover.duration

    Transition duration for popover state changes.

  • --popover-easingeasingvar(--motion-standard-easing)
    components.popover.easing

    Transition easing for popover state changes.

  • --radio-group-durationdurationvar(--motion-standard-duration)
    components.radioGroup.duration

    Transition duration for radio-group state changes.

  • --radio-group-easingeasingvar(--motion-standard-easing)
    components.radioGroup.easing

    Transition easing for radio-group state changes.

  • --select-durationdurationvar(--motion-standard-duration)
    components.select.duration

    Transition duration for select state changes.

  • --select-easingeasingvar(--motion-standard-easing)
    components.select.easing

    Transition easing for select state changes.

  • --sheet-durationdurationvar(--motion-standard-duration)
    components.sheet.duration

    Transition duration for sheet state changes.

  • --sheet-easingeasingvar(--motion-standard-easing)
    components.sheet.easing

    Transition easing for sheet state changes.

  • --switch-durationdurationvar(--motion-standard-duration)
    components.switch.duration

    Transition duration for switch state changes.

  • --switch-easingeasingvar(--motion-standard-easing)
    components.switch.easing

    Transition easing for switch state changes.

  • --tabs-durationdurationvar(--motion-standard-duration)
    components.tabs.duration

    Transition duration for tabs state changes.

  • --tabs-easingeasingvar(--motion-standard-easing)
    components.tabs.easing

    Transition easing for tabs state changes.

  • --textarea-durationdurationvar(--motion-standard-duration)
    components.textarea.duration

    Transition duration for textarea state changes.

  • --textarea-easingeasingvar(--motion-standard-easing)
    components.textarea.easing

    Transition easing for textarea state changes.

  • --toggle-durationdurationvar(--motion-standard-duration)
    components.toggle.duration

    Transition duration for toggle state changes.

  • --toggle-easingeasingvar(--motion-standard-easing)
    components.toggle.easing

    Transition easing for toggle state changes.

  • --tooltip-durationdurationvar(--motion-standard-duration)
    components.tooltip.duration

    Transition duration for tooltip state changes.

  • --tooltip-easingeasingvar(--motion-standard-easing)
    components.tooltip.easing

    Transition easing for tooltip state changes.

  • --tree-durationdurationvar(--motion-standard-duration)
    components.tree.duration

    Transition duration for tree state changes.

  • --tree-easingeasingvar(--motion-standard-easing)
    components.tree.easing

    Transition easing for tree state changes.

StateHover / pressed / disabled overlays.2
  • --alert-tint-bg-amountopacity12%
    components.alert.tintBgAmount

    Accent percentage mixed into the tinted-variant background. Higher values produce more saturated bg fills.

  • --alert-tint-border-amountopacity40%
    components.alert.tintBorderAmount

    Accent percentage mixed into the tinted-variant border. Usually higher than the bg amount so the edge stays defined.

05Tailwind utilitiesAuto-generated

Consume tokens via Tailwind utilities

Every namespaced component token in the registry is exposed as a real Tailwind v4 utility. The plugin reads the token’s namespace (color, radius, or shadow) and emits the corresponding theme.extend.<bucket> entry, so bg-{name}, text-{name}, rounded-{name}, and shadow-{name} are all generated for you. No arbitrary-value workaround like bg-[var(--token)] is needed, and these utilities scale with the theme because they resolve to var(--<token>) at paint time.

Use these utilities everywhere instead of hardcoded var(--…) references. They’re shorter to write, safer (twMerge knows about them), and the docs site can link the source back to the registry entry.

Prefix rules

The Tailwind prefix is determined by the token’s value type, not its name. The token’s name (or its alias if one is set) becomes the suffix.

Token typeTailwind utilitiesExample tokenGenerated
colorbg-…, text-…, border-…, ring-…, fill-…, stroke-…, outline-…, decoration-…, from-…/via-…/to-…, accent-…, caret-…, placeholder-…--calendar-pillbg-calendar-pill, text-calendar-pill, …
radiusrounded-…--card-radius (alias card)rounded-card
shadowshadow-…--card-shadow (alias card)shadow-card
sizew-…, h-…, p-…, m-…, gap-…, …--switch-track-widthw-switch-track-width, …
font-familyfont-…--button-font-family (alias button)font-button
font-sizetext-…--button-font-size (alias button)text-button
motion (duration)duration-…--card-duration (alias card)duration-card
motion (easing)ease-…--card-easing (alias card)ease-card
opacityopacity-…--button-disabled-opacity (alias button)opacity-button
blurblur-…, backdrop-blur-…--card-backdrop-blur (alias card)backdrop-blur-card, blur-card
border-widthborder-w-…--card-border-width (alias card)border-w-card
border-styleborder-style-…--card-border-style (alias card)border-style-card
font-weightfont-weight-…--button-font-weight (alias button)font-weight-button
line-heightleading-…--button-line-height (alias button)leading-button
letter-spacingtracking-…--button-letter-spacing (alias button)tracking-button
text-transformcase-…--button-text-transform (alias button)case-button
corner-shapecorner-…--card-corner-shape (alias card)corner-card

Every Layer-2 token type now carries a tailwindNamespace that maps to a utility prefix. The seven longer-form prefixes (border-w, border-style, font-weight, leading, tracking, case, corner) are registered through matchUtilities rather than the standard theme.extend path, either because the underlying CSS property has no native Tailwind theme bucket or because the bucket’s derived prefix would collide with an existing namespace (fontWeight and fontFamily both produce font-…).

Suffix is the token name (or its alias)

Every component token’s full name is <component>-<slot> and that’s the default utility suffix. A token can declare an explicit alias in defineComponent to choose a shorter or differently-grouped name (the card and tabs radius tokens do this so they emit rounded-card rather than the verbose rounded-card-radius).

tssrc/components/calendar/tokens.ts24 lines
defineComponent('calendar', {
radius: {
  default: 'var(--radius-control)',
  description: 'Calendar day button corner radius.',
  alias: 'calendar',                  // → utility `rounded-calendar`
},
slots: {
  'pill': {
    default: 'var(--primary)',
    description: 'Selected day pill background.',
                                      // no alias → utility `bg-calendar-pill`
  },
  'pill-foreground': {
    default: 'var(--primary-foreground)',
    description: 'Selected day pill text.',
                                      // → utility `text-calendar-pill-foreground`
  },
  'range-bar': {
    default: 'color-mix(in oklch, var(--primary) 15%, transparent)',
    description: 'Range highlight bar color.',
                                      // → utility `bg-calendar-range-bar`
  },
},
});

Idiomatic component code

Use the token’s utility wherever a hardcoded color or radius would have gone. The utility resolves through the registry’s fallback chain (component default → layer 1 role → layer 0 scalar), so a theme that sets none of them still gets a sensible value.

tsxcalendar.tsx8 lines
<button
className={cn(
  'corner-themed inline-flex size-8 items-center justify-center rounded-calendar',
  'hover:bg-calendar-day-hover hover:text-calendar-day-hover-foreground',
  selected && 'bg-calendar-pill text-calendar-pill-foreground',
  today && !selected && 'bg-calendar-today text-calendar-today-foreground',
)}
/>
tsxslider.tsx3 lines
<div className="bg-slider-track h-[var(--slider-track-height)] rounded-slider" />
<div className="bg-slider-fill h-[var(--slider-track-height)] rounded-slider" />
<input className="bg-slider-thumb shadow-slider-thumb border-slider-thumb-border" />

Cross-component reuse

A utility from one component is fair game in another. A custom sidebar that pairs with the calendar can drop bg-calendar-range-bar to pick up the same tint without duplicating the calc. A status pill that wants to mirror the card’s elevation uses shadow-card. The utilities are global Tailwind classes; the <component>- prefix is namespacing, not a scoping mechanism.

Themeable by construction

Because every utility resolves to var(--<token>), a theme’s components.<name> override propagates everywhere the utility is used, without rebuilding. bg-calendar-pill written once in the component code becomes whatever a theme sets pill to, in light mode, dark mode, scoped subtree, or anywhere applyTheme runs.

This is the canonical pattern across the library, every new component should expose its color, radius, and shadow surfaces as tokens and consume them through the generated utilities. Avoid bg-[var(--…)] arbitrary values, they bypass the registry’s type inference and the docs site can’t surface them in the token table.