vueda

Appearance

shell keys ​

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

Accordion ​

ComponentKindSlotsDescription
Accordionkey1The root hook for the accordion wrapper. It intentionally ships without chrome so callers can compose accordion groups inside Card, Item, or plain page sections.
AccordionItemkey1The 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.
AccordionContentkey2The animated collapsible content region. It owns the open and closed height animations and applies body text sizing while leaving padding to AccordionContent.inner.
AccordionTriggerkey3The 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 ​

ComponentKindSlotsDescription
AlertDialogActionkey1Extra 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.
AlertDialogCancelkey1Extra 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.
AlertDialogContentkey2The centered alert dialog surface. It uses the modal radius, overlay shadow, fixed viewport centering, and entrance or exit motion expected for blocking confirmations.
AlertDialogDescriptionkey1The supporting copy below an alert dialog title. It uses muted small text so consequence detail supports the title without competing with the action buttons.
AlertDialogFooterkey1The 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.
AlertDialogHeaderkey1The 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.
AlertDialogTitlekey1The primary heading for an alert dialog. It uses a compact semibold heading treatment sized for modal content, not page-level display text.

Collapsible ​

ComponentKindSlotsDescription
Collapsiblekey1The root hook for generic collapsible state. It intentionally has no visual recipe because Collapsible is a logic primitive.
CollapsibleContentkey1The 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.
CollapsibleTriggerkey1The trigger hook for a generic collapsible. It ships empty so callers can use links, rows, buttons, or custom controls without inheriting accordion chrome.

Card ​

ComponentKindSlotsDescription
Cardkey1The 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.
CardHeaderkey1The leading card header grid. It creates title and description rows and switches to a two-column layout when CardAction.root is present.
CardTitlekey1The primary title text inside a card header. It uses compact semibold type so card headings stay subordinate to page titles.
CardDescriptionkey1The secondary card header copy. It uses muted body text for explanatory text below CardTitle.root.
CardActionkey1The trailing card header action region. It parks in the top-right column and spans the title and description rows without adding wrapper layout logic.
CardContentkey1The 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.
CardFooterkey1The 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 ​

ComponentKindSlotsDescription
DialogContentkey2The 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.
DialogDescriptionkey1The supporting copy below a dialog title. It uses muted small text so detail remains subordinate to the title and body content.
DialogFooterkey1The action row for dialog footers. It stacks in reverse order on narrow screens and aligns trailing actions on wider screens.
DialogHeaderkey1The 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.
DialogOverlaykey1The dialog backdrop layer. It fills the viewport with the shared overlay token and fades with dialog state changes.
DialogScrollContentkey3The scrollable dialog surface. It stays centered inside the scroll overlay while preserving the modal radius, border, and overlay shadow used by dialog surfaces.
DialogTitlekey1The primary heading for a dialog. It uses compact semibold type sized for modal content, not page-level display text.

Field ​

ComponentKindSlotsDescription
Fieldkey1The outer field layout wrapper. It switches between vertical, horizontal, responsive, and read-only grid layouts while carrying invalid state color.
FieldContentkey1The non-label content stack inside a field. It groups controls, helper text, and validation messages into a compact flex column.
FieldDescriptionkey1The 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.
FieldGroupkey1The 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.
FieldLabelkey1The 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.
FieldLegendkey1The legend or label-style heading for grouped fields. Its variant attribute chooses between larger legend text and compact label text.
FieldMessagekey2The validation or warning message attached to a field. It maps error severity to destructive text and all other severities to warning text.
FieldSeparatorkey3The positioned wrapper for a labelled field divider. It reserves the line height and variant-specific vertical offset used inside field groups.
FieldSetkey1The 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.
FieldTitlekey1The compact title text adjacent to field content. It follows field disabled opacity and uses label-weight type for local field headings.

Hover Card ​

ComponentKindSlotsDescription
HoverCardTriggerkey1The 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.
HoverCardContentkey1The floating hover-card panel. It uses the popover surface recipe at a tighter width for glance-weight summaries.

Item ​

ComponentKindSlotsDescription
Itemkey1The row-like item wrapper. It carries the default, outline, and muted variants, size spacing, anchor hover behavior, and focus treatment.
ItemActionskey1The trailing action group inside an item. It keeps adjacent controls aligned and evenly spaced without affecting the main content column.
ItemContentkey1The main text stack inside an item. It flexes to fill available space and lets a following content block opt out of that growth.
ItemDescriptionkey1The secondary item copy. It clamps to two lines, uses muted body text, and styles links as quiet inline affordances.
ItemFooterkey1The low-emphasis metadata row below item content. It uses compact mono supporting text so timestamps, counters, and machine-generated values read as metadata.
ItemGroupkey1The stack wrapper for related items. It opens a named group scope and leaves borders or section chrome to the caller.
ItemHeaderkey1The low-emphasis metadata row above item content. It mirrors ItemFooter.root for compact mono metadata before the title.
ItemMediakey1The 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.
ItemSeparatorkey1The divider between item rows. It removes extra vertical margin so separators can be used in dense item groups.
ItemTitlekey1The primary label inside an item. It uses body-sized medium text and inline gap support for leading or trailing inline elements.

Label ​

ComponentKindSlotsDescription
Labelkey1The accessible label text for controls and grouped inputs. It handles disabled states from both group and peer contexts while preserving compact inline alignment.

Popover ​

ComponentKindSlotsDescription
PopoverContentkey1The 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 ​

ComponentKindSlotsDescription
ResizableHandlekey2The 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.
ResizablePanelGroupkey1The flex container for resizable panels. It switches from row to column layout when the panel group orientation is vertical.

Scroll Area ​

ComponentKindSlotsDescription
ScrollAreakey2The root wrapper for a custom scroll area. It establishes relative positioning for scrollbars without adding surface chrome.
ScrollBarkey2The custom scrollbar track. It uses a 10px touch target and switches its border side and dimensions by orientation.

Separator ​

ComponentKindSlotsDescription
Separatorkey1The plain horizontal or vertical dividing rule. It is a single border-token line with no label or inset variant.

Drawer ​

ComponentKindSlotsDescription
DrawerContentkey2The edge-attached drawer surface. It reads Vaul direction attributes to choose edge, size, max height, and which modal-radius corners stay rounded.
DrawerDescriptionkey1The supporting copy inside a drawer. It uses muted small text to stay subordinate to the drawer title and body content.
DrawerFooterkey1The trailing action area inside a drawer. It pins itself after drawer body content and stacks actions with the standard 4px-grid gap.
DrawerHeaderkey1The title and description stack inside a drawer. It applies the drawer's default 16px inset and compact vertical gap.
DrawerOverlaykey1The drawer backdrop layer. It fills the viewport with the shared overlay token and fades with drawer state changes.
DrawerTitlekey1The primary heading inside a drawer. It uses foreground semibold text without page-title scaling.

Sheet ​

ComponentKindSlotsDescription
SheetContentkey2The edge-attached sheet surface. It maps the side prop to slide direction, edge border, size, and overlay shadow while preserving a flex column body.
SheetDescriptionkey1The supporting copy inside a sheet. It uses muted small text to stay subordinate to the sheet title and body content.
SheetFooterkey1The trailing action area inside a sheet. It sits after the body content and stacks actions with the standard inset.
SheetHeaderkey1The title and description stack inside a sheet. It applies the sheet's default 16px inset and compact vertical gap.
SheetOverlaykey1The sheet backdrop layer. It fills the viewport with the shared overlay token and fades with sheet state changes.
SheetTitlekey1The primary heading inside a sheet. It uses foreground semibold text without page-title scaling.

Stepper ​

ComponentKindSlotsDescription
Stepperkey1The root flex row for a stepper. It provides only the step gap so orientation and step semantics stay with the composed step items.
StepperItemkey1The 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.
StepperTriggerkey1The selectable control for a step. It stacks indicator and label content in a compact centered column with a modest focusable radius.
StepperIndicatorkey1The circular step marker. It maps active, completed, disabled, and upcoming states to the stepper color contract.
StepperTitlekey1The primary label for a step. It stays on one line so horizontal steppers do not shift as labels wrap.
StepperDescriptionkey1The supporting text beneath a step title. It uses muted extra-small text for optional detail below the primary label.
StepperSeparatorkey1The connector line between steps. It stays muted for upcoming or disabled steps and switches to accent after completion.

Tabs ​

ComponentKindSlotsDescription
Tabskey1The root stack for tabbed content. It keeps the tab list and active panel separated by a compact vertical gap.
TabsContentkey1The 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.
TabsListkey1The segmented tab-list surface. It uses muted fill, compact height, and a small internal padding so active triggers read as selected slabs.
TabsTriggerkey1The 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 ​

ComponentKindSlotsDescription
TooltipContentkey2The compact floating tooltip panel. It inverts foreground and background tokens, uses control radius, and follows the tooltip surface rule.
ComponentKindSlotsDescription
StickyBarkey5The sticky action-bar wrapper. It stays anchored just above the page edge and translates out of view when hidden is true.
StickyStackProviderkey2Structural wrapper around the bars and the scrolling content. Lays them out in a column and

Page chrome ​

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

Documents matching: server v3.0.0a1.post1client v3.0.0-alpha.2