---
url: "https://vueda.dev/v3/reference/theming/keys.md"
title: "Theme keys"
---

# Theme keys

Theme keys are the per-slot Tailwind class definitions shipped by `@vueda/theme/vueda-tailwind`. Underscore-prefixed entries are composition primitives consumed by leaf keys via `composes`.

## [controls](/v3/reference/theming/keys/family/controls.md)

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [_ButtonBase](/v3/reference/theming/keys/_ButtonBase.md) | primitive | 1 | The shared button shell: inline-flex layout, 2px control radius, sm font-medium type, default 16px icon sizing, focus-visible ring, and the system-wide disabled treatment. Height and horizontal padding are omitted; the leaf picks a tier from `base.css § Control sizing`. |
| [_ButtonDefault](/v3/reference/theming/keys/_ButtonDefault.md) | primitive | 1 | The `--primary` fill keeps the canonical brand blue in both modes with dark `--primary-foreground` labels. Hover and active use opaque white mixes through `--primary-hover` and `--primary-active`. Pair sparingly with neutral pressed-state recipes like [Toggle.root](/v3/reference/theming/keys/Toggle.md#theme-key-Toggle-root) so a CTA and an active toggle do not compete. |
| [_ButtonDestructive](/v3/reference/theming/keys/_ButtonDestructive.md) | primitive | 1 | The `--destructive` fill: solid destructive background in light mode, 60%-mix in dark so the chip stays legible against `--background` at rest, destructive-foreground text, and a destructive-tinted focus outline. Hover and active swap to the `--destructive-hover` / `--destructive-active` lightness steps (darker in light mode, lighter in dark). Reserve for actions that delete user data or are otherwise irreversible; menu / list destructive items use a colour-only recipe. |
| [_ButtonOutline](/v3/reference/theming/keys/_ButtonOutline.md) | primitive | 1 | The neutral-chip recipe: DPR-aware hairline at `--border-strong` that darkens to `--foreground` on hover (a chip that still reads as a control without outweighing the one filled action beside it), `--background` fill, and an `--accent` hover swap with an `--accent-active` pressed step. The hairline paints as an inset shadow rather than a layout border, so outlined buttons match fill-button intrinsic width while using the same chromatic-fringing mitigation as inputs. Hover / active use the mode-aware `--accent` tokens in both light and dark, so the lightness step is identical in either mode; only the *rest* fill differs (dark mode keeps the input-tint convention, `bg-input/30`, so an outlined chip reads input-like at rest while keeping its stronger edge). The earlier dark-mode `bg-input/50` hover topped out near the rest lightness because `--input` is itself dark, leaving the smaller sizes with no perceptible state change. Reused by chip-shaped leaves that want the button shape without a fill, including [FileUpload.trigger](/v3/reference/theming/keys/FileUpload.md#theme-key-FileUpload-trigger) and the calendar prev / next buttons, so the hover and pressed steps reach those surfaces too. |
| [_ButtonSecondary](/v3/reference/theming/keys/_ButtonSecondary.md) | primitive | 1 | The `--secondary` surface fill: solid secondary background, secondary-foreground text. Hover and active swap to the `--secondary-hover` / `--secondary-active` lightness steps (darker in light mode, lighter in dark); the previous `/80` alpha hover was near-invisible because secondary sits almost on the page surface. Use for actions that sit beside a CTA without stealing it; a row of secondary buttons reads as a control cluster rather than a set of competing CTAs. |
| [_ButtonGhost](/v3/reference/theming/keys/_ButtonGhost.md) | primitive | 1 | The transparent-at-rest recipe: no fill or edge until hover, when `--accent` paints the background, with an `--accent-active` pressed step (dark mode: half-strength `accent/50` hover, full `accent` active). Shared by [CalendarCellTrigger.root](/v3/reference/theming/keys/CalendarCellTrigger.md#theme-key-CalendarCellTrigger-root) and [RangeCalendarCellTrigger.root](/v3/reference/theming/keys/RangeCalendarCellTrigger.md#theme-key-RangeCalendarCellTrigger-root) so day buttons in a calendar grid keep one consistent hover and press affordance; dark-mode hover is half-strength accent so the day button does not over-saturate the popover surface. |
| [_ButtonLink](/v3/reference/theming/keys/_ButtonLink.md) | primitive | 1 | The inline-text recipe uses `--primary-text`, a contrast-adjusted blue separate from the primary fill. Hover adds an underline with a 4px offset; active uses `--primary-text-active`. The `link` emphasis of [Button](/v3/reference/theming/keys/Button.md) drops the control height and horizontal padding so the affordance does not break surrounding line metrics. |
| [_ButtonPrimaryOutline](/v3/reference/theming/keys/_ButtonPrimaryOutline.md) | primitive | 1 | The primary outline recipe pairs a DPR-aware `--primary` hairline with readable `--primary-text` over `--background` (dark mode keeps `bg-input/30`). Hover and active add a primary tint (`/10` then `/15`) while the label retains its contrast-adjusted blue. The inset hairline matches filled-button dimensions. |
| [_ButtonDestructiveOutline](/v3/reference/theming/keys/_ButtonDestructiveOutline.md) | primitive | 1 | The destructive neutral-chip recipe: a DPR-aware `--destructive` hairline and `--destructive` text over the `--background` fill (dark mode keeps the outline-family `bg-input/30` rest tint). The inset hairline avoids layout-width drift against fill buttons and uses the same saturated-edge fringing mitigation as inputs. Hover and active wash a low-alpha `--destructive` tint behind the label (`/10` then `/15`) so the chip warms toward danger on interaction without becoming a filled destructive CTA, and focus swaps to the destructive outline. Use for a reversible-but-cautionary action that should not carry the weight of a filled [\_ButtonDestructive](/v3/reference/theming/keys/_ButtonDestructive.md) (a low-emphasis delete in a toolbar or row). |
| [_ButtonPrimaryGhost](/v3/reference/theming/keys/_ButtonPrimaryGhost.md) | primitive | 1 | The transparent-at-rest primary recipe uses `--primary-text` with no fill or edge until hover, when a primary tint paints the background (`/10` hover, `/15` active). The lowest-weight accented affordance, for an emphasized action inside a dense cluster where an outline or fill would be too heavy. |
| [_ButtonDestructiveGhost](/v3/reference/theming/keys/_ButtonDestructiveGhost.md) | primitive | 1 | The transparent-at-rest destructive recipe: `--destructive` text with no fill or edge until hover, when a low-alpha `--destructive` tint paints the background (`/10` hover, `/15` active) and focus swaps to the destructive outline. The lowest-weight destructive affordance, for a cautionary action inside a dense cluster (a row's delete glyph, a menu-adjacent strip) where even an outlined chip would be too heavy. |
| [_ButtonNeutralLink](/v3/reference/theming/keys/_ButtonNeutralLink.md) | primitive | 1 | The neutral inline-text recipe: `--foreground` text with a 4px underline offset that appears on hover only; active eases the label to 70% opacity. Unlike [\_ButtonLink](/v3/reference/theming/keys/_ButtonLink.md), it does not tint the text with `--primary`, so a row of quiet text actions does not spread the earned accent across every secondary affordance. The `link` emphasis of [Button](/v3/reference/theming/keys/Button.md) also drops the control height and horizontal padding. |
| [_ButtonDestructiveLink](/v3/reference/theming/keys/_ButtonDestructiveLink.md) | primitive | 1 | The destructive inline-text recipe: `--destructive` text with a 4px underline offset that appears on hover only; active deepens the label to `--destructive-active`. The text-weight counterpart to [\_ButtonDestructive](/v3/reference/theming/keys/_ButtonDestructive.md), for a cautionary action that must read inline with prose rather than as a control. |
| [Button](/v3/reference/theming/keys/Button.md) | key | 1 | The pressable root. Composes [\_ButtonBase.root](/v3/reference/theming/keys/_ButtonBase.md#theme-key-_ButtonBase-root) plus the `_Button*` primitive for the resolved (tone, emphasis) cell (see `controls/button/buttonVariant.js`), then layers the per-size height / padding pair from `base.css § Control sizing` (or `size-vueda-control*` for icon-only sizes). The `link` emphasis skips the control-height block and goes inline. The `data-state=cooldown` state (set by the component while a one-shot action is recovering) mutes the label to `--muted-foreground` and suppresses hover so a recently-clicked button reads as "wait" without changing layout. |
| [ButtonGroup](/v3/reference/theming/keys/ButtonGroup.md) | key | 1 | The segmented-cluster shell. Strips inner radii between adjacent children so a row (or column when `orientation` is `vertical`) of buttons, inputs, and Select triggers reads as one slab. Outline buttons use DPR-aware inset hairlines rather than layout borders, so adjacent outline buttons overlap by exactly `--vueda-hairline-width` to share one visible seam. Focus z-index promotion keeps the focus ring from being clipped by neighbours. Nested [ButtonGroup](/v3/reference/theming/keys/ButtonGroup.md) children retain an 8px gap. The icon-only-stays-seamless / text-or-mixed-keeps-seams rule is applied by the component, not this slot. |
| [ButtonGroupSeparator](/v3/reference/theming/keys/ButtonGroupSeparator.md) | key | 1 | The explicit divider used inside a [ButtonGroup](/v3/reference/theming/keys/ButtonGroup.md) when the segmented cluster needs a visible split between text segments. Uses the `--input` token so the divider matches the surrounding hairline color in both modes, and stretches to the group's cross-axis. |
| [ButtonGroupText](/v3/reference/theming/keys/ButtonGroupText.md) | key | 1 | The static-label chip used to join readable copy ("of", "to", a unit suffix) into a [ButtonGroup](/v3/reference/theming/keys/ButtonGroup.md). Wears the button shape (2px control radius, hairline edge) but sits on `--muted` so it does not read as pressable; padding picks 16px to match the default button's `px-vueda-control-px` baseline. |
| [Toggle](/v3/reference/theming/keys/Toggle.md) | key | 1 | The on/off button shell. Reads as a Button shape (control radius, `text-sm font-medium`, 16px icon) but the pressed state (`data-state=on`) paints `--accent` instead of `--primary` so a pressed toggle does not compete with a CTA on the same surface. Two variants (default, `outline`) and three size tiers ride the shared `h-vueda-control*` scale; the `outline` variant wears the same `hairline-border-strong` edge, darkening to `hairline-foreground` on hover, as [\_ButtonOutline.root](/v3/reference/theming/keys/_ButtonOutline.md#theme-key-_ButtonOutline-root) (an inset box-shadow, not a layout border, so it DPR-tracks and matches intrinsic width), and `min-w-vueda-control*` keeps a single-icon toggle square. Disabled items use `--disabled-foreground` ink and a `--border` outline; pressed items keep a `--disabled` fill while unpressed items stay transparent. |
| [ToggleGroup](/v3/reference/theming/keys/ToggleGroup.md) | key | 1 | The row layout for a set of [ToggleGroupItem.root](/v3/reference/theming/keys/ToggleGroupItem.md#theme-key-ToggleGroupItem-root) children. The `--gap` custom property is driven by the consumer's `spacing` prop, which lets the same group render as a gapped row or (at `spacing=0`) as a segmented control where child items drop their outer radii and shared borders. The `group/toggle-group` Tailwind group label lets items react to group-level state. |
| [ToggleGroupItem](/v3/reference/theming/keys/ToggleGroupItem.md) | key | 1 | The individual item inside a [ToggleGroup](/v3/reference/theming/keys/ToggleGroup.md). Mirrors the [Toggle.root](/v3/reference/theming/keys/Toggle.md#theme-key-Toggle-root) recipe (same variants, sizes, and accent-pressed treatment) and adds segmented behaviour: when the host group sets `data-spacing=0`, items drop their per-item radius and shadow and re-add them on the first and last child so the cluster reads as one slab. `min-w-0 shrink-0 px-3` overrides the Toggle minimum width so a label-bearing item grows to its content rather than staying square. Disabled items use `--disabled-foreground` ink and a `--border` outline; pressed items keep a `--disabled` fill while unpressed items stay transparent. |
| [FileUpload](/v3/reference/theming/keys/FileUpload.md) | key | 3 | The outer container. In inline-trigger mode this is a tight flex column wrapping the picker button plus optional helper text; in `dropzone` mode it grows into a dashed-border target (2px input-coloured dashes, 6 spacing pad, large radius) that highlights with a primary-tinted fill when `dragging`. The `disabled` state dims the whole region and switches the cursor; the inner trigger still picks up its own disabled treatment from [\_ButtonBase.root](/v3/reference/theming/keys/_ButtonBase.md#theme-key-_ButtonBase-root). |
| [Input](/v3/reference/theming/keys/Input.md) | key | 1 | The single-line input shell and the reference recipe for the input-shaped family. Carbon-style field edge: a `bg-field` fill on a bottom-only `field-line` at rest, a `hover:bg-field-hover` step, the same bottom-only line recoloured to `--ring` on focus, `--warning` under `data-warning`, and `--destructive` on invalid while the separate focus ring carries the full perimeter, control-height tier from `base.css § Control sizing`, and the cross-cutting `aria-invalid` swap that paints `--destructive` on the border and ring. Read-only drops the fill and softens the line to `--border`, so a read-only field reads as display rather than editable; the file-picker variant (`<input type=file>`) inherits `file:` classes so a bare file input reads as the same chip family as a button. |
| [Textarea](/v3/reference/theming/keys/Textarea.md) | key | 1 | The multi-line counterpart to [Input.root](/v3/reference/theming/keys/Input.md#theme-key-Input-root). Same field fill, bottom `field-line`, recoloured focus and `aria-invalid` line, and read-only recipe; grows vertically via `field-sizing: content` so the field expands with the typed text rather than holding a fixed `min-height`. Horizontal padding moves to `px-3 py-2` (both axes) because a textarea's content box is two-dimensional. |
| [InputGroup](/v3/reference/theming/keys/InputGroup.md) | key | 1 | The shell that joins an input (or textarea) with one or more addons (icon, button, kbd, helper line) into a single bordered chip. The group, not its children, owns the hairline and focus ring: child controls strip their own chrome (see [InputGroupInput](/v3/reference/theming/keys/InputGroupInput.md) / [InputGroupTextarea](/v3/reference/theming/keys/InputGroupTextarea.md)) and the group reacts to `focus-visible` on any `[data-slot=input-group-control]` and to `aria-invalid` on any tagged child via `:has(...)` selectors. Inline addons (`align=inline-start` / `inline-end`) stay on a single row at `h-vueda-control`; block addons (`align=block-start` / `block-end`) stack and flip the row to `flex-col` with auto height, so the same shell supports left/right glyphs and top/bottom helper rows. |
| [InputGroupAddon](/v3/reference/theming/keys/InputGroupAddon.md) | key | 1 | The addon slot inside an [InputGroup.root](/v3/reference/theming/keys/InputGroup.md#theme-key-InputGroup-root). `align` picks one of four placements: `inline-start` / `inline-end` for icon, kbd, or button content flush against the input edge, and `block-start` / `block-end` for helper-text rows stacked above or below the input. Negative-margin hooks (`has-[>button]:ml-[-0.45rem]`, `has-[>kbd]:ml-[-0.35rem]`) tighten interior padding when the addon hosts a button or kbd so the addon does not visually balloon. Inherits `--muted-foreground` text so the addon reads as chrome, not as content; dimmed in lockstep with the group when the host carries `data-disabled=true`. |
| [InputGroupInput](/v3/reference/theming/keys/InputGroupInput.md) | key | 1 | The text-input child inside an [InputGroup.root](/v3/reference/theming/keys/InputGroup.md#theme-key-InputGroup-root). Strips its own border, shadow, and focus ring so the surrounding group owns the chrome; flexes to fill the remaining row, and overrides the standalone [Input](/v3/reference/theming/keys/Input.md) dark-mode tint with `dark:bg-transparent` so the group's tint is the only one painted. The important shadow reset suppresses the standalone bottom line and its focus and invalid variants, keeping the group as the only edge in every state. |
| [InputGroupTextarea](/v3/reference/theming/keys/InputGroupTextarea.md) | key | 1 | The textarea child inside an [InputGroup.root](/v3/reference/theming/keys/InputGroup.md#theme-key-InputGroup-root). Same chrome-strip recipe as [InputGroupInput.root](/v3/reference/theming/keys/InputGroupInput.md#theme-key-InputGroupInput-root) plus `resize-none` so the textarea grows with content rather than offering a corner drag handle that would fight the group's shared shell. |
| [InputGroupText](/v3/reference/theming/keys/InputGroupText.md) | key | 1 | The inline-text addon inside an [InputGroup.root](/v3/reference/theming/keys/InputGroup.md#theme-key-InputGroup-root): helper labels, prefix / suffix copy, unit markers. Renders at sm size on `--muted-foreground` with 16px icons so the addon reads as chrome rather than as input content. |
| [InputGroupButton](/v3/reference/theming/keys/InputGroupButton.md) | key | 1 | Pressable addon inside an [InputGroup.root](/v3/reference/theming/keys/InputGroup.md#theme-key-InputGroup-root). Sized smaller than a standalone [Button.root](/v3/reference/theming/keys/Button.md#theme-key-Button-root) (`xs`, `sm`, plus `icon-xs` / `icon-sm`) so the button fits inside the input shell without breaking the row's `h-vueda-control` baseline. Shadow is suppressed because the group already carries `shadow-vueda-control`; an inset button drawing its own shadow would double-paint at the addon edge. The `xs` and `icon-xs` tiers use a tighter `rounded-[calc(var(--radius)-5px)]` so a 24px button reads as a chip inside a 32px shell rather than a miniature slab. |
| [InputOTP](/v3/reference/theming/keys/InputOTP.md) | key | 1 | The container for character groups and separators. The `group/input-otp` marker lets visible slots read invalid and disabled state from the native input. Each active slot owns its focus ring. Disabled inputs use disabled text colors without fading the container or separator. |
| [InputOTPGroup](/v3/reference/theming/keys/InputOTPGroup.md) | key | 1 | A contiguous run of [InputOTPSlot.root](/v3/reference/theming/keys/InputOTPSlot.md#theme-key-InputOTPSlot-root) cells (e.g. the three digits before and after a `-` in a 3-3 split code). Pure flex row; the visual joining comes from the slots themselves overlapping their hairlines, so a group is just a layout marker that separates one run from the next when a code is split. |
| [InputOTPSlot](/v3/reference/theming/keys/InputOTPSlot.md) | key | 1 | A single character cell. Borders use `--input` at the `border-hairline` width, and every non-first slot pulls left by exactly `--vueda-hairline-width` so adjacent slots overlap one device pixel and read as one painted line rather than doubling at the seam. The active slot promotes `z-10` and swaps to `border-ring` so the run's active position outlines cleanly above its neighbours; `aria-invalid="true"` on the containing native input swaps every slot border and the active focus ring to `--destructive`. The active slot owns the focus ring, including across separated groups. Direct slot-level `aria-invalid` remains supported. First / last children round only their outer corners so the run reads as one chip. When the containing OTP input is disabled, slots use `--disabled` fill, `--disabled-foreground` ink, and `--border` edges with no shadow, including active or invalid slots. |
| [NativeSelect](/v3/reference/theming/keys/NativeSelect.md) | key | 1 | The native `<select>` styled to match the VUEDA control shell. Used where a JS-driven [SelectTrigger](/v3/reference/theming/keys/SelectTrigger.md) or [ComboboxTrigger](/v3/reference/theming/keys/ComboboxTrigger.md) would be overkill: short fixed enums on touch devices, environments where native menu UX is preferred. Same control-height, `bg-field` fill, bottom `field-line`, recoloured focus line, and `aria-invalid` shell as [Input.root](/v3/reference/theming/keys/Input.md#theme-key-Input-root), with the shared `hover:bg-field-hover` step. `appearance-none` strips the native chevron and `pr-9` reserves space for the icon the consumer paints. The option surface inside the dropdown is owned by the OS; deep styling lives in the JS-driven pickers. |
| [NativeSelectOptGroup](/v3/reference/theming/keys/NativeSelectOptGroup.md) | key | 1 | The native `<optgroup>` tinted to inherit the popover surface so the system's native dropdown reads as the same surface family as VUEDA's JS-driven pickers. The OS owns layout and the divider between groups; this slot only paints the background. |
| [NativeSelectOption](/v3/reference/theming/keys/NativeSelectOption.md) | key | 1 | The native `<option>` tinted to inherit the popover surface. Per-row layout, highlight, and check indicator are all owned by the OS; for richer option chrome (icons, sub-labels, highlighted-vs-checked distinction) use [SelectItem](/v3/reference/theming/keys/SelectItem.md) or [ComboboxItem](/v3/reference/theming/keys/ComboboxItem.md). |
| [NumberField](/v3/reference/theming/keys/NumberField.md) | key | 1 | The outer grid wrapper for a numeric input with optional increment / decrement steppers. Pure layout (`grid gap-1.5`) so a label, the input, and any messaging stack at the standard form rhythm. The visible input chrome lives on [NumberFieldInput.root](/v3/reference/theming/keys/NumberFieldInput.md#theme-key-NumberFieldInput-root); the absolute-positioned steppers are anchored by [NumberFieldContent.root](/v3/reference/theming/keys/NumberFieldContent.md#theme-key-NumberFieldContent-root). |
| [NumberFieldContent](/v3/reference/theming/keys/NumberFieldContent.md) | key | 1 | The inner wrapper that hosts [NumberFieldInput.root](/v3/reference/theming/keys/NumberFieldInput.md#theme-key-NumberFieldInput-root) plus the optional stepper buttons. Reserves horizontal pad on the input (`pl-5` / `pr-5`) only when [NumberFieldDecrement](/v3/reference/theming/keys/NumberFieldDecrement.md) / [NumberFieldIncrement](/v3/reference/theming/keys/NumberFieldIncrement.md) are actually rendered, so a stepperless number field keeps the standard control padding and a stepper-bearing one never crashes a digit string into the glyphs. `relative` is the anchor for the absolute-positioned steppers. |
| [NumberFieldInput](/v3/reference/theming/keys/NumberFieldInput.md) | key | 1 | The numeric `<input>` itself. Same hairline + focus shell as [Input.root](/v3/reference/theming/keys/Input.md#theme-key-Input-root), but renders in mono + tabular numerals and centres the value so digit widths stay stable while a stepper cycles through different-length numbers. Mono is the segment-as-token treatment shared with the date / time fields. |
| [NumberFieldDecrement](/v3/reference/theming/keys/NumberFieldDecrement.md) | key | 1 | The decrement stepper anchored to the left edge of [NumberFieldInput.root](/v3/reference/theming/keys/NumberFieldInput.md#theme-key-NumberFieldInput-root). Absolutely positioned so the stepper overlays the input rather than competing for row width; `disabled:opacity-20` reads as "at the lower bound" — a stronger fade than the standard 50% control-disabled treatment so a temporarily unusable stepper does not look like a fully disabled field. |
| [NumberFieldIncrement](/v3/reference/theming/keys/NumberFieldIncrement.md) | key | 1 | The increment stepper anchored to the right edge of [NumberFieldInput.root](/v3/reference/theming/keys/NumberFieldInput.md#theme-key-NumberFieldInput-root). Mirror of [NumberFieldDecrement.root](/v3/reference/theming/keys/NumberFieldDecrement.md#theme-key-NumberFieldDecrement-root); same overlay positioning and same upper-bound fade. |
| [DateField](/v3/reference/theming/keys/DateField.md) | key | 1 | The input-shaped shell hosting the editable date segments. Same hairline + focus + `aria-invalid` recipe as [Input.root](/v3/reference/theming/keys/Input.md#theme-key-Input-root), with the row of [DateFieldInput.root](/v3/reference/theming/keys/DateFieldInput.md#theme-key-DateFieldInput-root) segments laid out as flex items inside; sizes pick the standard `h-vueda-control*` tier from `base.css § Control sizing`. The read-only treatment swaps to `bg-muted/50` so a frozen date field reads as the same surface family as a read-only text input. |
| [DateFieldInput](/v3/reference/theming/keys/DateFieldInput.md) | key | 1 | A single editable date segment (year / month / day). Renders in `--vueda-font-mono` at `font-medium` with `font-feature-settings: 'tnum','zero'` so digit widths stay stable as values change and `0` remains visually distinct from `O`. The focused segment paints `--accent` / `--accent-foreground` (same recipe as a menu-item-highlighted row, since a focused segment is a selection); `caret-transparent` hides the text caret because segments edit via arrow keys rather than free-form typing, and `data-[placeholder]` mutes the segment to `--muted-foreground` while empty. |
| [DateRangeField](/v3/reference/theming/keys/DateRangeField.md) | key | 1 | The input-shell variant that joins a start / end [DateRangeFieldInput.root](/v3/reference/theming/keys/DateRangeFieldInput.md#theme-key-DateRangeFieldInput-root) pair into one chip. See also: [DateField.root](/v3/reference/theming/keys/DateField.md#theme-key-DateField-root) for the shared shell recipe; delta is that the row hosts two segment runs separated by a literal separator glyph rendered by the component rather than a single run. |
| [DateRangeFieldInput](/v3/reference/theming/keys/DateRangeFieldInput.md) | key | 1 | An editable segment inside a [DateRangeField.root](/v3/reference/theming/keys/DateRangeField.md#theme-key-DateRangeField-root). See also: [DateFieldInput.root](/v3/reference/theming/keys/DateFieldInput.md#theme-key-DateFieldInput-root); same mono + tabular + slashed-zero, accent-on-focus, `caret-transparent` recipe applies. |
| [TimeField](/v3/reference/theming/keys/TimeField.md) | key | 1 | The input-shell variant for editable time segments (hour / minute, plus optional second / period). See also: [DateField.root](/v3/reference/theming/keys/DateField.md#theme-key-DateField-root); identical shell and size-tier recipe, only the segment set inside differs. |
| [TimeFieldInput](/v3/reference/theming/keys/TimeFieldInput.md) | key | 1 | An editable segment inside a [TimeField.root](/v3/reference/theming/keys/TimeField.md#theme-key-TimeField-root). See also: [DateFieldInput.root](/v3/reference/theming/keys/DateFieldInput.md#theme-key-DateFieldInput-root); identical recipe. |
| [Calendar](/v3/reference/theming/keys/Calendar.md) | key | 1 | The outer surface that hosts the month grid. Pure 12px padding (`p-3`) and no border or shadow of its own; chrome belongs to the host (a [PopoverContent.root](/v3/reference/theming/keys/PopoverContent.md#theme-key-PopoverContent-root) when used in a date-picker popover, or the surrounding view when embedded inline). No footer either: [CalendarFooter.root](/v3/reference/theming/keys/CalendarFooter.md#theme-key-CalendarFooter-root) is a separate chin attached below by composition, so a footer-free embed renders as a bare grid. |
| [CalendarHeader](/v3/reference/theming/keys/CalendarHeader.md) | key | 1 | The title row above the day grid. Flex-centred so the [CalendarHeading.root](/v3/reference/theming/keys/CalendarHeading.md#theme-key-CalendarHeading-root) sits in the middle of the row, with `px-8` reserving 32px of side padding for the prev / next [CalendarNavButton.root](/v3/reference/theming/keys/CalendarNavButton.md#theme-key-CalendarNavButton-root) pair that the component anchors to the row edges. |
| [CalendarHeading](/v3/reference/theming/keys/CalendarHeading.md) | key | 1 | The month-year title text inside a [CalendarHeader.root](/v3/reference/theming/keys/CalendarHeader.md#theme-key-CalendarHeader-root). Single-line `text-sm font-medium`; sits centred between the prev / next nav buttons. |
| [CalendarNavButton](/v3/reference/theming/keys/CalendarNavButton.md) | key | 1 | The prev / next month button anchored to a [CalendarHeader.root](/v3/reference/theming/keys/CalendarHeader.md#theme-key-CalendarHeader-root). Composes [\_ButtonBase.root](/v3/reference/theming/keys/_ButtonBase.md#theme-key-_ButtonBase-root) plus [\_ButtonOutline.root](/v3/reference/theming/keys/_ButtonOutline.md#theme-key-_ButtonOutline-root) for the neutral chip recipe, then overrides to a square 28×28 transparent chip with `opacity-50` at rest and full opacity on hover so the chrome stays out of the way until the user reaches for it. One theme key serves both directional SFCs (CalendarPrevButton, CalendarNextButton); the [RangeCalendarPrevButton.root](/v3/reference/theming/keys/RangeCalendarPrevButton.md#theme-key-RangeCalendarPrevButton-root) / [RangeCalendarNextButton.root](/v3/reference/theming/keys/RangeCalendarNextButton.md#theme-key-RangeCalendarNextButton-root) pair on the range side stays split. Whether the two sides should converge on one shape is unsettled. |
| [CalendarGrid](/v3/reference/theming/keys/CalendarGrid.md) | key | 1 | The 7-column day grid. `border-collapse` lets adjacent cell borders share one hairline rather than doubling at the seam; `w-full` lets the grid stretch to the [Calendar.root](/v3/reference/theming/keys/Calendar.md#theme-key-Calendar-root) content width so cell sizing falls out of `flex-1` on [CalendarCell.root](/v3/reference/theming/keys/CalendarCell.md#theme-key-CalendarCell-root). |
| [CalendarGridRow](/v3/reference/theming/keys/CalendarGridRow.md) | key | 1 | A single week row inside a [CalendarGrid.root](/v3/reference/theming/keys/CalendarGrid.md#theme-key-CalendarGrid-root). Flex row; cell width comes from `flex-1` on the children, not from a column template. |
| [CalendarHeadCell](/v3/reference/theming/keys/CalendarHeadCell.md) | key | 1 | A weekday-label cell (Mo / Tu / We ...) above the day grid. Width pins to `--vueda-cal-cell` (32px) so labels align under the day-button slots below; renders at 0.8rem on `--muted-foreground` so the header row reads as chrome rather than as a row of day buttons. |
| [CalendarCell](/v3/reference/theming/keys/CalendarCell.md) | key | 1 | A grid slot inside a [CalendarGridRow.root](/v3/reference/theming/keys/CalendarGridRow.md#theme-key-CalendarGridRow-root); the [CalendarCellTrigger.root](/v3/reference/theming/keys/CalendarCellTrigger.md#theme-key-CalendarCellTrigger-root) day button sits inside it. `p-0` so the button owns the inner spacing, `flex-1` distributes width evenly across the row, and `relative` plus `focus-within:z-20` lets a focused day button promote above its neighbours when the focus ring would otherwise be clipped by adjacent cells. |
| [CalendarCellTrigger](/v3/reference/theming/keys/CalendarCellTrigger.md) | key | 1 | The pressable day button inside a [CalendarCell.root](/v3/reference/theming/keys/CalendarCell.md#theme-key-CalendarCell-root). Composes [\_ButtonBase.root](/v3/reference/theming/keys/_ButtonBase.md#theme-key-_ButtonBase-root) plus [\_ButtonGhost.root](/v3/reference/theming/keys/_ButtonGhost.md#theme-key-_ButtonGhost-root) so day buttons share the popover-friendly hover recipe with the rest of the picker chrome. Size pins to `--vueda-cal-day` (30×30) so the button sits inside the 32px [CalendarCell.root](/v3/reference/theming/keys/CalendarCell.md#theme-key-CalendarCell-root) with a 1px breathing margin. Carries the picker's full state matrix: `data-selected` paints `--primary` / `--primary-foreground`, `data-today` (when not selected) paints `--accent`, `data-disabled` and `data-outside-view` mute to `--muted-foreground`, and `data-unavailable` paints `--destructive` plus `line-through`. |
| [CalendarFooter](/v3/reference/theming/keys/CalendarFooter.md) | key | 2 | The optional chin slot below a [Calendar.root](/v3/reference/theming/keys/Calendar.md#theme-key-Calendar-root) or [RangeCalendar.root](/v3/reference/theming/keys/RangeCalendar.md#theme-key-RangeCalendar-root). Flex row with a `border-t` separator and an 8px gap; used by date-picker popovers that need a date-summary line plus an action row (Apply / Clear). Calendar and RangeCalendar themselves stay footer-free so the bare grid can be embedded without chrome it cannot use. |
| [RangeCalendar](/v3/reference/theming/keys/RangeCalendar.md) | key | 1 | See also: [Calendar.root](/v3/reference/theming/keys/Calendar.md#theme-key-Calendar-root); identical 12px-padded surface, only the grid inside differs (the [RangeCalendarCell.root](/v3/reference/theming/keys/RangeCalendarCell.md#theme-key-RangeCalendarCell-root) carries the range-fill state). |
| [RangeCalendarHeader](/v3/reference/theming/keys/RangeCalendarHeader.md) | key | 1 | The title row above a [RangeCalendar.root](/v3/reference/theming/keys/RangeCalendar.md#theme-key-RangeCalendar-root)'s day grid. See also: [CalendarHeader.root](/v3/reference/theming/keys/CalendarHeader.md#theme-key-CalendarHeader-root); delta is that the prev / next buttons inside ([RangeCalendarPrevButton.root](/v3/reference/theming/keys/RangeCalendarPrevButton.md#theme-key-RangeCalendarPrevButton-root) / [RangeCalendarNextButton.root](/v3/reference/theming/keys/RangeCalendarNextButton.md#theme-key-RangeCalendarNextButton-root)) anchor to the row edges via `position: absolute`, so this header does not reserve `px-8` the way the single-calendar header does. |
| [RangeCalendarHeading](/v3/reference/theming/keys/RangeCalendarHeading.md) | key | 1 | See also: [CalendarHeading.root](/v3/reference/theming/keys/CalendarHeading.md#theme-key-CalendarHeading-root); identical recipe. |
| [RangeCalendarPrevButton](/v3/reference/theming/keys/RangeCalendarPrevButton.md) | key | 1 | The previous-month button anchored to the left edge of a [RangeCalendarHeader.root](/v3/reference/theming/keys/RangeCalendarHeader.md#theme-key-RangeCalendarHeader-root). Composes [\_ButtonBase.root](/v3/reference/theming/keys/_ButtonBase.md#theme-key-_ButtonBase-root) plus [\_ButtonOutline.root](/v3/reference/theming/keys/_ButtonOutline.md#theme-key-_ButtonOutline-root), then absolute-positions itself at `left-1` so the button does not consume row flex while the heading floats centred between the two edges. Same square 28×28 transparent plus 50%-opacity-at-rest treatment as [CalendarNavButton.root](/v3/reference/theming/keys/CalendarNavButton.md#theme-key-CalendarNavButton-root). |
| [RangeCalendarNextButton](/v3/reference/theming/keys/RangeCalendarNextButton.md) | key | 1 | See also: [RangeCalendarPrevButton.root](/v3/reference/theming/keys/RangeCalendarPrevButton.md#theme-key-RangeCalendarPrevButton-root); mirror anchored to the right edge of the header at `right-1`. |
| [RangeCalendarGrid](/v3/reference/theming/keys/RangeCalendarGrid.md) | key | 1 | See also: [CalendarGrid.root](/v3/reference/theming/keys/CalendarGrid.md#theme-key-CalendarGrid-root); identical recipe. |
| [RangeCalendarGridRow](/v3/reference/theming/keys/RangeCalendarGridRow.md) | key | 1 | See also: [CalendarGridRow.root](/v3/reference/theming/keys/CalendarGridRow.md#theme-key-CalendarGridRow-root); identical recipe. |
| [RangeCalendarHeadCell](/v3/reference/theming/keys/RangeCalendarHeadCell.md) | key | 1 | See also: [CalendarHeadCell.root](/v3/reference/theming/keys/CalendarHeadCell.md#theme-key-CalendarHeadCell-root); identical recipe (the class-order difference vs the single-calendar slot is incidental, not a deliberate departure). |
| [RangeCalendarCell](/v3/reference/theming/keys/RangeCalendarCell.md) | key | 1 | A grid slot inside a [RangeCalendarGridRow.root](/v3/reference/theming/keys/RangeCalendarGridRow.md#theme-key-RangeCalendarGridRow-root). Same `p-0` plus `relative` plus `focus-within:z-20` layout shape as [CalendarCell.root](/v3/reference/theming/keys/CalendarCell.md#theme-key-CalendarCell-root), plus the range-fill recipe: `[&:has([data-selected])]:bg-accent` paints `--accent` on the cell (not on the day button) whenever the inner trigger is part of the selected range, so middle cells render as a continuous strip while the `data-selection-start` and `data-selection-end` cells round only their outer corners via the `[&:has([data-selected][data-selection-start])]` / `[&:has([data-selected][data-selection-end])]` variants. Range fill goes on the cell rather than the day button so the run can round cleanly at its endpoints. |
| [RangeCalendarCellTrigger](/v3/reference/theming/keys/RangeCalendarCellTrigger.md) | key | 1 | The pressable day button inside a [RangeCalendarCell.root](/v3/reference/theming/keys/RangeCalendarCell.md#theme-key-RangeCalendarCell-root). See also: [CalendarCellTrigger.root](/v3/reference/theming/keys/CalendarCellTrigger.md#theme-key-CalendarCellTrigger-root); delta is that the single `data-selected` state is replaced by paired `data-selection-start` / `data-selection-end` states that paint `--primary` only at the two endpoints, leaving the middle of the range to read through the `--accent` fill that [RangeCalendarCell.root](/v3/reference/theming/keys/RangeCalendarCell.md#theme-key-RangeCalendarCell-root) paints on its cell. |
| [ComboboxAnchor](/v3/reference/theming/keys/ComboboxAnchor.md) | key | 1 | The positioning anchor for the [ComboboxList.root](/v3/reference/theming/keys/ComboboxList.md#theme-key-ComboboxList-root) popover. Pins to a 200px width by default so a Combobox that anchors to whitespace (rather than the trigger element) still has a sensible reference rectangle; consumers that wrap the trigger in the anchor inherit the trigger's width instead and can ignore this default. Layout-only slot; no chrome of its own. |
| [ComboboxTrigger](/v3/reference/theming/keys/ComboboxTrigger.md) | key | 1 | The pressable surface that opens the [ComboboxList.root](/v3/reference/theming/keys/ComboboxList.md#theme-key-ComboboxList-root). Ships empty today: in-tree consumers (`WidgetCombobox`) supply their own input-shell chrome via `asChild`, so the bare primitive has no usable default. The Combobox-vs-Select differentiator (Combobox reads as a field because the user is about to type) is enforced by consumers, not by this slot. Giving the bare primitive an input-shell default is deferred until the same session settles the multi-select div-trigger pattern, since one API choice covers both. |
| [ComboboxList](/v3/reference/theming/keys/ComboboxList.md) | key | 1 | The floating popover surface that holds the [ComboboxItem.root](/v3/reference/theming/keys/ComboboxItem.md#theme-key-ComboboxItem-root) rows. Reads as a popover: 2px control radius, `--popover` fill, and a hairline edge with popover elevation (`overlay-hairline`), with the standard side-aware enter / exit transforms anchored on `--reka-combobox-content-transform-origin` so the surface scales out of the corner closest to the trigger. Fixed 200px width matches [ComboboxAnchor.root](/v3/reference/theming/keys/ComboboxAnchor.md#theme-key-ComboboxAnchor-root); the inner [ComboboxViewport.root](/v3/reference/theming/keys/ComboboxViewport.md#theme-key-ComboboxViewport-root) owns scrolling. |
| [ComboboxViewport](/v3/reference/theming/keys/ComboboxViewport.md) | key | 1 | The scrollable region inside [ComboboxList.root](/v3/reference/theming/keys/ComboboxList.md#theme-key-ComboboxList-root) that wraps the result groups. Caps at 300px tall before the viewport begins to scroll; `scroll-py-1` keeps a hairline of breathing room above the first and below the last visible row so a focused item never crashes into the viewport edge. |
| [ComboboxInput](/v3/reference/theming/keys/ComboboxInput.md) | key | 1 | The search field at the top of a [ComboboxList.root](/v3/reference/theming/keys/ComboboxList.md#theme-key-ComboboxList-root). Sized to the large control-height tier (`h-vueda-control-lg`) so the input reads as the primary surface inside the popover; renders chrome-free (`bg-transparent`, no border or focus ring) because the surrounding popover already owns the elevation and ring contracts. The Combobox trigger that opens the popover wears the input shell instead. |
| [ComboboxGroup](/v3/reference/theming/keys/ComboboxGroup.md) | key | 2 | A section of related [ComboboxItem.root](/v3/reference/theming/keys/ComboboxItem.md#theme-key-ComboboxItem-root) rows inside [ComboboxList.root](/v3/reference/theming/keys/ComboboxList.md#theme-key-ComboboxList-root). 4px padding (`p-1`) carries the breathing room around the section so consecutive groups read as separate runs even without a [ComboboxSeparator.root](/v3/reference/theming/keys/ComboboxSeparator.md#theme-key-ComboboxSeparator-root) between them; `overflow-hidden` clips a long inner row to the group's box rather than letting it bleed into a neighbour. |
| [ComboboxItem](/v3/reference/theming/keys/ComboboxItem.md) | key | 1 | A single result row inside a [ComboboxGroup.root](/v3/reference/theming/keys/ComboboxGroup.md#theme-key-ComboboxGroup-root). The `data-highlighted` state (set by the picker on keyboard or pointer focus) paints `--accent` / `--accent-foreground`, and the muted leading icon flips to inherit on the same rule so a highlighted row reads as one tinted strip. `data-disabled` halves opacity and drops pointer events; `rounded-sm` keeps the row a chit inside the group's slab. The committed-value `data-state=checked` tint that [SelectItem.root](/v3/reference/theming/keys/SelectItem.md#theme-key-SelectItem-root) carries is not applied here because Combobox commits by closing the popover; the trailing [ComboboxItemIndicator.root](/v3/reference/theming/keys/ComboboxItemIndicator.md#theme-key-ComboboxItemIndicator-root) marks the selection instead. |
| [ComboboxItemIndicator](/v3/reference/theming/keys/ComboboxItemIndicator.md) | key | 1 | The trailing selected-state glyph on a [ComboboxItem.root](/v3/reference/theming/keys/ComboboxItem.md#theme-key-ComboboxItem-root) (typically a check mark). `ml-auto` pushes the indicator to the row's trailing edge; size and colour are inherited from the surrounding row so the indicator picks up the highlight swap without painting its own state. |
| [ComboboxSeparator](/v3/reference/theming/keys/ComboboxSeparator.md) | key | 1 | A 1px horizontal divider between groups inside [ComboboxList.root](/v3/reference/theming/keys/ComboboxList.md#theme-key-ComboboxList-root). Renders as a flat `--border` hairline rather than the DPR-aware `hairline` utility because the separator sits inside a popover that already paints its own border at the same width, so the visual seam never reads as a doubled line. `-mx-1` extends the divider to the popover edge past the group's 4px inner padding. |
| [ComboboxEmpty](/v3/reference/theming/keys/ComboboxEmpty.md) | key | 1 | The zero-result placeholder shown inside [ComboboxList.root](/v3/reference/theming/keys/ComboboxList.md#theme-key-ComboboxList-root) when the search has no matches. Centred sm text inside 24px vertical padding so the empty state reads as a deliberate pause rather than a collapsed popover; consumers supply their own copy. |
| [Command](/v3/reference/theming/keys/Command.md) | key | 1 | The outer Command surface (a search + categorised result list). 4px card radius rather than the 2px control radius the rest of the picker family wears, because Command is a shell surface, not a slab control. The flex-column layout stacks [CommandInput.root](/v3/reference/theming/keys/CommandInput.md#theme-key-CommandInput-root), [CommandList.root](/v3/reference/theming/keys/CommandList.md#theme-key-CommandList-root), and optional [CommandFooter.root](/v3/reference/theming/keys/CommandFooter.md#theme-key-CommandFooter-root) into one chip, and `overflow-hidden` lets the inner list scroll without escaping the rounded corners. Used inline or hosted inside a [CommandDialog.content](/v3/reference/theming/keys/CommandDialog.md#theme-key-CommandDialog-content). |
| [CommandInput](/v3/reference/theming/keys/CommandInput.md) | key | 2 | The free-text search field at the top of a [Command.root](/v3/reference/theming/keys/Command.md#theme-key-Command-root). Renders chrome-free at `--vueda-cmd-input-height` so the surrounding [CommandInput.wrapper](/v3/reference/theming/keys/CommandInput.md#theme-key-CommandInput-wrapper) owns the row's geometry and the lower hairline; the input itself just contributes placeholder, focus-clear, and the disabled treatment. |
| [CommandList](/v3/reference/theming/keys/CommandList.md) | key | 1 | The scrollable region of [Command.root](/v3/reference/theming/keys/Command.md#theme-key-Command-root) that holds the result groups. See also: [ComboboxViewport.root](/v3/reference/theming/keys/ComboboxViewport.md#theme-key-ComboboxViewport-root); identical 300px cap and `scroll-py-1` recipe so both pickers feel the same when keyboard navigation crosses the viewport edge. |
| [CommandEmpty](/v3/reference/theming/keys/CommandEmpty.md) | key | 1 | The zero-result placeholder shown inside [CommandList.root](/v3/reference/theming/keys/CommandList.md#theme-key-CommandList-root) when the search has no matches. See also: [ComboboxEmpty.root](/v3/reference/theming/keys/ComboboxEmpty.md#theme-key-ComboboxEmpty-root); identical recipe. |
| [CommandGroup](/v3/reference/theming/keys/CommandGroup.md) | key | 2 | A section of related [CommandItem.root](/v3/reference/theming/keys/CommandItem.md#theme-key-CommandItem-root) rows inside [CommandList.root](/v3/reference/theming/keys/CommandList.md#theme-key-CommandList-root). See also: [ComboboxGroup.root](/v3/reference/theming/keys/ComboboxGroup.md#theme-key-ComboboxGroup-root); identical recipe. |
| [CommandItem](/v3/reference/theming/keys/CommandItem.md) | key | 1 | A single result row inside a [CommandGroup.root](/v3/reference/theming/keys/CommandGroup.md#theme-key-CommandGroup-root). See also: [ComboboxItem.root](/v3/reference/theming/keys/ComboboxItem.md#theme-key-ComboboxItem-root); identical highlight + disabled + icon-tint recipe so result rows feel the same across both pickers. Command differs only at the row's trailing edge, where [CommandShortcut.root](/v3/reference/theming/keys/CommandShortcut.md#theme-key-CommandShortcut-root) (rather than [ComboboxItemIndicator.root](/v3/reference/theming/keys/ComboboxItemIndicator.md#theme-key-ComboboxItemIndicator-root)) marks the kbd hint for invoking the action. |
| [CommandSeparator](/v3/reference/theming/keys/CommandSeparator.md) | key | 1 | A 1px horizontal divider between groups inside [CommandList.root](/v3/reference/theming/keys/CommandList.md#theme-key-CommandList-root). See also: [ComboboxSeparator.root](/v3/reference/theming/keys/ComboboxSeparator.md#theme-key-ComboboxSeparator-root); identical recipe. |
| [CommandShortcut](/v3/reference/theming/keys/CommandShortcut.md) | key | 3 | Alignment wrapper for the trailing keyboard hint on a [CommandItem.root](/v3/reference/theming/keys/CommandItem.md#theme-key-CommandItem-root). `ml-auto` pushes the hint flush right while the nested [KbdGroup.root](/v3/reference/theming/keys/KbdGroup.md#theme-key-KbdGroup-root) owns the chord. |
| [CommandFooter](/v3/reference/theming/keys/CommandFooter.md) | key | 3 | The optional chin below [CommandList.root](/v3/reference/theming/keys/CommandList.md#theme-key-CommandList-root). Sits at `--vueda-cmd-footer-height` (32px) on `--muted` with a top hairline, holding keyboard-navigation hints on the leading edge and custom action labels on the trailing edge; supporting-size copy on `--muted-foreground` reads as status rather than primary chrome. |
| [CommandDialog](/v3/reference/theming/keys/CommandDialog.md) | key | 2 | The [DialogContent.root](/v3/reference/theming/keys/DialogContent.md#theme-key-DialogContent-root) pane that hosts a [Command.root](/v3/reference/theming/keys/Command.md#theme-key-Command-root) at modal scale. Drops all padding so Command's own card radius, fill, and inner geometry own the dialog box, and `overflow-hidden` keeps the inner list's scroll edges clipped to the rounded corners. |
| [SelectTrigger](/v3/reference/theming/keys/SelectTrigger.md) | key | 1 | The pressable surface that opens a [SelectContent.root](/v3/reference/theming/keys/SelectContent.md#theme-key-SelectContent-root). Wears the editable field recipe: a `bg-field` fill on a bottom-only `field-line`, square `rounded-vueda-field` corners, and a `hover:bg-field-hover` step, so a picker that sets a value reads as a field rather than a button. Focus recolours the bottom line to `--ring` and adds the focus ring. Three size tiers ride `h-vueda-control*` plus matching `px-vueda-control-px*`, and `aria-invalid` swaps that line and the focus-ring shadow to destructive. Placeholder text mutes to `--muted-foreground` so an unselected trigger reads as empty rather than as a chosen value. |
| [SelectContent](/v3/reference/theming/keys/SelectContent.md) | key | 2 | The floating popover surface that holds the [SelectItem.root](/v3/reference/theming/keys/SelectItem.md#theme-key-SelectItem-root) options. Reads as a popover (2px radius, a hairline edge with popover elevation via `overlay-hairline`) capped at the viewport-available height that Reka exposes via `--reka-select-content-available-height`; the `popper`-position-only translate nudges (`translate-y-1`, etc.) sit the popover one 4px step off the trigger so the surface does not crash into the chip that opened it. The `item-aligned` legacy mode (the popover aligns itself to the selected item rather than anchoring to the trigger) skips those nudges and shares all other chrome. |
| [SelectItem](/v3/reference/theming/keys/SelectItem.md) | key | 1 | A single option inside a [SelectContent.viewport](/v3/reference/theming/keys/SelectContent.md#theme-key-SelectContent-viewport). Carries the two-track selection state that distinguishes Select from Combobox: the highlighted-but-not-committed option paints `--accent` / `--accent-foreground` on `:focus`, while the committed value (`data-state=checked`) tints with `bg-primary/10` so the chosen option reads as a soft primary band even when another row is highlighted; the indicator icon alone is not a strong enough signal at rest. `pr-8` reserves trailing space for the check indicator; `rounded-sm` keeps the option a chit inside the popover slab. |
| [SelectLabel](/v3/reference/theming/keys/SelectLabel.md) | key | 1 | The section heading inside a [SelectContent.root](/v3/reference/theming/keys/SelectContent.md#theme-key-SelectContent-root). See also: [ComboboxGroup.heading](/v3/reference/theming/keys/ComboboxGroup.md#theme-key-ComboboxGroup-heading); same caps-micro eyebrow on `--muted-foreground` (the rendered class list drops the leading `font-mono`, but Tailwind's default sans / mono cascade leaves the eyebrow visually identical at the micro size). |
| [SelectSeparator](/v3/reference/theming/keys/SelectSeparator.md) | key | 1 | A 1px horizontal divider between sections inside [SelectContent.viewport](/v3/reference/theming/keys/SelectContent.md#theme-key-SelectContent-viewport). See also: [ComboboxSeparator.root](/v3/reference/theming/keys/ComboboxSeparator.md#theme-key-ComboboxSeparator-root); delta is a vertical 4px margin (`my-1`) so the divider breathes against the surrounding 4px viewport padding, plus `pointer-events-none` so the hairline never intercepts a click meant for a neighbouring row. |
| [SelectScrollUpButton](/v3/reference/theming/keys/SelectScrollUpButton.md) | key | 1 | The scroll-up affordance that surfaces at the top of a long [SelectContent.viewport](/v3/reference/theming/keys/SelectContent.md#theme-key-SelectContent-viewport). 4px tall flex centre so the slot reads as a thin handle rather than a button; the consumer paints the chevron glyph inside. Reka shows / hides the slot automatically based on scroll position. |
| [SelectScrollDownButton](/v3/reference/theming/keys/SelectScrollDownButton.md) | key | 1 | See also: [SelectScrollUpButton.root](/v3/reference/theming/keys/SelectScrollUpButton.md#theme-key-SelectScrollUpButton-root); mirror at the bottom of the viewport. |
| [TagsInput](/v3/reference/theming/keys/TagsInput.md) | key | 1 | The outer shell of a multi-value input that captures discrete entries as pill chips. Reads as the input family: `hairline` border, control radius, dark-mode `bg-input/30` tint. Flex-wrap with an 8px gap so committed [TagsInputItem.root](/v3/reference/theming/keys/TagsInputItem.md#theme-key-TagsInputItem-root) chips and the trailing [TagsInputInput.root](/v3/reference/theming/keys/TagsInputInput.md#theme-key-TagsInputInput-root) flow onto new rows as the chip count grows. Focus and `aria-invalid` rings fire on the shell (not the inner input) via `:has(input:focus-visible)` and `:has([data-state=active])` selectors: typing in the field paints the standard focus ring on the shell; focusing a committed chip (`data-state=active`) suppresses the shell ring so the chip's own active outline is the only one visible at a time. |
| [TagsInputInput](/v3/reference/theming/keys/TagsInputInput.md) | key | 1 | The free-text entry field inside a [TagsInput.root](/v3/reference/theming/keys/TagsInput.md#theme-key-TagsInput-root). Sized to `--vueda-chip-height` so pending text shares a baseline with the committed chips beside it; renders chrome-free (transparent fill, no border, no focus ring) because the surrounding shell owns the chip-row contract and fires the focus ring on its own when the input is focused. `flex-1` lets the field absorb the remaining row width inside the wrap so the typing affordance always reaches the trailing edge. |
| [TagsInputItem](/v3/reference/theming/keys/TagsInputItem.md) | key | 1 | An individual committed chip inside a [TagsInput.root](/v3/reference/theming/keys/TagsInput.md#theme-key-TagsInput-root). Pill radius (not the control / card radius the rest of the form family wears) marks the chip as a user-manipulated tag object rather than a slab-radius system badge or a chrome chit. Sized to `--vueda-chip-height` so multiple chips on a row share one baseline. `data-state=active` (set when the chip receives keyboard focus to edit or delete it) paints the standard focus ring on the chip, and the surrounding [TagsInput.root](/v3/reference/theming/keys/TagsInput.md#theme-key-TagsInput-root) suppresses its own ring on the same condition so only one ring paints at a time. |
| [TagsInputItemText](/v3/reference/theming/keys/TagsInputItemText.md) | key | 1 | The text label inside a [TagsInputItem.root](/v3/reference/theming/keys/TagsInputItem.md#theme-key-TagsInputItem-root). 4px / 8px padding on a transparent fill so the label reads as content sitting inside the secondary-tinted chip rather than carrying its own surface; sm size matches the surrounding [TagsInputInput.root](/v3/reference/theming/keys/TagsInputInput.md#theme-key-TagsInputInput-root) so committed and pending text share a tier. |
| [TagsInputItemDelete](/v3/reference/theming/keys/TagsInputItemDelete.md) | key | 1 | The remove (x) button at the trailing edge of a [TagsInputItem.root](/v3/reference/theming/keys/TagsInputItem.md#theme-key-TagsInputItem-root). Transparent fill so the button rides on the chip's secondary surface rather than punching its own swatch; the trailing 4px margin separates the glyph from the chip's pill end so the hit target does not run into the rounded edge. |
| [Checkbox](/v3/reference/theming/keys/Checkbox.md) | key | 2 | The boolean-chit shell. 24px square at a 4px corner (one step softer than the 2px control radius) so it reads as a chit rather than a miniature slab control. Default state paints a `hairline` edge on the input-tinted surface and carries the standard focus + `aria-invalid` ring contract. In dark mode the rest edge swaps to `--border-strong` (`dark:hairline-border-strong`) so an unchecked box stays visible on hovered list rows, where the opaque `--input` edge would sink into the `bg-accent/50` hover band. Checked and indeterminate states fill with `--primary` and drop the hairline (the `--vueda-hairline-color:transparent` override on the same selectors) so the surface reads as a single solid swatch; `aria-invalid` swaps both the fill and the painted edge to `--destructive`. The `inline-flex` centring and `align-middle` hold the box to a fixed `size-6` square with a stable baseline whether or not it is checked; keep them when overriding this slot, or toggling a checkbox can reflow baseline-aligned parents (for example the card-layout [ObjectsGrid](/v3/reference/theming/keys/ObjectsGrid.md) grid). Disabled controls use `--disabled` fill, `--border` edge, and `--disabled-foreground` indicators at full opacity, including when invalid. |
| [RadioGroup](/v3/reference/theming/keys/RadioGroup.md) | key | 1 | Layout shell for a vertical run of [RadioGroupItem.root](/v3/reference/theming/keys/RadioGroupItem.md#theme-key-RadioGroupItem-root). 12px gap (`gap-3`) so the items breathe at the form-level density; the items, not the group, carry the focus and `aria-invalid` rings, so the group itself is a transparent layout container. Override to `flex` or `grid-flow-col` for a horizontal stack without touching the per-item contract. |
| [RadioGroupItem](/v3/reference/theming/keys/RadioGroupItem.md) | key | 3 | The individual radio chit inside a [RadioGroup.root](/v3/reference/theming/keys/RadioGroup.md#theme-key-RadioGroup-root). 24px circle, paired with the 24px [Checkbox.root](/v3/reference/theming/keys/Checkbox.md#theme-key-Checkbox-root) square so the two single-select families share a row height. `hairline` edge on an input-tinted surface (`dark:bg-input/30`) with the standard focus + `aria-invalid` ring contract; the dark rest edge uses `--border-strong` (parity with [Checkbox.root](/v3/reference/theming/keys/Checkbox.md#theme-key-Checkbox-root)) so the ring stays visible on hovered list rows. Selected state is carried by the inner [RadioGroupItem.dot](/v3/reference/theming/keys/RadioGroupItem.md#theme-key-RadioGroupItem-dot) via `text-primary` on the root (the dot inherits the colour through `bg-current`); `aria-invalid` recolours the dot to `--destructive` the same way. Disabled controls use `--disabled` fill, `--border` edge, and `--disabled-foreground` indicators at full opacity, including when invalid. |
| [Switch](/v3/reference/theming/keys/Switch.md) | key | 2 | The track of the sliding boolean control. Tighter than the iOS-canonical size: 18.4px tall (`h-[1.15rem]`), 32px wide (`w-8`), so the switch sits at the form density tier rather than ballooning above the 32px control row. Pill radius; checked fills `--primary`, unchecked fills `--input` (with a darker `--input/80` tint in dark mode for visibility against the deeper canvas). Focus paints `--ring` directly on the otherwise-transparent 1px border and adds a 2px outline at 2px offset, rather than the canon `focus-ring` utility, because the track + thumb composition needs the ring to wrap the entire pill without the inset shadow variant interfering with the thumb's transform. Disabled tracks use `--disabled` at full opacity and drop the shadow. |
| [Slider](/v3/reference/theming/keys/Slider.md) | key | 4 | The continuous-value control surface. Flex row by default; `data-[orientation=vertical]` flips to flex column and applies a 176px (`min-h-44`) minimum height so a vertical slider has enough travel to be precise. `touch-none` and `select-none` so dragging the [Slider.thumb](/v3/reference/theming/keys/Slider.md#theme-key-Slider-thumb) does not scroll the page or initiate a text selection. Disabled colors live on the track, range, and thumbs at full opacity; Reka blocks value changes and removes disabled thumbs from keyboard navigation. |

## [grid](/v3/reference/theming/keys/family/grid.md)

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [Table](/v3/reference/theming/keys/Table.md) | key | 3 | The card surface around the scroll container: fill, radius, and [--vueda-hairline-width](/v3/reference/theming/tokens/base.md#css-token-vueda-hairline-width) edge. Its padding matches the edge width, so the scroll container sits inside the painted edge and no row or sticky header cell can cover it. |
| [TableBody](/v3/reference/theming/keys/TableBody.md) | key | 1 | The `<tbody>` section wrapper. It removes the last row's divider from that row's cells so the enclosing [Table.frame](/v3/reference/theming/keys/Table.md#theme-key-Table-frame) edge remains the closing edge instead of doubling the table bottom. |
| [TableCaption](/v3/reference/theming/keys/TableCaption.md) | key | 1 | The native caption below a table. Use it for low-emphasis supporting copy tied to the table, with spacing that keeps it visually outside the bordered data surface. |
| [TableCell](/v3/reference/theming/keys/TableCell.md) | key | 1 | The body cell slot for `<td>` elements. It applies the density tiers from [Table.table](/v3/reference/theming/keys/Table.md#theme-key-Table-table), keeps checkbox columns compact, and honors `data-numeric` or `data-mono` directly on the cell. |
| [TableEmpty](/v3/reference/theming/keys/TableEmpty.md) | key | 2 | The spanning empty-state cell. It keeps the row aligned with regular [TableCell.root](/v3/reference/theming/keys/TableCell.md#theme-key-TableCell-root) cells while allowing `colspan` and consumer classes to define the empty row's table footprint. |
| [TableFooter](/v3/reference/theming/keys/TableFooter.md) | key | 1 | The `<tfoot>` section wrapper for summary and total rows. Its muted fill and top divider separate aggregates from body rows while leaving row cells free to handle numeric alignment. The divider sits on the first footer row's cells, and the last footer row drops its own divider, because the separated border model does not paint borders on `<tfoot>` or `<tr>`. |
| [TableHead](/v3/reference/theming/keys/TableHead.md) | key | 1 | The header cell slot for `<th>` elements. It owns compact header typography, density heights, sticky positioning, checkbox offsets, and numeric sort-icon ordering; see [Table.table](/v3/reference/theming/keys/Table.md#theme-key-Table-table). |
| [TableHeader](/v3/reference/theming/keys/TableHeader.md) | key | 1 | The `<thead>` section wrapper. Empty by default: header cells take their bottom divider from [TableRow.root](/v3/reference/theming/keys/TableRow.md#theme-key-TableRow-root), and because that border belongs to the cell, a sticky [TableHead.root](/v3/reference/theming/keys/TableHead.md#theme-key-TableHead-root) carries it over scrolling body content. |
| [TableRow](/v3/reference/theming/keys/TableRow.md) | key | 1 | The row slot shared by header, body, and footer sections. It provides hover feedback, selected-row tinting, the leading selected rail, and the standard divider. The divider sits on the row's cells rather than the `<tr>`: [Table.table](/v3/reference/theming/keys/Table.md#theme-key-Table-table) uses the separated border model, which does not paint borders on rows. |
| [TableRowActions](/v3/reference/theming/keys/TableRowActions.md) | key | 2 | The inline wrapper for row actions. It stays invisible until the row is hovered, focused within, or selected, keeping scan-heavy tables clear until actions are relevant. |

## [objects-grid](/v3/reference/theming/keys/family/objects-grid.md)

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [ObjectsGrid](/v3/reference/theming/keys/ObjectsGrid.md) | key | 11 | The outer scroll surface and card fill for the grid. It owns the density attribute, tabular number rendering, and `data-flush` edge merging used when the grid is embedded in a parent surface. The radius and inset hairline apply in table layout only, where the root is the surface the rows sit on and its edge closes the last row. Card layout drops the edge, because each card already carries one through [ObjectsGrid.bodyRow](/v3/reference/theming/keys/ObjectsGrid.md#theme-key-ObjectsGrid-bodyRow) and an edge here would sit 4 px outside every card edge. The fill stays in both layouts, so the gutter between cards keeps the same tone as the chrome a consumer wraps around the grid. `data-flush` removes the embedded grid's inset hairline and radius; the parent owns the outer edge and any separators around the grid. |
| [ObjectsGridTableHeader](/v3/reference/theming/keys/ObjectsGridTableHeader.md) | key | 2 | The header content wrapper. It lays out the label and the numeric-column reversal used when the parent header cell carries `data-numeric`. |
| [ObjectsGridCardCell](/v3/reference/theming/keys/ObjectsGridCardCell.md) | key | 2 | The card-layout field label fragment. It renders as a compact muted micro-label that participates directly in [ObjectsGrid.cardContainer](/v3/reference/theming/keys/ObjectsGrid.md#theme-key-ObjectsGrid-cardContainer). |
| [ObjectsGridBodyCell](/v3/reference/theming/keys/ObjectsGridBodyCell.md) | key | 2 | The table-layout field cell. It provides density-aware row height, numeric and mono alignment hooks, and the foreground text treatment for value slots. Density tiers map default, compact, and condensed rows to progressively tighter row heights. |

## [form](/v3/reference/theming/keys/family/form.md)

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [FieldSetMany](/v3/reference/theming/keys/FieldSetMany.md) | key | 10 | Card shell for a repeated-value fieldset. See also: [FieldSetStackedInline.root](/v3/reference/theming/keys/FieldSetStackedInline.md#theme-key-FieldSetStackedInline-root). |
| [FieldSetRange](/v3/reference/theming/keys/FieldSetRange.md) | key | 8 | Card shell for paired lower and upper range fields, including nested-fieldset inset chrome. |
| [FieldSetStackedInline](/v3/reference/theming/keys/FieldSetStackedInline.md) | key | 21 | Card shell for stacked inline rows, including nested-fieldset inset chrome. |
| [FieldSetStackedInlineRow](/v3/reference/theming/keys/FieldSetStackedInlineRow.md) | key | 8 | Class hook for the unsaved-row Delete button. Tone, emphasis, and size come from the component; appearance comes from [Button](/v3/reference/theming/keys/Button.md). |
| [FieldSetTabularInline](/v3/reference/theming/keys/FieldSetTabularInline.md) | key | 27 | Class hook for the unsaved-row Delete button. Tone, emphasis, and size come from the component; appearance comes from [Button](/v3/reference/theming/keys/Button.md). |
| [FilterChip](/v3/reference/theming/keys/FilterChip.md) | key | 5 | Pill container. Primary tint at rest; destructive tint flags a value the server rejected. |
| [FilterFieldForm](/v3/reference/theming/keys/FilterFieldForm.md) | key | 2 | Submit row at the foot of the form. Apply alone (right-aligned) when adding; Remove + Apply split apart when editing an active filter. |
| [FilterForm](/v3/reference/theming/keys/FilterForm.md) | key | 2 | Vertical form body inside a filter popover. |
| [FilterGroup](/v3/reference/theming/keys/FilterGroup.md) | key | 6 | Root wrapper. `contents` so it adds no box of its own: the teleported menu trigger and the chips strip flow as direct children of the list layout. |
| [FilterMenu](/v3/reference/theming/keys/FilterMenu.md) | key | 3 | Back row that returns from the drill-in form to the field list. |
| [FormMessage](/v3/reference/theming/keys/FormMessage.md) | key | 2 | Outer spacing for form-scope feedback. |
| [FormModel](/v3/reference/theming/keys/FormModel.md) | key | 8 | Root model-form wrapper. |
| [FormSection](/v3/reference/theming/keys/FormSection.md) | key | 3 | Section stack for a long-form group. |
| [FormSectionTitle](/v3/reference/theming/keys/FormSectionTitle.md) | key | 1 | Eyebrow heading text for a form section. |
| [FormGrid](/v3/reference/theming/keys/FormGrid.md) | key | 1 | Twelve-column field grid with `data-col` span hooks at the form breakpoint. |
| [FormActions](/v3/reference/theming/keys/FormActions.md) | key | 2 | Wrapping action row for submit, cancel, and secondary controls. |
| [FormHiddenFeedback](/v3/reference/theming/keys/FormHiddenFeedback.md) | key | 9 | Compact wrapper for hidden-field feedback controls. |
| [FieldWarningsList](/v3/reference/theming/keys/FieldWarningsList.md) | key | 5 | Wrapper stacking each field's warning entry. |
| [TypedConfirmField](/v3/reference/theming/keys/TypedConfirmField.md) | key | 4 | Muted confirmation box that groups the label and input before a destructive action. |

## [widgets](/v3/reference/theming/keys/family/widgets.md)

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [WidgetCheckbox](/v3/reference/theming/keys/WidgetCheckbox.md) | key | 4 | The outer row aligns the checkbox control with its label chrome. |
| [WidgetCombobox](/v3/reference/theming/keys/WidgetCombobox.md) | key | 1 | The trigger uses the input-shell recipe for searchable pickers. |
| [WidgetDuration](/v3/reference/theming/keys/WidgetDuration.md) | key | 6 | The root intentionally carries no chrome so form layout owns spacing. |
| [WidgetDateField](/v3/reference/theming/keys/WidgetDateField.md) | key | 5 | Pass-through hook for the segment shell. The shell recipe lives on [DateField.root](/v3/reference/theming/keys/DateField.md#theme-key-DateField-root). |
| [WidgetDateRangeField](/v3/reference/theming/keys/WidgetDateRangeField.md) | key | 6 | Pass-through hook for the segment shell. The shell recipe lives on [DateRangeField.root](/v3/reference/theming/keys/DateRangeField.md#theme-key-DateRangeField-root). |
| [WidgetTimeRangeField](/v3/reference/theming/keys/WidgetTimeRangeField.md) | key | 4 | The row holding both bounds and the separator. Without it the two shells are block-level and stack, so a time range reads as two unrelated fields. |
| [WidgetUnmapped](/v3/reference/theming/keys/WidgetUnmapped.md) | key | 1 | The diagnostic block. Reads as a destructive notice at supporting-text size so it sits inside a field's content column without impersonating a control. The edge is a `hairline`, matching [Alert.root](/v3/reference/theming/keys/Alert.md#theme-key-Alert-root), because a saturated 1px border fringes at integer DPR. |
| [WidgetFile](/v3/reference/theming/keys/WidgetFile.md) | key | 5 | The root stays transparent so the field shell provides the surface. |
| [WidgetGenericAutoComplete](/v3/reference/theming/keys/WidgetGenericAutoComplete.md) | key | 4 | The root remains unstyled so the widget can sit inside any form shell. |
| [WidgetHtml](/v3/reference/theming/keys/WidgetHtml.md) | key | 6 | The root adds no spacing so form composition controls the editor block. |
| [WidgetImage](/v3/reference/theming/keys/WidgetImage.md) | key | 3 | The root is transparent so image widgets inherit the surrounding field rhythm. |
| [WidgetJson](/v3/reference/theming/keys/WidgetJson.md) | key | 2 | Bordered control surface that mirrors textarea invalid and disabled states. |
| [WidgetReadOnly](/v3/reference/theming/keys/WidgetReadOnly.md) | key | 10 | The root has no chrome because read-mode rows are owned by the field shell. |
| [WidgetLabel](/v3/reference/theming/keys/WidgetLabel.md) | key | 5 | The root grid pairs label text with feedback actions above the control. |
| [WidgetPreviewableTemplate](/v3/reference/theming/keys/WidgetPreviewableTemplate.md) | key | 7 | The root adds no chrome so the surrounding form section owns spacing. |
| [WidgetTemplateLegend](/v3/reference/theming/keys/WidgetTemplateLegend.md) | key | 3 | The root stays unstyled so the legend can be embedded beside any template widget. |

## [shell](/v3/reference/theming/keys/family/shell.md)

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [Accordion](/v3/reference/theming/keys/Accordion.md) | key | 1 | The root hook for the accordion wrapper. It intentionally ships without chrome so callers can compose accordion groups inside Card, Item, or plain page sections. |
| [AccordionItem](/v3/reference/theming/keys/AccordionItem.md) | key | 1 | The wrapper for one disclosure row. It paints the simple bottom divider and removes it from the final item, keeping accordion chrome owned by items rather than the root. |
| [AccordionContent](/v3/reference/theming/keys/AccordionContent.md) | key | 2 | The animated collapsible content region. It owns the open and closed height animations and applies body text sizing while leaving padding to [AccordionContent.inner](/v3/reference/theming/keys/AccordionContent.md#theme-key-AccordionContent-inner). |
| [AccordionTrigger](/v3/reference/theming/keys/AccordionTrigger.md) | key | 3 | The clickable accordion header. It uses the container typography rhythm, exposes a focus outline, and rotates direct SVG icons when the item is open. |
| [AlertDialogAction](/v3/reference/theming/keys/AlertDialogAction.md) | key | 1 | Extra classes for the Button rendered inside AlertDialogAction. Button owns the tone, emphasis, size, focus, and disabled recipes; this slot is intentionally empty by default so the wrapper cannot drift from the button contract. |
| [AlertDialogCancel](/v3/reference/theming/keys/AlertDialogCancel.md) | key | 1 | Extra classes for the Button rendered inside AlertDialogCancel. Button owns the tone, emphasis, size, focus, and disabled recipes; this slot only adds mobile spacing for the stacked alert-dialog footer layout. |
| [AlertDialogContent](/v3/reference/theming/keys/AlertDialogContent.md) | key | 2 | The centered alert dialog surface. It uses the modal radius, overlay shadow, fixed viewport centering, and entrance or exit motion expected for blocking confirmations. |
| [AlertDialogDescription](/v3/reference/theming/keys/AlertDialogDescription.md) | key | 1 | The supporting copy below an alert dialog title. It uses muted small text so consequence detail supports the title without competing with the action buttons. |
| [AlertDialogFooter](/v3/reference/theming/keys/AlertDialogFooter.md) | key | 1 | The action row for an alert dialog. It stacks buttons in reverse order on narrow screens and aligns them to the end once horizontal space is available. |
| [AlertDialogHeader](/v3/reference/theming/keys/AlertDialogHeader.md) | key | 1 | The title and description stack at the top of an alert dialog. It centers copy on narrow screens and switches to left alignment at the small breakpoint. |
| [AlertDialogTitle](/v3/reference/theming/keys/AlertDialogTitle.md) | key | 1 | The primary heading for an alert dialog. It uses a compact semibold heading treatment sized for modal content, not page-level display text. |
| [Collapsible](/v3/reference/theming/keys/Collapsible.md) | key | 1 | The root hook for generic collapsible state. It intentionally has no visual recipe because Collapsible is a logic primitive. |
| [CollapsibleContent](/v3/reference/theming/keys/CollapsibleContent.md) | key | 1 | The region controlled by a CollapsibleTrigger. It ships empty so feature surfaces can decide whether the content behaves like inline reveal, row detail, or raw-debug disclosure. |
| [CollapsibleTrigger](/v3/reference/theming/keys/CollapsibleTrigger.md) | key | 1 | The trigger hook for a generic collapsible. It ships empty so callers can use links, rows, buttons, or custom controls without inheriting accordion chrome. |
| [Card](/v3/reference/theming/keys/Card.md) | key | 1 | The framed card surface. It owns the card background, border, radius, vertical rhythm, and non-raised shadow contract; padding on the horizontal axis belongs to child slots. |
| [CardHeader](/v3/reference/theming/keys/CardHeader.md) | key | 1 | The leading card header grid. It creates title and description rows and switches to a two-column layout when [CardAction.root](/v3/reference/theming/keys/CardAction.md#theme-key-CardAction-root) is present. |
| [CardTitle](/v3/reference/theming/keys/CardTitle.md) | key | 1 | The primary title text inside a card header. It uses compact semibold type so card headings stay subordinate to page titles. |
| [CardDescription](/v3/reference/theming/keys/CardDescription.md) | key | 1 | The secondary card header copy. It uses muted body text for explanatory text below [CardTitle.root](/v3/reference/theming/keys/CardTitle.md#theme-key-CardTitle-root). |
| [CardAction](/v3/reference/theming/keys/CardAction.md) | key | 1 | The trailing card header action region. It parks in the top-right column and spans the title and description rows without adding wrapper layout logic. |
| [CardContent](/v3/reference/theming/keys/CardContent.md) | key | 1 | The body content inset for a card. It provides the horizontal padding that Card itself omits so full-width header or footer borders can span cleanly. |
| [CardFooter](/v3/reference/theming/keys/CardFooter.md) | key | 1 | The trailing card footer row. It aligns footer content horizontally and adds top padding when the footer carries a top divider (a raw `border-t` or the DPR-tracked `border-t-hairline`; prefer the hairline form, see README § 7.3). |
| [DialogContent](/v3/reference/theming/keys/DialogContent.md) | key | 2 | The dialog surface. Standard dialogs use fixed viewport centering, the modal radius, and overlay shadow; full-screen dialogs replace that geometry with a viewport-filling surface. Both own the paired background and foreground tokens. |
| [DialogDescription](/v3/reference/theming/keys/DialogDescription.md) | key | 1 | The supporting copy below a dialog title. It uses muted small text so detail remains subordinate to the title and body content. |
| [DialogFooter](/v3/reference/theming/keys/DialogFooter.md) | key | 1 | The action row for dialog footers. It stacks in reverse order on narrow screens and aligns trailing actions on wider screens. |
| [DialogHeader](/v3/reference/theming/keys/DialogHeader.md) | key | 1 | The title and description stack at the top of a dialog. It centers copy on narrow screens and switches to left alignment at the small breakpoint. |
| [DialogOverlay](/v3/reference/theming/keys/DialogOverlay.md) | key | 1 | The dialog backdrop layer. It fills the viewport with the shared overlay token and fades with dialog state changes. |
| [DialogScrollContent](/v3/reference/theming/keys/DialogScrollContent.md) | key | 3 | The scrollable dialog surface. It stays centered inside the scroll overlay while preserving the modal radius, border, and overlay shadow used by dialog surfaces. |
| [DialogTitle](/v3/reference/theming/keys/DialogTitle.md) | key | 1 | The primary heading for a dialog. It uses compact semibold type sized for modal content, not page-level display text. |
| [Field](/v3/reference/theming/keys/Field.md) | key | 1 | The outer field layout wrapper. It switches between vertical, horizontal, responsive, and read-only grid layouts while carrying invalid state color. |
| [FieldContent](/v3/reference/theming/keys/FieldContent.md) | key | 1 | The non-label content stack inside a field. It groups controls, helper text, and validation messages into a compact flex column. |
| [FieldDescription](/v3/reference/theming/keys/FieldDescription.md) | key | 1 | The helper text beneath or beside a field control. It uses supporting text size, muted color, and link styling that keeps explanatory copy readable without becoming the primary label. |
| [FieldGroup](/v3/reference/theming/keys/FieldGroup.md) | key | 1 | The stack for related fields and nested field groups. It establishes the field-group container query used by responsive fields and tightens spacing for checkbox and radio groups. |
| [FieldLabel](/v3/reference/theming/keys/FieldLabel.md) | key | 1 | The label text or label-card wrapper for a field. It handles disabled opacity, nested control-card framing, and checked-state tint for label-wrapped choices. |
| [FieldLegend](/v3/reference/theming/keys/FieldLegend.md) | key | 1 | The legend or label-style heading for grouped fields. Its variant attribute chooses between larger legend text and compact label text. |
| [FieldMessage](/v3/reference/theming/keys/FieldMessage.md) | key | 2 | The validation or warning message attached to a field. It maps error severity to destructive text and all other severities to warning text. |
| [FieldSeparator](/v3/reference/theming/keys/FieldSeparator.md) | key | 3 | The positioned wrapper for a labelled field divider. It reserves the line height and variant-specific vertical offset used inside field groups. |
| [FieldSet](/v3/reference/theming/keys/FieldSet.md) | key | 1 | The stack for a fieldset's child fields. It uses the default field rhythm and tightens spacing when the direct child is a checkbox or radio group. |
| [FieldTitle](/v3/reference/theming/keys/FieldTitle.md) | key | 1 | The compact title text adjacent to field content. It follows field disabled opacity and uses label-weight type for local field headings. |
| [HoverCardTrigger](/v3/reference/theming/keys/HoverCardTrigger.md) | key | 1 | The trigger hook for hover-card content. It ships empty so the trigger can inherit the semantics and visual treatment of the element that owns the hover affordance. |
| [HoverCardContent](/v3/reference/theming/keys/HoverCardContent.md) | key | 1 | The floating hover-card panel. It uses the popover surface recipe at a tighter width for glance-weight summaries. |
| [Item](/v3/reference/theming/keys/Item.md) | key | 1 | The row-like item wrapper. It carries the default, outline, and muted variants, size spacing, anchor hover behavior, and focus treatment. |
| [ItemActions](/v3/reference/theming/keys/ItemActions.md) | key | 1 | The trailing action group inside an item. It keeps adjacent controls aligned and evenly spaced without affecting the main content column. |
| [ItemContent](/v3/reference/theming/keys/ItemContent.md) | key | 1 | The main text stack inside an item. It flexes to fill available space and lets a following content block opt out of that growth. |
| [ItemDescription](/v3/reference/theming/keys/ItemDescription.md) | key | 1 | The secondary item copy. It clamps to two lines, uses muted body text, and styles links as quiet inline affordances. |
| [ItemFooter](/v3/reference/theming/keys/ItemFooter.md) | key | 1 | The low-emphasis metadata row below item content. It uses compact mono supporting text so timestamps, counters, and machine-generated values read as metadata. |
| [ItemGroup](/v3/reference/theming/keys/ItemGroup.md) | key | 1 | The stack wrapper for related items. It opens a named group scope and leaves borders or section chrome to the caller. |
| [ItemHeader](/v3/reference/theming/keys/ItemHeader.md) | key | 1 | The low-emphasis metadata row above item content. It mirrors [ItemFooter.root](/v3/reference/theming/keys/ItemFooter.md#theme-key-ItemFooter-root) for compact mono metadata before the title. |
| [ItemMedia](/v3/reference/theming/keys/ItemMedia.md) | key | 1 | The leading media region for an item. The `icon` variant creates a 32px bordered tile, the `image` variant creates a 40px cropped image frame, and the default stays transparent. |
| [ItemSeparator](/v3/reference/theming/keys/ItemSeparator.md) | key | 1 | The divider between item rows. It removes extra vertical margin so separators can be used in dense item groups. |
| [ItemTitle](/v3/reference/theming/keys/ItemTitle.md) | key | 1 | The primary label inside an item. It uses body-sized medium text and inline gap support for leading or trailing inline elements. |
| [Label](/v3/reference/theming/keys/Label.md) | key | 1 | The accessible label text for controls and grouped inputs. It handles disabled states from both group and peer contexts while preserving compact inline alignment. |
| [PopoverContent](/v3/reference/theming/keys/PopoverContent.md) | key | 1 | The positioned popover panel. Uses the shared floating surface recipe. Width is not set here — the element uses `width: auto` (shrink-to-fit) by default; pass a `class` prop to the `PopoverContent` component to set a specific width or minimum if the content needs one. |
| [ResizableHandle](/v3/reference/theming/keys/ResizableHandle.md) | key | 2 | The draggable divider between resizable panels. It expands the hit area around the 1px visual rule and adapts the affordance for horizontal or vertical panel groups. |
| [ResizablePanelGroup](/v3/reference/theming/keys/ResizablePanelGroup.md) | key | 1 | The flex container for resizable panels. It switches from row to column layout when the panel group orientation is vertical. |
| [ScrollArea](/v3/reference/theming/keys/ScrollArea.md) | key | 2 | The root wrapper for a custom scroll area. It establishes relative positioning for scrollbars without adding surface chrome. |
| [ScrollBar](/v3/reference/theming/keys/ScrollBar.md) | key | 2 | The custom scrollbar track. It uses a 10px touch target and switches its border side and dimensions by orientation. |
| [Separator](/v3/reference/theming/keys/Separator.md) | key | 1 | The plain horizontal or vertical dividing rule. It is a single border-token line with no label or inset variant. |
| [DrawerContent](/v3/reference/theming/keys/DrawerContent.md) | key | 2 | The edge-attached drawer surface. It reads Vaul direction attributes to choose edge, size, max height, and which modal-radius corners stay rounded. |
| [DrawerDescription](/v3/reference/theming/keys/DrawerDescription.md) | key | 1 | The supporting copy inside a drawer. It uses muted small text to stay subordinate to the drawer title and body content. |
| [DrawerFooter](/v3/reference/theming/keys/DrawerFooter.md) | key | 1 | The trailing action area inside a drawer. It pins itself after drawer body content and stacks actions with the standard 4px-grid gap. |
| [DrawerHeader](/v3/reference/theming/keys/DrawerHeader.md) | key | 1 | The title and description stack inside a drawer. It applies the drawer's default 16px inset and compact vertical gap. |
| [DrawerOverlay](/v3/reference/theming/keys/DrawerOverlay.md) | key | 1 | The drawer backdrop layer. It fills the viewport with the shared overlay token and fades with drawer state changes. |
| [DrawerTitle](/v3/reference/theming/keys/DrawerTitle.md) | key | 1 | The primary heading inside a drawer. It uses foreground semibold text without page-title scaling. |
| [SheetContent](/v3/reference/theming/keys/SheetContent.md) | key | 2 | The edge-attached sheet surface. It maps the `side` prop to slide direction, edge border, size, and overlay shadow while preserving a flex column body. |
| [SheetDescription](/v3/reference/theming/keys/SheetDescription.md) | key | 1 | The supporting copy inside a sheet. It uses muted small text to stay subordinate to the sheet title and body content. |
| [SheetFooter](/v3/reference/theming/keys/SheetFooter.md) | key | 1 | The trailing action area inside a sheet. It sits after the body content and stacks actions with the standard inset. |
| [SheetHeader](/v3/reference/theming/keys/SheetHeader.md) | key | 1 | The title and description stack inside a sheet. It applies the sheet's default 16px inset and compact vertical gap. |
| [SheetOverlay](/v3/reference/theming/keys/SheetOverlay.md) | key | 1 | The sheet backdrop layer. It fills the viewport with the shared overlay token and fades with sheet state changes. |
| [SheetTitle](/v3/reference/theming/keys/SheetTitle.md) | key | 1 | The primary heading inside a sheet. It uses foreground semibold text without page-title scaling. |
| [Stepper](/v3/reference/theming/keys/Stepper.md) | key | 1 | The root flex row for a stepper. It provides only the step gap so orientation and step semantics stay with the composed step items. |
| [StepperItem](/v3/reference/theming/keys/StepperItem.md) | key | 1 | The wrapper for one step and its connector context. It opens the state group used by indicator and separator slots and suppresses pointer events when disabled. |
| [StepperTrigger](/v3/reference/theming/keys/StepperTrigger.md) | key | 1 | The selectable control for a step. It stacks indicator and label content in a compact centered column with a modest focusable radius. |
| [StepperIndicator](/v3/reference/theming/keys/StepperIndicator.md) | key | 1 | The circular step marker. It maps active, completed, disabled, and upcoming states to the stepper color contract. |
| [StepperTitle](/v3/reference/theming/keys/StepperTitle.md) | key | 1 | The primary label for a step. It stays on one line so horizontal steppers do not shift as labels wrap. |
| [StepperDescription](/v3/reference/theming/keys/StepperDescription.md) | key | 1 | The supporting text beneath a step title. It uses muted extra-small text for optional detail below the primary label. |
| [StepperSeparator](/v3/reference/theming/keys/StepperSeparator.md) | key | 1 | The connector line between steps. It stays muted for upcoming or disabled steps and switches to accent after completion. |
| [Tabs](/v3/reference/theming/keys/Tabs.md) | key | 1 | The root stack for tabbed content. It keeps the tab list and active panel separated by a compact vertical gap. |
| [TabsContent](/v3/reference/theming/keys/TabsContent.md) | key | 1 | The active tab panel. It flexes to fill remaining space and removes default outline chrome so focus treatment can be handled by child content when needed. |
| [TabsList](/v3/reference/theming/keys/TabsList.md) | key | 1 | The segmented tab-list surface. It uses muted fill, compact height, and a small internal padding so active triggers read as selected slabs. |
| [TabsTrigger](/v3/reference/theming/keys/TabsTrigger.md) | key | 1 | The selectable tab segment. It handles active fill, dark-mode contrast, icon sizing, disabled state, and keyboard focus while staying within the segmented list surface. |
| [TooltipContent](/v3/reference/theming/keys/TooltipContent.md) | key | 2 | The compact floating tooltip panel. It inverts foreground and background tokens, uses control radius, and follows the tooltip surface rule. |
| [StickyBar](/v3/reference/theming/keys/StickyBar.md) | key | 5 | The sticky action-bar wrapper. It stays anchored just above the page edge and translates out of view when `hidden` is true. |
| [StickyStackProvider](/v3/reference/theming/keys/StickyStackProvider.md) | key | 2 | Structural wrapper around the bars and the scrolling content. Lays them out in a column and |
| [PageTitle](/v3/reference/theming/keys/PageTitle.md) | key | 9 | Outer header bar. Carries the bottom hairline that closes the header and, when `sticky` is set, pins the bar to the top of the scroll viewport at `z-30`. Merge extra classes via `themeOverride` (or `setTheme`) on this slot without overriding the chrome. |

## [views](/v3/reference/theming/keys/family/views.md)

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [_ActionBanner](/v3/reference/theming/keys/_ActionBanner.md) | primitive | 5 | Shared banner row scaffold: icon tile plus body column with a bottom separator. |
| [ActionForm](/v3/reference/theming/keys/ActionForm.md) | key | 21 | Outer wrapper. Caps content at the `7xl` content column so a confirmation form does not stretch the full width of a wide viewport. With `page`, the cap moves to [ActionForm.content](/v3/reference/theming/keys/ActionForm.md#theme-key-ActionForm-content), so the sticky action bar spans the page. |
| [ModelActionForm](/v3/reference/theming/keys/ModelActionForm.md) | key | 26 | Outer wrapper. Empty so the card or bare slot owns all visible chrome; layout decisions belong to whichever inner shell the form renders. |
| [ViewDestroy](/v3/reference/theming/keys/ViewDestroy.md) | key | 6 | Outer wrapper. Empty; the embedded [ModelActionForm](/v3/reference/theming/keys/ModelActionForm.md) renders the page in its danger tone: the sticky action bar, the gutter, and the selected-records panel. |
| [AuthForm](/v3/reference/theming/keys/AuthForm.md) | key | 7 | Outer wrapper that fills the viewport vertically so the framed card can sit against the page background without a separate page chrome. |
| [AuthorizingForm](/v3/reference/theming/keys/AuthorizingForm.md) | key | 7 | Outer wrapper that fills the viewport and centers the framed card both axes. Uses `min-h-svh` rather than `min-h-full` so the fill works regardless of whether an integrator's shell gives this component's ancestors an explicit height; it never depends on a height cascade it does not control. Differs from [AuthForm.root](/v3/reference/theming/keys/AuthForm.md#theme-key-AuthForm-root) which flows top-aligned; the consent step is short enough that a vertically centered card reads as a focused decision surface. |
| [ViewList](/v3/reference/theming/keys/ViewList.md) | key | 15 | Class forwarded to the `selected_` checkbox column on the embedded [ObjectsGrid](/v3/reference/theming/keys/ObjectsGrid.md). Collapses the column to `w-0` at the `lg+` table breakpoint so card layouts keep room for the selection toggle while the table layout absorbs it into the row chrome. The breakpoint is hard-coded rather than derived from the `tableBreakpoint` prop because Tailwind purges classes it cannot see at build time; keep this aligned with the prop default. |
| [ViewHistoryList](/v3/reference/theming/keys/ViewHistoryList.md) | key | 23 | Outer wrapper. Empty by default; the meta strip, embedded grid, and empty-state card own all visible chrome so the wrapper stays a layout-only anchor. |
| [DetailView](/v3/reference/theming/keys/DetailView.md) | key | 4 | Outer wrapper. Layout-only; PageTitle, the StickyBar, and the body below own the visible chrome, so this stays empty by default. The `class` prop merges here. |
| [ViewCreate](/v3/reference/theming/keys/ViewCreate.md) | key | 2 | Outer wrapper. Layout-only; PageTitle, the StickyBar, and the form body below own the visible chrome, so this stays empty by default. The `class` prop merges here. |
| [ViewRead](/v3/reference/theming/keys/ViewRead.md) | key | 4 | Outer wrapper. Layout-only; PageTitle, the StickyBar, and the body below own the visible chrome, so this stays empty by default. |
| [ViewUpdate](/v3/reference/theming/keys/ViewUpdate.md) | key | 4 | Outer wrapper. Layout-only; PageTitle, the StickyBar, and the form body below own the visible chrome, so this stays empty by default. The `class` prop merges here. |
| [ViewLoading](/v3/reference/theming/keys/ViewLoading.md) | key | 13 | Centers the loading status within the route container. |
| [ViewNotFound](/v3/reference/theming/keys/ViewNotFound.md) | key | 2 | Centering wrapper around the embedded [SystemMessageCard](/v3/reference/theming/keys/SystemMessageCard.md). The card chassis is fixed-width, so a flex parent is required for it to sit in the middle of the viewport. Mirrors [ViewLoading.root](/v3/reference/theming/keys/ViewLoading.md#theme-key-ViewLoading-root). |
| [ViewActionNotFound](/v3/reference/theming/keys/ViewActionNotFound.md) | key | 2 | Centering wrapper around the embedded [SystemMessageCard](/v3/reference/theming/keys/SystemMessageCard.md). See [ViewNotFound.root](/v3/reference/theming/keys/ViewNotFound.md#theme-key-ViewNotFound-root); the two views share the recipe so missing-route and missing-action surfaces read as siblings. |
| [ViewAction](/v3/reference/theming/keys/ViewAction.md) | key | 1 | Outer wrapper around the embedded [PageTitle](/v3/reference/theming/keys/PageTitle.md) and [ModelActionForm](/v3/reference/theming/keys/ModelActionForm.md). Empty by default; the two inner shells own all visible chrome, so this key exists only as the consumer-facing override surface and the data-qa anchor. |
| [ViewActivate](/v3/reference/theming/keys/ViewActivate.md) | key | 1 | Outer wrapper around the embedded [PageTitle](/v3/reference/theming/keys/PageTitle.md) and the activate-flow [ModelActionForm](/v3/reference/theming/keys/ModelActionForm.md). Empty by default; the chrome lives on the inner shells. The view also renders a centred `LoadingSpinnerBlock` while [ModelActionForm](/v3/reference/theming/keys/ModelActionForm.md)'s model config loads; that fallback inherits its own block recipe and is not themed here. |
| [ViewDeactivate](/v3/reference/theming/keys/ViewDeactivate.md) | key | 1 | Outer wrapper around the embedded [PageTitle](/v3/reference/theming/keys/PageTitle.md) and the deactivate-flow [ModelActionForm](/v3/reference/theming/keys/ModelActionForm.md). Empty by default; the chrome lives on the inner shells. The view also renders a centred `LoadingSpinnerBlock` while [ModelActionForm](/v3/reference/theming/keys/ModelActionForm.md)'s model config loads; that fallback inherits its own block recipe and is not themed here. |
| [ViewTwoFactorAuth](/v3/reference/theming/keys/ViewTwoFactorAuth.md) | key | 5 | Outer wrapper. Empty; the embedded [AuthorizingForm](/v3/reference/theming/keys/AuthorizingForm.md) owns the framed card and viewport-centred chrome, so this key is left open as the consumer-facing override surface. |
| [ViewSetupDevice](/v3/reference/theming/keys/ViewSetupDevice.md) | key | 13 | Horizontal stepper rail above the form body. `mb-4` opens a 16 px gap between the rail and the first field so the progress indicator reads as supporting chrome, not the form's leading row. Used as the `<ol>` element so screen readers see the steps as a list; the consumer supplies `aria-label="Setup progress"`. |
| [ViewExecuteTransition](/v3/reference/theming/keys/ViewExecuteTransition.md) | key | 1 | Outer wrapper around the embedded [PageTitle](/v3/reference/theming/keys/PageTitle.md) and [ModelActionForm](/v3/reference/theming/keys/ModelActionForm.md). Empty by default; the two inner shells own all visible chrome, so this key exists only as the consumer-facing override surface and the data-qa anchor. |
| [ViewRecoveryCodes](/v3/reference/theming/keys/ViewRecoveryCodes.md) | key | 12 | Outer wrapper. Empty; the embedded [AuthForm](/v3/reference/theming/keys/AuthForm.md) owns the framed card chassis, and the slots inside it own all visible chrome. |

## [navigation](/v3/reference/theming/keys/family/navigation.md)

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [Breadcrumb](/v3/reference/theming/keys/Breadcrumb.md) | key | 1 | Root context only. The trail's visible layout lives on [BreadcrumbList.root](/v3/reference/theming/keys/BreadcrumbList.md#theme-key-BreadcrumbList-root). |
| [BreadcrumbList](/v3/reference/theming/keys/BreadcrumbList.md) | key | 1 | Inline wrapping row for breadcrumb items. |
| [BreadcrumbItem](/v3/reference/theming/keys/BreadcrumbItem.md) | key | 1 | One breadcrumb step plus its separator affordance, sized as an inline cluster. |
| [BreadcrumbLink](/v3/reference/theming/keys/BreadcrumbLink.md) | key | 1 | Navigable trail step. Hover and focus move toward foreground without changing weight. |
| [BreadcrumbPage](/v3/reference/theming/keys/BreadcrumbPage.md) | key | 1 | Current-page trail step. Uses foreground colour, not heavier type, so the trail still reads as one line. |
| [BreadcrumbSeparator](/v3/reference/theming/keys/BreadcrumbSeparator.md) | key | 1 | Separator glyph sizing. Default markup supplies a slash, while custom children can supply another glyph. |
| [BreadcrumbEllipsis](/v3/reference/theming/keys/BreadcrumbEllipsis.md) | key | 2 | Collapsed-step marker. The `interactive` state turns it into the dropdown trigger shape. |
| [DropdownMenuGroup](/v3/reference/theming/keys/DropdownMenuGroup.md) | key | 1 | Semantic grouping only. Item spacing and dividers are owned by child item and separator slots. |
| [DropdownMenuRadioGroup](/v3/reference/theming/keys/DropdownMenuRadioGroup.md) | key | 1 | Semantic radio group only. Individual options own their indicator offset. |
| [DropdownMenuTrigger](/v3/reference/theming/keys/DropdownMenuTrigger.md) | key | 1 | Unstyled trigger pass-through so callers can compose Button or custom trigger chrome. |
| [DropdownMenuContent](/v3/reference/theming/keys/DropdownMenuContent.md) | key | 1 | Popover-like menu surface with bounded height, menu padding, and side-aware entrance motion. |
| [DropdownMenuItem](/v3/reference/theming/keys/DropdownMenuItem.md) | key | 1 | Selectable menu row. Focus uses neutral accent, destructive rows tint text and focus fill without changing the surface recipe. |
| [DropdownMenuCheckboxItem](/v3/reference/theming/keys/DropdownMenuCheckboxItem.md) | key | 2 | Toggleable menu row with reserved indicator space at the leading edge. See also: [DropdownMenuItem.root](/v3/reference/theming/keys/DropdownMenuItem.md#theme-key-DropdownMenuItem-root). |
| [DropdownMenuRadioItem](/v3/reference/theming/keys/DropdownMenuRadioItem.md) | key | 2 | Mutually exclusive menu row. Same layout as [DropdownMenuCheckboxItem.root](/v3/reference/theming/keys/DropdownMenuCheckboxItem.md#theme-key-DropdownMenuCheckboxItem-root); selection state comes from the radio primitive. |
| [DropdownMenuLabel](/v3/reference/theming/keys/DropdownMenuLabel.md) | key | 1 | Non-interactive group label using the mono micro uppercase recipe. |
| [DropdownMenuSeparator](/v3/reference/theming/keys/DropdownMenuSeparator.md) | key | 1 | Full-width menu divider that bleeds through the content padding. |
| [DropdownMenuShortcut](/v3/reference/theming/keys/DropdownMenuShortcut.md) | key | 3 | Alignment wrapper for the trailing keyboard hint. The nested [KbdGroup.root](/v3/reference/theming/keys/KbdGroup.md#theme-key-KbdGroup-root) owns the chord. |
| [DropdownMenuSubTrigger](/v3/reference/theming/keys/DropdownMenuSubTrigger.md) | key | 2 | Menu row that opens a child surface. Open and focused states share the same neutral accent fill. |
| [DropdownMenuSubContent](/v3/reference/theming/keys/DropdownMenuSubContent.md) | key | 1 | Child popover surface for nested menu content. Mirrors [DropdownMenuContent.root](/v3/reference/theming/keys/DropdownMenuContent.md#theme-key-DropdownMenuContent-root) without the scroll height cap. |
| [ContextMenuGroup](/v3/reference/theming/keys/ContextMenuGroup.md) | key | 1 | Semantic grouping only. See also: [DropdownMenuGroup.root](/v3/reference/theming/keys/DropdownMenuGroup.md#theme-key-DropdownMenuGroup-root). |
| [ContextMenuRadioGroup](/v3/reference/theming/keys/ContextMenuRadioGroup.md) | key | 1 | Semantic radio group only. See also: [DropdownMenuRadioGroup.root](/v3/reference/theming/keys/DropdownMenuRadioGroup.md#theme-key-DropdownMenuRadioGroup-root). |
| [ContextMenuTrigger](/v3/reference/theming/keys/ContextMenuTrigger.md) | key | 1 | Unstyled trigger pass-through for the element that owns the context-menu gesture. |
| [ContextMenuContent](/v3/reference/theming/keys/ContextMenuContent.md) | key | 1 | Context-menu surface. Matches [DropdownMenuContent.root](/v3/reference/theming/keys/DropdownMenuContent.md#theme-key-DropdownMenuContent-root) while using context-menu collision sizing. |
| [ContextMenuItem](/v3/reference/theming/keys/ContextMenuItem.md) | key | 1 | Selectable context-menu row. See also: [DropdownMenuItem.root](/v3/reference/theming/keys/DropdownMenuItem.md#theme-key-DropdownMenuItem-root). |
| [ContextMenuCheckboxItem](/v3/reference/theming/keys/ContextMenuCheckboxItem.md) | key | 2 | Toggleable context-menu row with reserved indicator space. See also: [DropdownMenuCheckboxItem.root](/v3/reference/theming/keys/DropdownMenuCheckboxItem.md#theme-key-DropdownMenuCheckboxItem-root). |
| [ContextMenuRadioItem](/v3/reference/theming/keys/ContextMenuRadioItem.md) | key | 2 | Radio-style context-menu row. See also: [DropdownMenuRadioItem.root](/v3/reference/theming/keys/DropdownMenuRadioItem.md#theme-key-DropdownMenuRadioItem-root). |
| [ContextMenuLabel](/v3/reference/theming/keys/ContextMenuLabel.md) | key | 1 | Non-interactive context-menu group label. See also: [DropdownMenuLabel.root](/v3/reference/theming/keys/DropdownMenuLabel.md#theme-key-DropdownMenuLabel-root). |
| [ContextMenuSeparator](/v3/reference/theming/keys/ContextMenuSeparator.md) | key | 1 | Context-menu divider that bleeds through menu padding. See also: [DropdownMenuSeparator.root](/v3/reference/theming/keys/DropdownMenuSeparator.md#theme-key-DropdownMenuSeparator-root). |
| [ContextMenuShortcut](/v3/reference/theming/keys/ContextMenuShortcut.md) | key | 3 | Alignment wrapper for context-menu command shortcuts. See also: [DropdownMenuShortcut.root](/v3/reference/theming/keys/DropdownMenuShortcut.md#theme-key-DropdownMenuShortcut-root). |
| [ContextMenuSubTrigger](/v3/reference/theming/keys/ContextMenuSubTrigger.md) | key | 2 | Context-menu row that opens a child surface. See also: [DropdownMenuSubTrigger.root](/v3/reference/theming/keys/DropdownMenuSubTrigger.md#theme-key-DropdownMenuSubTrigger-root). |
| [ContextMenuSubContent](/v3/reference/theming/keys/ContextMenuSubContent.md) | key | 1 | Child context-menu surface. See also: [DropdownMenuSubContent.root](/v3/reference/theming/keys/DropdownMenuSubContent.md#theme-key-DropdownMenuSubContent-root). |
| [MenubarGroup](/v3/reference/theming/keys/MenubarGroup.md) | key | 1 | Semantic grouping only inside menubar content. See also: [DropdownMenuGroup.root](/v3/reference/theming/keys/DropdownMenuGroup.md#theme-key-DropdownMenuGroup-root). |
| [MenubarRadioGroup](/v3/reference/theming/keys/MenubarRadioGroup.md) | key | 1 | Semantic radio group only inside menubar content. See also: [DropdownMenuRadioGroup.root](/v3/reference/theming/keys/DropdownMenuRadioGroup.md#theme-key-DropdownMenuRadioGroup-root). |
| [Menubar](/v3/reference/theming/keys/Menubar.md) | key | 1 | Horizontal menu bar surface. It keeps the popover/menu family language while the bar shadow stays flat. |
| [MenubarTrigger](/v3/reference/theming/keys/MenubarTrigger.md) | key | 1 | Top-level menubar trigger. Uses compact rounded corners and neutral accent open/focus states. |
| [MenubarContent](/v3/reference/theming/keys/MenubarContent.md) | key | 1 | Floating menu surface opened from the menubar. See also: [DropdownMenuContent.root](/v3/reference/theming/keys/DropdownMenuContent.md#theme-key-DropdownMenuContent-root). |
| [MenubarItem](/v3/reference/theming/keys/MenubarItem.md) | key | 1 | Selectable menubar command row. See also: [DropdownMenuItem.root](/v3/reference/theming/keys/DropdownMenuItem.md#theme-key-DropdownMenuItem-root). |
| [MenubarCheckboxItem](/v3/reference/theming/keys/MenubarCheckboxItem.md) | key | 2 | Toggleable menubar row with reserved indicator space. Differs from dropdown by using the tighter menubar row radius. |
| [MenubarRadioItem](/v3/reference/theming/keys/MenubarRadioItem.md) | key | 2 | Radio-style menubar row. Same row geometry as [MenubarCheckboxItem.root](/v3/reference/theming/keys/MenubarCheckboxItem.md#theme-key-MenubarCheckboxItem-root). |
| [MenubarLabel](/v3/reference/theming/keys/MenubarLabel.md) | key | 1 | Non-interactive menubar group label. See also: [DropdownMenuLabel.root](/v3/reference/theming/keys/DropdownMenuLabel.md#theme-key-DropdownMenuLabel-root). |
| [MenubarSeparator](/v3/reference/theming/keys/MenubarSeparator.md) | key | 1 | Menubar content divider that bleeds through menu padding. See also: [DropdownMenuSeparator.root](/v3/reference/theming/keys/DropdownMenuSeparator.md#theme-key-DropdownMenuSeparator-root). |
| [MenubarShortcut](/v3/reference/theming/keys/MenubarShortcut.md) | key | 3 | Alignment wrapper for the trailing keyboard hint inside menubar content. See also: [DropdownMenuShortcut.root](/v3/reference/theming/keys/DropdownMenuShortcut.md#theme-key-DropdownMenuShortcut-root). |
| [MenubarSubTrigger](/v3/reference/theming/keys/MenubarSubTrigger.md) | key | 2 | Menubar row that opens a nested submenu. See also: [DropdownMenuSubTrigger.root](/v3/reference/theming/keys/DropdownMenuSubTrigger.md#theme-key-DropdownMenuSubTrigger-root). |
| [MenubarSubContent](/v3/reference/theming/keys/MenubarSubContent.md) | key | 1 | Child menubar surface. See also: [DropdownMenuSubContent.root](/v3/reference/theming/keys/DropdownMenuSubContent.md#theme-key-DropdownMenuSubContent-root). |
| [NavigationMenu](/v3/reference/theming/keys/NavigationMenu.md) | key | 1 | Root flex context that centers the navigation menu and scopes viewport mode selectors. |
| [NavigationMenuList](/v3/reference/theming/keys/NavigationMenuList.md) | key | 1 | Top-level list row for navigation menu items, with reset list styling and compact gaps. |
| [NavigationMenuItem](/v3/reference/theming/keys/NavigationMenuItem.md) | key | 1 | Positioning wrapper for one top-level navigation menu entry and its content. |
| [NavigationMenuTrigger](/v3/reference/theming/keys/NavigationMenuTrigger.md) | key | 1 | Header-scale trigger. It intentionally uses a 36px height and half-strength active fill. |
| [NavigationMenuContent](/v3/reference/theming/keys/NavigationMenuContent.md) | key | 1 | Panel content area with motion-aware slide transitions. When the viewport is disabled, this slot becomes its own popover surface. |
| [NavigationMenuLink](/v3/reference/theming/keys/NavigationMenuLink.md) | key | 1 | Link row inside a navigation panel. Active uses `bg-accent/50` so hover remains the stronger cue. |
| [NavigationMenuIndicator](/v3/reference/theming/keys/NavigationMenuIndicator.md) | key | 2 | Animated indicator container that lines up the arrow between the trigger and open panel. |
| [NavigationMenuViewport](/v3/reference/theming/keys/NavigationMenuViewport.md) | key | 2 | Absolute wrapper that positions the shared viewport below the trigger row. |
| [PaginationItem](/v3/reference/theming/keys/PaginationItem.md) | key | 1 | Numbered page control. Composes the Button base and switches between outline active and ghost inactive variants, with Button size tiers (defaulting to an icon square). The active item keeps a foreground-colored edge at rest so the current page stands apart from the lighter navigation buttons. |
| [NavigationPaginationNavButton](/v3/reference/theming/keys/NavigationPaginationNavButton.md) | key | 1 | Previous, next, first, or last control. Icon-only, outline, compact (sm) square: composes the Button base and outline variant and pins a `size-vueda-control-sm` square so the four edge controls read as a dense, single-tier cluster. The accessible name rides an `sr-only` label in each SFC; the visible glyph comes from the icon registry. |
| [PaginationContent](/v3/reference/theming/keys/PaginationContent.md) | key | 1 | Compact row that groups page controls without owning their button chrome. |
| [PaginationEllipsis](/v3/reference/theming/keys/PaginationEllipsis.md) | key | 1 | Omitted-page marker sized to align with neighboring pagination controls. |
| [Pagination](/v3/reference/theming/keys/Pagination.md) | key | 1 | Root pagination nav layout, centered across the available width. |
| [NavigationPaginationBar](/v3/reference/theming/keys/NavigationPaginationBar.md) | key | 1 | Footer bar for table and objects-grid pagination, seated against the bottom of card-like data surfaces. The `px-5 py-3` padding matches the list chrome rhythm (e.g. [ViewList.underActionsBar](/v3/reference/theming/keys/ViewList.md#theme-key-ViewList-underActionsBar)) so the chrome above and below the grid read as a matched frame. |
| [PaginationMeta](/v3/reference/theming/keys/PaginationMeta.md) | key | 1 | Compact mono count text for page or record summaries. See also: [NavigationPaginationBar.root](/v3/reference/theming/keys/NavigationPaginationBar.md#theme-key-NavigationPaginationBar-root). |
| [PaginationFooter](/v3/reference/theming/keys/PaginationFooter.md) | key | 7 | Class forwarded to the embedded [NavigationPaginationBar](/v3/reference/theming/keys/NavigationPaginationBar.md) root. Empty by default: the bar supplies the footer chrome (border, surface, radius caps) and the inner [PaginationFooter.layout](/v3/reference/theming/keys/PaginationFooter.md#theme-key-PaginationFooter-layout) owns the responsive arrangement. |
| [SidebarContent](/v3/reference/theming/keys/SidebarContent.md) | key | 1 | Scrollable main sidebar region. Icon-collapsed mode hides overflow so labels do not bleed past the rail. |
| [SidebarFooter](/v3/reference/theming/keys/SidebarFooter.md) | key | 1 | Bottom sidebar section for account and secondary controls, using the same padding cadence as the header. |
| [SidebarUserBlock](/v3/reference/theming/keys/SidebarUserBlock.md) | key | 5 | Horizontal account row for the sidebar footer. |
| [SidebarGroupContent](/v3/reference/theming/keys/SidebarGroupContent.md) | key | 1 | Full-width body area for controls inside a sidebar group. |
| [SidebarGroup](/v3/reference/theming/keys/SidebarGroup.md) | key | 1 | Section wrapper that provides local padding and positioning for group labels and actions. |
| [SidebarHeader](/v3/reference/theming/keys/SidebarHeader.md) | key | 1 | Top sidebar section for brand, search, or primary navigation controls. |
| [SidebarInput](/v3/reference/theming/keys/SidebarInput.md) | key | 1 | Sidebar-local input chrome. It binds hairline and focus colors to sidebar tokens rather than generic input tokens. |
| [SidebarMenuItem](/v3/reference/theming/keys/SidebarMenuItem.md) | key | 1 | Relative wrapper that scopes peer selectors for buttons, badges, and trailing actions. |
| [SidebarMenuSub](/v3/reference/theming/keys/SidebarMenuSub.md) | key | 1 | Nested list rail and indentation for submenu items. Icon-collapsed mode hides the nested list. |
| [SidebarMenuSubItem](/v3/reference/theming/keys/SidebarMenuSubItem.md) | key | 1 | Relative wrapper for one nested sidebar menu item. |
| [SidebarMenu](/v3/reference/theming/keys/SidebarMenu.md) | key | 1 | Vertical menu list with narrow gaps for dense sidebar navigation. |
| [SidebarGroupAction](/v3/reference/theming/keys/SidebarGroupAction.md) | key | 1 | Compact header action aligned to a group label. Hidden in icon-collapsed mode. |
| [SidebarGroupLabel](/v3/reference/theming/keys/SidebarGroupLabel.md) | key | 1 | Sidebar group heading using the page-level eyebrow recipe. |
| [SidebarInset](/v3/reference/theming/keys/SidebarInset.md) | key | 1 | Main content wrapper adjacent to the sidebar. Inset variant chrome exists in source but is not the admin-app default. |
| [SidebarMenuBadge](/v3/reference/theming/keys/SidebarMenuBadge.md) | key | 1 | Count or status badge anchored to a menu button. Tone handling stays local to sidebar tokens and hides in icon-collapsed mode. |
| [SidebarRail](/v3/reference/theming/keys/SidebarRail.md) | key | 1 | Edge hit target for toggling collapsed state. |
| [SidebarSeparator](/v3/reference/theming/keys/SidebarSeparator.md) | key | 1 | Full-bleed sidebar divider. It avoids inset hairlines so section breaks do not read as notches. |
| [SidebarTrigger](/v3/reference/theming/keys/SidebarTrigger.md) | key | 1 | Compact sidebar toggle button. The glyph is supplied through the icon registry. |
| [SidebarMenuAction](/v3/reference/theming/keys/SidebarMenuAction.md) | key | 1 | Trailing menu-item action. `showOnHover` defers visibility until hover, focus-within, or open state on desktop. |
| [SidebarMenuSubButton](/v3/reference/theming/keys/SidebarMenuSubButton.md) | key | 1 | Nested sidebar control. Active state paints the sidebar rail through [--vueda-sidebar-active-rail](/v3/reference/theming/tokens/sidebar.md#css-token-vueda-sidebar-active-rail). |
| [SidebarMenuSkeleton](/v3/reference/theming/keys/SidebarMenuSkeleton.md) | key | 1 | Placeholder menu row that aligns loading content with normal sidebar menu button geometry. |
| [SidebarProvider](/v3/reference/theming/keys/SidebarProvider.md) | key | 1 | Layout wrapper that scopes sidebar state selectors and inset variant background behavior. |
| [Sidebar](/v3/reference/theming/keys/Sidebar.md) | key | 3 | Uncollapsed sidebar body for the `none` collapsible mode. |
| [SidebarMenuButtonChild](/v3/reference/theming/keys/SidebarMenuButtonChild.md) | key | 1 | Primary sidebar menu button content. Active state uses a rail and icon tint, not a type-weight bump, so hover does not shift label width. |

## [display](/v3/reference/theming/keys/family/display.md)

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [AspectRatio](/v3/reference/theming/keys/AspectRatio.md) | key | 1 | Empty pass-through wrapper for ratio-bound media; sizing comes from the primitive and caller. |
| [DateRangeDisplay](/v3/reference/theming/keys/DateRangeDisplay.md) | key | 4 | Inline date-range wrapper that prevents the paired dates and separator from wrapping apart. |
| [DateTimeDisplay](/v3/reference/theming/keys/DateTimeDisplay.md) | key | 7 | Inline time wrapper with baseline spacing for absolute and relative text. |
| [DurationDisplay](/v3/reference/theming/keys/DurationDisplay.md) | key | 3 | Wrapper around the units; unstyled so it inherits the row's text rhythm. |
| [BooleanDisplay](/v3/reference/theming/keys/BooleanDisplay.md) | key | 3 | Wrapper around the word; unstyled so it inherits the row's text rhythm. |
| [ErrorDisplay](/v3/reference/theming/keys/ErrorDisplay.md) | key | 5 | Full-width error block wrapper for message, code, and links. |
| [FileDisplay](/v3/reference/theming/keys/FileDisplay.md) | key | 4 | Wrapper around the link; unstyled so it inherits the row's text rhythm. |
| [JsonDisplay](/v3/reference/theming/keys/JsonDisplay.md) | key | 3 | Mono, per the data-font rule: a payload is machine-generated and its nesting |
| [ClickToCopyText](/v3/reference/theming/keys/ClickToCopyText.md) | key | 1 | Baseline row for a compact read-only value and its copy affordance. |
| [Badge](/v3/reference/theming/keys/Badge.md) | key | 1 | Compact slab badge with variant and numeric recipes. |
| [Kbd](/v3/reference/theming/keys/Kbd.md) | key | 1 | Single keycap chip for shortcut hints; tooltip nesting adjusts contrast. |
| [KbdGroup](/v3/reference/theming/keys/KbdGroup.md) | key | 1 | Inline shortcut sequence wrapper that clusters adjacent [Kbd.root](/v3/reference/theming/keys/Kbd.md#theme-key-Kbd-root) chips into one chord. |
| [Avatar](/v3/reference/theming/keys/Avatar.md) | key | 1 | Circular clipping frame shared by avatar image and fallback content. |
| [AvatarImage](/v3/reference/theming/keys/AvatarImage.md) | key | 1 | Square image fill that inherits clipping from [Avatar.root](/v3/reference/theming/keys/Avatar.md#theme-key-Avatar-root). |
| [AvatarFallback](/v3/reference/theming/keys/AvatarFallback.md) | key | 1 | Centered muted fallback surface for initials or placeholder content. |
| [UserAvatar](/v3/reference/theming/keys/UserAvatar.md) | key | 2 | Initials chip frame. The component supplies size inline from its size prop, while tone selects the primary or sidebar color recipe. |
| [ConsequencesBullets](/v3/reference/theming/keys/ConsequencesBullets.md) | key | 8 | List wrapper for consequence rows with no browser list chrome. |
| [SystemMessageCard](/v3/reference/theming/keys/SystemMessageCard.md) | key | 9 | Centered card chassis with the named tone group used by crest descendants. |
| [LoadingHeartbeatStrip](/v3/reference/theming/keys/LoadingHeartbeatStrip.md) | key | 5 | Mono status row that separates request identity from live loading state. |
| [LoadingSkeletonGhost](/v3/reference/theming/keys/LoadingSkeletonGhost.md) | key | 2 | Bordered placeholder card with the shimmer overlay owned by this loading preview. |
| [DiagnosticStrip](/v3/reference/theming/keys/DiagnosticStrip.md) | key | 3 | Compact diagnostic definition-list grid for request, route, or session values. |
| [SuggestionList](/v3/reference/theming/keys/SuggestionList.md) | key | 13 | Outer suggestion stack; border treatment lives on [SuggestionList.list](/v3/reference/theming/keys/SuggestionList.md#theme-key-SuggestionList-list). |
| [TriedUrlCallout](/v3/reference/theming/keys/TriedUrlCallout.md) | key | 4 | Two-column callout wrapper for the attempted URL. |
| [ResponsiveMenu](/v3/reference/theming/keys/ResponsiveMenu.md) | key | 3 | Full-screen mobile dialog surface with a fixed header row and a bounded body row. |
| [FieldPickerMenuList](/v3/reference/theming/keys/FieldPickerMenuList.md) | key | 4 | Eyebrow at the top of the field-picker list. The in-popover micro-eyebrow recipe (11 px / 600 / 0.04em). |
| [ConstraintsBar](/v3/reference/theming/keys/ConstraintsBar.md) | key | 4 | Collapse wrapper. A `grid-template-rows` animation (0fr to 1fr) reveals or hides the band at the canonical interaction duration; the SFC sets the row value inline. Disabled under reduced-motion. |
| [ScopeChip](/v3/reference/theming/keys/ScopeChip.md) | key | 4 | Pill container. Info tint with a matching hairline. |
| [ScopeGroup](/v3/reference/theming/keys/ScopeGroup.md) | key | 4 | Active-scope chips strip. Muted tint a tier below the card; shares the page-chrome rhythm and carries a bottom hairline. |
| [SortChip](/v3/reference/theming/keys/SortChip.md) | key | 9 | Pill container. Neutral surface with a strong hairline so it reads against both the card and the constraints-strip tint. |
| [SortGroup](/v3/reference/theming/keys/SortGroup.md) | key | 6 | Active-sort chips strip. A sunken tint a tier below the card so it reads as a distinct band from the primary-tinted filter strip above it. Shares the page-chrome rhythm and carries a bottom hairline. |

## [feedback](/v3/reference/theming/keys/family/feedback.md)

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [Alert](/v3/reference/theming/keys/Alert.md) | key | 1 | The outer alert surface and layout grid. It owns the optional icon column, card radius, and semantic status recipe, with variant colors flowing into [AlertDescription.root](/v3/reference/theming/keys/AlertDescription.md#theme-key-AlertDescription-root). |
| [AlertClose](/v3/reference/theming/keys/AlertClose.md) | key | 1 | The positioned dismiss affordance for closable alerts. It stays visually quiet until hover or keyboard focus, then uses the shared ring color through the focus-visible outline. |
| [AlertTitle](/v3/reference/theming/keys/AlertTitle.md) | key | 1 | The primary message heading inside the alert grid. It starts in the content column created by [Alert.root](/v3/reference/theming/keys/Alert.md#theme-key-Alert-root) and clamps to one line so status banners do not grow from long labels. |
| [AlertDescription](/v3/reference/theming/keys/AlertDescription.md) | key | 1 | The supporting message copy beneath the alert title. It inherits variant-specific description tint from [Alert.root](/v3/reference/theming/keys/Alert.md#theme-key-Alert-root) while keeping nested paragraphs readable for short remediation text. |
| [AlertActions](/v3/reference/theming/keys/AlertActions.md) | key | 1 | The inline action row for alert follow-up controls. It shares the alert content column with [AlertTitle.root](/v3/reference/theming/keys/AlertTitle.md#theme-key-AlertTitle-root) and [AlertDescription.root](/v3/reference/theming/keys/AlertDescription.md#theme-key-AlertDescription-root), so buttons align under the message instead of under the icon. |
| [Progress](/v3/reference/theming/keys/Progress.md) | key | 2 | The progress track surface and clipping frame. It sets the canonical 8px default height, optional compact or large heights, and status track tints. |
| [Skeleton](/v3/reference/theming/keys/Skeleton.md) | key | 1 | The loading placeholder block. The primary tint stays neutral enough for rows, cards, and inline placeholders. |
| [Sonner](/v3/reference/theming/keys/Sonner.md) | key | 1 | The toast viewport theme hook passed to vue-sonner. It establishes the toaster group while toast surface, type tint, and icon resolution stay controlled by the wrapper component and Sonner rules. |