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

# shell keys

Source file: `client/lib/theme/vueda-tailwind/shell/index.js`

## Accordion

| 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. |

## Alert Dialog

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [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

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [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

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [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). |

## Dialog

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [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

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [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. |

## Hover Card

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [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

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [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

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [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. |

## Popover

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [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. |

## Resizable

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [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. |

## Scroll Area

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [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

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [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. |

## Drawer

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [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. |

## Sheet

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [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

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [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

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [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. |

## Tooltip

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [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. |

## Sticky Bar

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [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 |

## Page chrome

| Component | Kind | Slots | Description |
| --- | --- | --- | --- |
| [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. |