vueda

Appearance

Vue Components ​

Views ​

_ActionBanner ​

ActionForm ​

Form shell that executes a server action, handles dry-run validation, shows success/error toasts, and provides confirm and cancel button slots.

Renders a pinned actions strip (confirm + cancel + optional hint) and, when the form has unresolved per-field errors, a structured validation alert sourced from formContext.state.errors. Also mounts a FormConfirmDialog bound to the action's confirmation controller, so actions the server gates behind warning acknowledgement (HTTP 409) can be confirmed and retried. ActionForm renders no warnings content of its own; a consumer that needs to render them (e.g. a bulk action grouping per-object warnings by their display name) supplies the form-confirm-dialog-warnings slot, which forwards FormConfirmDialog's warnings slot scope (warnings, the controller's raw warnings mapping). Without that slot, FormConfirmDialog's own default rendering shows through.

AuthForm ​

Renders a page-level authentication form with a title, subtitle, and action slot. Handles reauthentication redirects and MFA pending-flow detection automatically, delegating the actual form submission to an inner ActionForm.

AuthorizingForm ​

Authentication wrapper that monitors login state and redirects the user after a successful sign-in, rendering a header, subtitle, and delegating to ActionForm for the actual credential form.

DetailView ​

Renders a full detail page for a single model instance, including a page title, a sticky action bar with available object actions and workflow transitions, and a FormModel that displays or edits the object's fields. Fetches the object from the API automatically using the provided app, model, and pk props.

ModelActionForm ​

Wraps ActionForm to execute a named action (such as delete or a custom bulk operation) against one or more model instances. It displays the selected objects, a confirmation message, and handles submission, dry-run validation, and post-action redirect to the appropriate list or detail view.

Renders a tone-tracked confirmation card with a banner, a selected-objects chip-row panel, and a confirm-prompt panel. The bare prop suppresses the card chrome and banner so a parent view (such as ViewDestroy) can wrap the form in its own toned card.

ViewAction ​

Full-page view for executing a model action. Renders a page title with a "Go Back" button and embeds a ModelActionForm for the specified app, model, and action. Accepts an optional primary key and initial form values to pre-populate the form.

ViewActionNotFound ​

Error view displayed when a requested model action route does not exist. Composes SystemMessageCard(tone="info") with a "404" crest showing the unrecognized app/model/action key, a TriedUrlCallout highlighting the action segment as the error, a SuggestionList(shape="action") listing all model-defined actions sorted by string similarity to the tried action, a DiagnosticStrip debug footer, and a Back + Browse all actions actions row. HTTP verb chips in the action shape remain empty until the server exposes per-action verb metadata.

ViewActionRouter ​

Resolves the correct view component for a given model action at runtime, delegating to CRUD views, workflow transition views, or dynamically imported custom action views as appropriate.

ViewActivate ​

View that renders a confirmation form for the activate action via ModelActionForm, then sends a PATCH request to the activate endpoint when the user confirms. Contributes its title to the layout's PageTitle display via usePageTitle and teleports its "Go Back" action into the title action zone via PageActions, matching sibling action-router views (ViewAction, ViewExecuteTransition, ViewHistoryList).

ViewChangePassword ​

Form that allows an authenticated user to change their password by providing their current password and confirming the new one.

ViewCreate ​

Form view for creating a new model instance, including a page title, a sticky submit button bar, and a FormModel that renders the configured fields.

ViewDeactivate ​

Self-service account deactivation view. Wraps the deactivate action in a warning-toned SystemMessageCard chassis: an icon crest identifies the action, an optional ConsequencesBullets list communicates the impact, and a TypedConfirmField gates the destructive button on the operator typing their own email address. Sends a PATCH to the model's deactivate endpoint on confirmation.

ViewDestroy ​

View that presents a confirmation form and displays a list of selected items to be deleted via ModelActionForm, then sends a DELETE request when the user confirms.

Wraps the ModelActionForm in a destructive-toned card with a danger banner so the blast radius is legible at a glance. The banner exposes a linkedObjectCounts prop and a banner slot for surfacing cascading-delete summaries when the server provides them.

ViewExecuteTransition ​

Framework confirmation view for a workflow transition code that has no project-supplied override. Renders a page title with a "Go Back" button and embeds a ModelActionForm, whose submit runs through storeWorkflow.executeTransition instead of the generic model-action endpoint. ViewActionRouter resolves this as the final fallback for a recognized transition code, after any ViewAction{App}{Model}{Code}.vue or ViewAction{Code}.vue project override.

A transition confirmation submits no form values: run-action forwards only the dry-run and warning-acknowledgement arguments to storeWorkflow.executeTransition. A project supplying fields through the extra-fields slot renders and validates them, but their values never reach the request; forward them through a project-supplied override instead.

ViewHistoryList ​

Paginated list view showing the history of one model instance as the actions that produced it. Each action groups the events it wrote, and each event lists its field changes with old and new values, in a table or card layout.

ViewList ​

Full-page list view for a Django model. Renders a paginated, sortable, and searchable data grid with support for column hiding, filter groups, bulk actions, targetless actions, workflow transitions, column totals, and switching between paginated and show-all display. Persists sort order, visible columns, and active filters across page visits via the list preference store.

ViewLoading ​

Full-page loading placeholder for route-level async resolution. Composes a SystemMessageCard(tone="loading") with a spinner crest, an optional verb-path crest label, a body row for what is loading and one-line context, a LoadingSkeletonGhost claiming layout space, and a LoadingHeartbeatStrip showing elapsed time and dependency progress. Once elapsedMs exceeds slowAfterMs the card flips to tone="warning", the spinner swaps for an hourglass, the heartbeat dot turns amber, and the slow-path body is shown. A slow-actions slot populates the card actions footer (e.g. Cancel, View queue).

ViewNotFound ​

Full-page 404 error view displayed when a route path does not match any registered route. Composes SystemMessageCard(tone="info") with a "404" crest, a TriedUrlCallout highlighting the segments of the typed path that diverge from the closest matching route, a SuggestionList(shape="route") of N-best scored matches, a DiagnosticStrip debug footer, and a Back + Go to home actions row.

ViewRead ​

Read-only detail view that fetches and displays a single model instance identified by its primary key.

ViewRecoveryCodes ​

Account security page for managing two-factor authentication recovery codes. Displays the user's unused recovery codes (when a TOTP device is configured) with options to copy, download, or print them, and provides a button to generate a fresh set of codes.

ViewSetupDevice ​

Multi-step form that guides the user through enrolling a two-factor authentication device. Presents a method-selection step (TOTP app, email, or SMS), then a verification step where the user confirms the device with a one-time code, then a confirmation step.

ViewSignIn ​

Default sign-in view. Renders an email and password credential form inside an AuthorizingForm card. Post-login routing and MFA pending-flow detection come from AuthorizingForm (via useSignInFlow); submission, loading, and server-side validation mapping come from the inner ActionForm.

Integrators can use this view as-is, adjust copy and behaviour through props (header, subTitle, redirect, formProps, requireRecentLogin, theme overrides, all forwarded to AuthorizingForm), or replace individual pieces through the field(email), widget(email), field(password), widget(password), and action-bar slots. Any other AuthorizingForm or ActionForm slot is forwarded through.

ViewTwoFactorAuth ​

Two-factor authentication challenge view presented after initial login. Lets the user select an available verification method (TOTP, SMS, email), request a code to be sent for applicable methods (with a 60-second resend cooldown), and submit the code to complete authentication. A separate ghost CTA reveals a recovery-code path that swaps the form body to a single mono text input.

ViewUpdate ​

Editable detail view that loads a model instance, presents it in a form, and submits changes back to the server on save.

Widgets ​

WidgetCheckbox ​

A checkbox widget that renders a Checkbox with form field integration. Supports tri-state (checked, unchecked, indeterminate) for NullBooleanField, translating null field values to the indeterminate visual state.

WidgetCombobox ​

A combobox widget supporting static options or API-backed search, single or multiple selection, grouping, and read-only display. Replaces WidgetSearchableSelect, WidgetAutoComplete, and WidgetMultiSelect.

Provide either options (static mode) or both app and model (API mode). The multiple prop works in both modes.

WidgetDateField ​

A date or datetime picker widget that combines segment-based input with a calendar popover. Uses DateField for keyboard-friendly segment editing and Calendar for visual date selection. Set granularity to "minute" or "second" for datetime input.

WidgetDateRangeField ​

A date or datetime range picker widget that combines segment-based input with a range calendar popover. Uses DateRangeField for keyboard-friendly segment editing and RangeCalendar for visual range selection. Set granularity to "minute" or "second" for datetime range input.

WidgetDuration ​

A duration input widget that renders separate numeric spinners for days, hours, minutes, and seconds. Each time unit can be shown or hidden independently via props; the combined value is stored as an object with the corresponding numeric fields.

WidgetFile ​

A file-upload widget that displays an existing file as a labelled download link with remove and download actions, and falls back to a file-uploader input when no file is selected.

WidgetGenericAutoComplete ​

A generic foreign-key widget for Django content-type style relations. Renders a type selector combobox paired with an object search combobox, storing a { content_type, object_id } value pair.

WidgetHtml ​

A rich-text editor widget backed by Tiptap. Stores and emits HTML string content, and accepts an optional editorHeight prop to control the editor's visible area.

WidgetImage ​

An image upload widget that shows a file picker when no image is selected and a preview with a remove button once one has been chosen. The widget value is the raw File object selected by the user.

WidgetJson ​

A JSON editor widget backed by CodeMirror. It edits real JSON values, not stringified copies, so JSONField submissions keep their object/scalar shape.

WidgetModel ​

Renders a select, multi-select, or radio widget populated with choices fetched from a Django model. Choices are loaded lazily: the API request is deferred until the field is focused or already has a value. Pass the type prop to choose between select, multiSelect, and radio presentations.

WidgetNativeSelect ​

A native select dropdown widget that renders a NativeSelect with option elements for each entry. Used for choice fields when a lightweight native dropdown is preferred over the headless Select.

WidgetNumberInput ​

A numeric input widget that assembles NumberField sub-components with increment and decrement buttons. Converts between string field values and numeric display values. Optionally displays a unit label suffix.

WidgetPreviewableTemplate ​

A widget that combines an editable input (HTML editor, plain input, or textarea) with a live preview pane that substitutes $variable placeholders using dependency data.

WidgetRadioGroup ​

A radio group widget that renders a RadioGroup with RadioGroupItem children for each option. Used for choice fields (e.g. BooleanField with choices) when paired with FormField.

WidgetRangeSlider ​

A range slider widget that renders a Slider with form field integration. Used for numeric range inputs when paired with FormField.

WidgetReadOnly ​

Renders a field value as non-editable text, with optional prefix and suffix strings. When app and model props are provided, the raw foreign-key value is resolved to a human-readable name and rendered as a link to the related record's detail view.

WidgetSelectDropdown ​

A dropdown select widget that assembles Select sub-components for static choice fields. Used when a styled dropdown is preferred over a native select element.

WidgetTemplateLegend ​

A read-only widget that displays a legend of available $variable substitution tags, rendered as a labelled list with click-to-copy tag values; the default slot can replace the entire list.

WidgetTextInput ​

A text input widget that renders a Input with form field integration. Used for CharField and similar string-based fields when paired with FormField. Supports optional input masking via the mask prop.

WidgetTextTextarea ​

A textarea widget that renders a Textarea with form field integration. Used for CharField (TextField variant) and similar multi-line string fields when paired with FormField.

WidgetTimeField ​

A time picker widget using segment-based input. Users tab through hour, minute, and optional second segments. No calendar popover is shown since this handles time-only values.

WidgetTimeRangeField ​

A time range picker widget that renders two segment-based time inputs for start and end values. Converts between the field's { lower, upper } object format and @internationalized/date Time objects.

WidgetToggle ​

A boolean toggle widget that renders a Switch with form field integration. Used for BooleanField when paired with FormField.

WidgetUnmapped ​

Renders an error message when a field's widget name is not mapped to any known widget component. Useful as a development-time diagnostic to surface misconfigured field definitions.

Controls ​

Button ​

A button control built on Reka UI's Primitive. Its look resolves on two axes, tone (color) and emphasis (structure). A bare button rests at neutral fill; the primary fill is opt-in with tone="primary". Size styles also resolve via the theme system.

ButtonGroup ​

A container that groups related buttons into a single visual unit. Applies radius and edge adjustments to adjacent children based on orientation.

ButtonGroupSeparator ​

A visual divider placed between items in a ButtonGroup. Stretches to fill the button group's cross-axis.

ButtonGroupText ​

A text label element that can be placed inside a ButtonGroup. Renders with muted background styling to visually complement adjacent buttons.

Calendar ​

A full-featured calendar component built on CalendarRoot with optional month/year navigation dropdowns. Supports single and multiple date selection, date range constraints, and configurable heading layouts.

CalendarCell ​

A styled wrapper for a single calendar cell, adding selection highlight and focus handling.

CalendarCellTrigger ​

The interactive trigger button within a calendar cell that handles day selection. Applies button ghost styling with additional state-based modifiers for selection, disabled, and unavailable states.

CalendarFooter ​

A chin below Calendar / RangeCalendar that surfaces a range summary label and apply / clear actions. The default slot replaces the layout entirely; the named summary slot fills the leading mono summary line and actions fills the trailing button row.

CalendarGrid ​

A styled wrapper for the calendar grid table that contains weeks and day cells.

CalendarGridBody ​

A wrapper for the calendar grid's body element containing week rows.

CalendarGridHead ​

A wrapper for the calendar grid's header element containing day-of-week labels.

CalendarGridRow ​

A styled row within the calendar grid representing a single week.

CalendarHeadCell ​

A styled header cell displaying a day-of-week abbreviation in the calendar grid.

CalendarHeader ​

The header bar of the calendar containing navigation buttons and the month/year heading.

CalendarHeading ​

Displays the current month and year label in the calendar header. Exposes a headingValue slot prop for custom rendering.

CalendarNextButton ​

A navigation button that advances the calendar to the next month or year.

CalendarPrevButton ​

A navigation button that moves the calendar to the previous month or year.

Checkbox ​

A checkbox built on Reka UI's CheckboxRoot, displaying a check icon when checked and a minus icon when indeterminate.

Combobox ​

Root of a Combobox widget. Combines a searchable input with a filtered option list.

ComboboxAnchor ​

Anchor element that positions the ComboboxList relative to the trigger.

ComboboxEmpty ​

Shown inside ComboboxList when no items match the current search.

ComboboxGroup ​

Groups related ComboboxItem elements with an optional heading.

ComboboxInput ​

The search input for Combobox, rendered with a search icon.

ComboboxItem ​

A selectable option within ComboboxList.

ComboboxItemIndicator ​

Visual indicator shown when a ComboboxItem is selected.

ComboboxList ​

The dropdown list panel for Combobox, rendered in a portal.

ComboboxSeparator ​

A visual divider between groups or items in ComboboxList.

ComboboxTrigger ​

A button that opens the Combobox list.

ComboboxViewport ​

Scrollable viewport inside ComboboxList.

ComboboxVirtualizer ​

Virtualizes the list of items inside ComboboxViewport for large datasets. Requires manual filtering of options before passing them in.

Uses a render function (not a template) to pass slots directly to reka-ui's ComboboxVirtualizer without adding an extra renderSlot Fragment layer. A template-based wrapper would produce two nested Fragments, causing ListboxVirtualizer's depth-1 VNode search to return undefined and crash.

Command ​

Root of a command palette with built-in filtering, providing context to child components.

CommandDialog ​

Wraps Command inside a modal dialog for use as a floating command palette.

CommandEmpty ​

Shown inside CommandList when no items match the current search.

CommandFooter ​

A chin below CommandList that surfaces keyboard-navigation hints and custom action labels. The default slot replaces the layout entirely; the named start and end slots fill the leading hint group and the trailing hint.

CommandGroup ​

Groups related CommandItem elements with an optional heading.

CommandInput ​

The search input for Command, bound to the shared filter state.

CommandItem ​

A selectable command option within CommandList or CommandGroup.

CommandList ​

Scrollable container that renders the filtered list of command items.

CommandSeparator ​

A visual divider between groups or items within CommandList.

CommandShortcut ​

Displays a keyboard shortcut hint aligned to the right of a CommandItem.

DateField ​

A segment-based date input built on Reka UI's DateFieldRoot. Users tab through individual year, month, day (and optional time) segments. Supports granularity for date-only or datetime input.

DateFieldInput ​

A single segment of a date field (year, month, day, hour, minute, etc.). Renders an editable segment inside a DateField.

DateRangeField ​

A segment-based date range input built on Reka UI's DateRangeFieldRoot. Renders start and end date segments that users tab through individually. Supports granularity for date-only or datetime range input.

DateRangeFieldInput ​

A single segment of a date range field (year, month, day, hour, minute, etc.). Renders an editable segment for either the start or end date inside a DateRangeField.

FileUpload ​

A file-upload control with a hidden native file input, a styled trigger button, and an optional drag-and-drop zone. Emits the selected File via v-model.

Input ​

A styled text input built on the native HTML input element, with support for v-model binding.

InputGroup ​

A container that groups an input with inline addons, buttons, or text, with coordinated focus and error states.

InputGroupAddon ​

An addon element placed at the start, end, or above/below an input group, with optional click-to-focus behavior.

InputGroupButton ​

A sized button emphasis designed for inline placement within an input group.

InputGroupInput ​

A borderless input element styled for seamless placement inside an input group.

InputGroupText ​

A inline text or icon label displayed inside an input group alongside the input.

InputGroupTextarea ​

A borderless textarea element styled for seamless placement inside an input group.

InputOTP ​

A styled OTP (one-time password) input built on vue-input-otp's OTPInput, with slot forwarding for custom slot rendering.

InputOTPGroup ​

A flex container that groups OTP slot elements horizontally.

InputOTPSeparator ​

A visual separator between OTP slot groups, rendering a minus icon by default.

InputOTPSlot ​

An individual OTP character slot that displays the current character and an animated caret when active.

NativeSelect ​

A styled native <select> element with a custom chevron icon overlay. Supports v-model binding and forwards all extra attributes to the underlying select.

NativeSelectOptGroup ​

A styled wrapper for the native <optgroup> element used inside NativeSelect.

NativeSelectOption ​

A styled wrapper for the native <option> element used inside NativeSelect.

NumberField ​

A numeric input container built on Reka UI's NumberFieldRoot, providing increment/decrement controls, min/max constraints, and v-model binding.

NumberFieldContent ​

A relative-positioned wrapper that manages padding around a NumberField input when increment or decrement buttons are present.

NumberFieldDecrement ​

A decrement button for NumberField, absolutely positioned to the left of the input and rendering a Minus icon by default.

NumberFieldIncrement ​

An increment button for NumberField, absolutely positioned to the right of the input and rendering a Plus icon by default.

NumberFieldInput ​

The text input element within a NumberField, styled for centered numeric entry and wired to the parent NumberFieldRoot context.

RadioGroup ​

A radio group container built on Reka UI's RadioGroupRoot, providing keyboard navigation and v-model binding for a set of radio items.

RadioGroupItem ​

A single radio button within a RadioGroup, rendering a circular indicator when selected and forwarding all native radio props to the underlying primitive.

RangeCalendar ​

A full-featured date range calendar built on RangeCalendarRoot. Supports range selection with configurable date constraints and navigation.

RangeCalendarCell ​

A styled wrapper for a single range calendar cell with range selection highlights.

RangeCalendarCellTrigger ​

The interactive trigger button within a range calendar cell that handles day selection.

RangeCalendarGrid ​

A styled wrapper for the range calendar grid table containing weeks and day cells.

RangeCalendarGridBody ​

A wrapper for the range calendar grid's body element containing week rows.

RangeCalendarGridHead ​

A wrapper for the range calendar grid's header element containing day-of-week labels.

RangeCalendarGridRow ​

A styled row within the range calendar grid representing a single week.

RangeCalendarHeadCell ​

A styled header cell displaying a day-of-week abbreviation in the range calendar grid.

RangeCalendarHeader ​

The header bar of the range calendar containing navigation buttons and the month/year heading.

RangeCalendarHeading ​

Displays the current month and year label in the range calendar header. Exposes a headingValue slot prop for custom rendering.

RangeCalendarNextButton ​

A navigation button that advances the range calendar to the next month or year.

RangeCalendarPrevButton ​

A navigation button that moves the range calendar to the previous month or year.

Select ​

Root of a Select widget. Wrap with SelectTrigger and SelectContent.

SelectContent ​

Dropdown content panel for Select, rendered in a portal with scroll buttons.

SelectGroup ​

Groups related SelectItem elements within SelectContent.

SelectItem ​

A selectable option within SelectContent.

SelectItemText ​

The text portion of a SelectItem, used for typeahead and display.

SelectLabel ​

A label for a SelectGroup.

SelectScrollDownButton ​

Scroll-down affordance inside SelectContent.

SelectScrollUpButton ​

Scroll-up affordance inside SelectContent.

SelectSeparator ​

A visual divider between groups or items in SelectContent.

SelectTrigger ​

The button that opens the Select dropdown.

SelectValue ​

Displays the currently selected value inside SelectTrigger.

Slider ​

A range slider built on Reka UI's SliderRoot, rendering a track, range fill, and draggable thumbs.

Switch ​

A toggle switch built on Reka UI's SwitchRoot, with a sliding thumb indicator.

TagsInput ​

Root of a tags input control allowing users to add and remove tag values.

TagsInputInput ​

The text input field within TagsInput where users type new tags.

TagsInputItem ​

A single tag item within TagsInput.

TagsInputItemDelete ​

A delete button within a TagsInputItem that removes the tag when activated.

TagsInputItemText ​

Displays the text content of a TagsInputItem tag.

Textarea ​

A styled textarea built on the native HTML textarea element, with support for v-model binding.

TimeField ​

A segment-based time input built on Reka UI's TimeFieldRoot. Users tab through individual hour, minute, and optional second segments. Supports 12-hour and 24-hour formats via the hourCycle prop.

TimeFieldInput ​

A single segment of a time field (hour, minute, second, or day period). Renders an editable segment inside a TimeField.

Toggle ​

A toggle button built on Reka UI's Toggle, supporting variant and size styles via the theme system.

ToggleGroup ​

A group of toggle buttons that share variant and size context.

ToggleGroupItem ​

An individual toggle button inside a ToggleGroup.

Display ​

AspectRatio ​

Constrains content to a given aspect ratio using Reka UI's AspectRatio primitive.

Avatar ​

Root avatar container with fallback support via AvatarImage and AvatarFallback.

AvatarFallback ​

Fallback content shown inside Avatar when the image fails to load.

AvatarImage ​

The image element inside a Avatar.

Badge ​

A badge component built on Reka UI's Primitive, supporting variant styles.

ClickToCopyText ​

Displays a text value alongside a button that copies it to the clipboard and shows a toast notification on success.

ConsequencesBullets ​

Bulleted list of destructive-action consequences. Each item renders an optional leading icon, a bold label, and an optional muted description inside a 2-column grid (icon · label/sub stack). Per-item tone (default | warn | danger) tints only the leading icon so the consequence list communicates relative severity without overwhelming the surrounding card.

Icons resolve via useIcons("ConsequencesBullets", props)(item.icon). When the lookup returns null (icon name missing or unregistered), the icon cell still renders so labels stay aligned across rows.

ConstraintsBar ​

The active list-constraints band: one strip that hosts the filter chips and the sort chips on a single line, separated by a hairline divider. Filters and sorts are told apart by their own tint (primary for filters, neutral for sorts), so the band reads as two grouped categories rather than one undifferentiated pile. Each group owns its own clear control.

Presentational only: the host supplies the two chip groups via the filters and sort slots and tells the band which groups are active. The band collapses (height 0) when nothing is active, so an unconstrained list spends no vertical chrome. The chip groups stay mounted (the band is clipped, not unmounted) so their toolbar triggers keep working while the band is collapsed.

DateRangeDisplay ​

Displays a formatted date range from a start and end value (ISO strings or Luxon DateTimes). Renders a single date when both values fall on the same day, and omits redundant year or month segments when the range stays within the same month or year.

DateTimeDisplay ​

Displays a datetime value (ISO string, JS Date, or Luxon DateTime) in absolute, relative, inline, or break format, with an optional tooltip showing the complementary representation. The relative label updates automatically every minute (and every second for very recent times).

DiagnosticStrip ​

Two-column dl grid debug strip for system views. Each row renders a 10 px uppercase sans label (dt) paired with an 11 px value (dd). Intended as a copy-paste footer inside SystemMessageCard body slots so an operator can paste request id, route, and session into a ticket.

ErrorDisplay ​

Displays a dismissible error message card, reports the error to Sentry, and optionally renders a router-link for navigation.

FieldPickerMenuList ​

The list step shared by the sort and filter add-menus: an eyebrow, a scrollable list of pickable fields, and an empty state. Picking a row emits pick with the field value; the host decides what happens next (the sort menu appends the field, the filter menu drills into that field's form). Centralizes the field-row styling so the two menus cannot drift.

Kbd ​

A keyboard key element with consistent styling.

KbdGroup ​

A container for grouping multiple Kbd key elements inline.

LoadingHeartbeatStrip ​

Live-updating status footer for loading views. Renders a flex justify-between strip with mono text: request id and elapsed time on the left, resolved/total dependency count and a pulsing dot on the right. The dot animates a box-shadow halo; tone="slow" flips it from primary blue to amber to signal an unusually long wait.

LoadingSkeletonGhost ​

Multi-bar layout skeleton that claims vertical space while real content loads. Stacks N Skeleton bars at varying widths inside a bordered card-radius container with a shimmer sweep on the wrapper. Pass bars as a width-percent array or pick a pattern preset (form | table | card).

LoadingSpinnerBlock ​

Renders the configured loading icon for block-level loading placeholders. The icon entry is resolved from useIcons("LoadingSpinnerBlock", props), falling back to Default.loading.

LoadingSpinnerInline ​

Renders the configured inline loading icon. The icon entry is resolved from useIcons("LoadingSpinnerInline", props), falling back to Default.loading.

ResponsiveMenu ​

Responsive menu shell for a toolbar control: a teleported trigger button (leading icon, label, caret) that opens its slotted content as a popover on desktop and a full-screen dialog on mobile. Shared by the sort add-menu (SortControl) and the filter add-menu (FilterMenu) so both pick their surface by viewport the same way. Presentational: the host supplies the menu body via the default slot and owns what the menu does; this component owns only the trigger, open/close state, and the popover/dialog choice. keepOpenOverNestedPopper is applied so a nested popper (a Select or date picker inside the body) does not dismiss the menu.

SortChip ​

Renders a single active sort field as a removable pill. A leading priority ordinal (shown only when showOrdinal is set) doubles as the drag handle for reordering within the host strip. The label segment shows the field's human label and a direction glyph; clicking it toggles ascending/descending. The trailing segment removes the field from the sort, and is present only when removable is set. This is the sort-side counterpart to FilterChip: neutral-tinted, since ordering is not a predicate and the accent is reserved for filters, actions, and selection.

SortControl ​

Toolbar entry point for multi-field sorting. The trigger opens an add-field menu of the sortable fields not yet in the sort, presented by ResponsiveMenu (a popover on desktop, a full-screen dialog on mobile). Picking a field appends it to the sort; the menu stays open so several fields can be added in a row. Reordering, direction, and removal happen on the active-sort chips (see SortGroup / SortChip), so this control is add-only. The trigger teleports into a toolbar zone supplied by the host view. This is the layout-independent companion to column-header sorting; both write the same sorted array.

SortGroup ​

Renders the active sort order as a strip of removable SortChips, plus a Reset sort control (shown only when the active sort differs from defaultSorted). Each chip toggles its own direction; removing a chip drops that field from the sort (the remove control itself is hidden once only one chip remains, since there is nothing left to remove down to); dragging a chip by its priority ordinal reorders the sort. Adding fields stays with the SortControl add menu; this strip is the always-visible read-out and the primary editing surface, the sort-side counterpart to FilterGroup's chips.

SuggestionList ​

Typed "Did you mean?" suggestion list for system 404 views. Renders an uppercase head row with a mono source label above a bordered list of clickable router-link rows. Two layout shapes are supported: route (similarity score chip in the trailing column) and action (HTTP verb chip). Each row is a 4-column grid: 24 px icon · 1fr label+sub · auto trailing · auto chevron. Kit canon: "At scale, 'Did you mean?' is a piece of UI, not a sentence."

SystemMessageCard ​

Centered card chassis for system-level messages: 404, action-not-found, loading, and deactivate confirmation. Provides a tone-tracked 36 px crest icon tile above a border separator, with a meta column (eyebrow + kind label), an optional trailing status code, a default body slot, and an optional actions footer.

Tone drives icon-tile background and ink color via the group/system-message-card named scope; the optional iconName prop resolves the visible crest icon through the icon registry.

TriedUrlCallout ​

Small bordered callout surfacing the URL path or action key that the user attempted, with bad segments tinted destructive. Used in ViewNotFound and ViewActionNotFound to ground the suggestion list without explaining the typo in prose.

UserAvatar ​

Initials chip representing a user. Composed by SidebarUserBlock at 32 px and ViewHistoryList's history-user column at 22 px. Initials-only for now; a src photo prop is reserved for a later iteration.

Initials algorithm: when name has two or more whitespace-separated tokens, uses the first character of the first and last tokens. Otherwise uses the first two characters of the single token. Always uppercased. An explicit initials prop, when set, takes precedence and is uppercased verbatim.

Feedback ​

Alert ​

An alert box supporting variant styles.

AlertActions ​

A trailing action row inside an Alert. Aligns with the Alert grid's second column (matching title and description), so dismiss / primary action buttons sit flush under the description text.

AlertClose ​

A close button for dismissing an alert. Renders a slotted button that emits a close event when clicked.

AlertDescription ​

The description element inside an Alert component.

AlertTitle ​

The title element inside an Alert component.

Progress ​

A progress bar component built on Reka UI's ProgressRoot.

Skeleton ​

A placeholder skeleton element that animates while content is loading.

Sonner ​

A toast notification container built on vue-sonner, providing styled toast popups with registry-backed icons for success, info, warning, error, loading, and close states.

Form ​

FieldRenderer ​

Resolves and renders a single form field and its widget for a given formModelName key. It reads the field and widget components, props, and slot configuration from a formModel context object, then composes them into the correct layout with override slots passed through from the parent.

FieldSetMany ​

A field that manages a list of values by rendering one instance of manyComponent per entry. Provides Add and Remove buttons so users can grow or shrink the list, and the first entry is always required while subsequent entries are optional.

FieldSetRange ​

Composite field that renders a pair of sub-fields for the lower and upper boundaries of a range, deriving their field names from the parent field name combined with the configured suffixes. Validates that the lower bound does not exceed the upper bound.

FieldSetSingularStackedInline ​

A stacked inline fieldset for editing a single related object (one-to-one style). Renders a separator with a title, an optional Create button when no value is present, and a single stacked-inline row when a value exists. Supports show/hide toggling and auto-creates the initial object when the field is required or autoCreateWhenEmpty is set.

FieldSetStackedInline ​

A stacked inline fieldset for editing a list of related objects. Renders each object as a separate stacked row beneath a separator header, with Create and optional toggle buttons. Supports show/hide toggling and row deletion.

FieldSetStackedInlineRow ​

Renders a single row within a stacked inline field set, including all non-action fields and a row-level action bar. The action bar shows a delete button for new (unsaved) rows and a destroy checkbox for existing rows, with slot overrides available for each.

FieldSetTabularInline ​

A tabular inline fieldset for editing a list of related objects in a grid layout. Renders rows through an ObjectsGrid, adapts between table and card views based on breakpoint, and provides Create, Delete, and custom item-action buttons alongside optional show/hide toggling.

FieldWarningsList ​

Renders a warnings mapping keyed by field (the shape both get_warnings() and get_transition_warnings() return for a single object: {field: [messages]}, with non_field_errors for messages not tied to a field). non_field_errors renders first as a plain, unlabeled list; every other field renders inline (field: message) when it carries exactly one message, or as its own sub-header plus list when it carries more.

The entry slot overrides one field's entire layout (the header/list/inline decision included).

FilterChip ​

Renders a single active filter as a removable pill. The label segment shows the field name and its current value and opens the field's edit form in a popover; the trailing segment removes the filter. The chip resolves choice values to their human labels via useModelChoices, and turns destructive when the server rejected the value.

FilterFieldForm ​

Renders and controls the filter form for a single filterable field. It hosts the per-field form state (initial values seeded from the URL query, validation, and lazy choice fetching) and applies or removes the field's entry in the shared active-filter list. It is mounted on demand inside the FilterMenu drill-in (to add a filter) and inside a FilterChip edit popover (to edit one). The surrounding popover owns visibility; this component owns the form body and the apply/remove mutations.

FilterForm ​

Renders the body of a filter popover for a single filterable field. It displays a heading, the appropriate field widget via FieldRenderer, and an Apply button that submits the filter value back to the parent FilterFieldForm.

FilterGroup ​

Presentation host for a model list view's filter controls. It renders the add-filter FilterMenu (whose trigger teleports into the toolbar) from the caller-resolved filterables / filterableDetails / validFilterables and, when filters are active, a strip of removable FilterChips plus a Clear filters control. Resolving which fields are filterable (typically via useViewList), restoring the active-filter list from the URL, mirroring it to query parameters, and persisting it as a preference are all the caller's responsibility; this component only renders the v-model list and threads add/edit/remove edits back through it.

FilterMenu ​

Toolbar entry point for adding filters. The trigger opens a menu listing the fields not yet applied (a popover on desktop, a full-screen dialog on mobile, via ResponsiveMenu); picking one drills the menu in place to that field's FilterFieldForm, with a back affordance returning to the list. The trigger teleports into a toolbar zone supplied by the host view.

FormConfirmDialog ​

Confirmation dialog shown when a submission is valid but the server reports advisory warnings that must be acknowledged (HTTP 409). Bind it to the confirmation controller returned by useObjectForm or useActionForm: confirming retries the submission with the warnings acknowledged, cancelling leaves it unsaved with the warnings still displayed.

FormField ​

Generic form field component that provides field context, dispatches type-specific validation via a validation key, and optionally renders layout (label, description, errors) using the Field family.

FormGrid ​

12-column form-field grid for ViewCreate/ViewUpdate long-form layouts. Direct children default to a full 12-column span and collapse to a single column under 720 px. Children stamped with data-col="3|4|6|8|9" claim that many columns at >=720 px.

FormMessage ​

Renders form-scope non-field validation feedback as a single Alert. When multiple messages are present, they are rendered as a list inside one Alert rather than as a stack of separate alerts.

FormModel ​

This component is a form model that renders fields based on the configuration for the model.

FormSection ​

Light grouping for long forms: an eyebrow title row with an optional aside (e.g. "required", "optional during create"), a single bottom hairline closing the head, and a slotted body below for fields and grids. Composes inside ViewCreate/ViewUpdate #fields slots.

FormSectionTitle ​

Eyebrow-style title for a FormSection's title slot. Renders an h3 carrying the 11 px / 600 / uppercase / 0.06 em recipe (§ 3.3 Eyebrow micro-text) tinted muted-foreground.

TypedConfirmField ​

Anti-mistake confirmation field that gates a destructive action until the operator types the exact expectedValue. The default chrome is the canonical "type it to mean it" recipe: a bordered, muted-tinted box containing a small sans label with an inline mono chip showing the expected literal, followed by a mono text input.

Consumers read the match state via v-model:match (or the match event) and disable their submit control while it is false. The raw typed value is exposed via v-model for callers that need to inspect or echo it.

Grid ​

Table ​

A table wrapper component providing a scrollable container and styled table element.

Supports a sticky-header mode (sticky prop) that pins thead cells to the top of the scroll container, and a three-tier density mode (density prop: default | compact | condensed) that drives data-density on the <table> element so descendant TableHead and TableCell primitives pick up the matching row heights.

TableBody ​

The tbody element for a grid table, removing the bottom border on the last row.

TableCaption ​

A caption element for a grid table, styled below the table content.

TableCell ​

A table data cell with consistent padding, alignment, and checkbox support.

TableEmpty ​

An empty-state row for a grid table, spanning columns with centered content.

The variant prop drives data-variant on the content wrapper so that descendants marked data-slot="icon" pick up variant-specific treatment: loading spins the icon, error recolors it to --destructive, and empty / filtered keep the muted default. The slot content (icon, title, description, actions) is consumer-provided.

TableFooter ​

The tfoot element for a grid table with muted background and top border styling.

TableHead ​

A table header cell with fixed height, left-aligned text, and checkbox support.

TableHeader ​

The thead element for a grid table, adding a bottom border to each header row.

TableRow ​

A table row with hover, selected-state, and border-bottom transition styles.

TableRowActions ​

Inline action group for a table row that stays hidden until the parent <tr> is hovered, focus-within, or carries data-state="selected". Drop inside a TableCell near the right edge of each row; the slot is meant to carry small icon buttons.

A navigation breadcrumb root element.

An ellipsis indicator for collapsed breadcrumb items. Defaults to an ornamental span; set interactive to render a focusable button suitable for triggering a dropdown of collapsed trail levels.

A single item within a breadcrumb list.

A navigable link within a breadcrumb item.

An ordered list of breadcrumb items.

Represents the current page within a breadcrumb trail.

A visual separator between breadcrumb items.

ContextMenu ​

The root provider for a context menu.

ContextMenuCheckboxItem ​

A checkable item within a context menu.

ContextMenuContent ​

The content panel of a context menu, rendered inside a portal.

ContextMenuGroup ​

Groups related context menu items together.

ContextMenuItem ​

An individual action item within a context menu.

ContextMenuLabel ​

A non-interactive label within a context menu.

ContextMenuPortal ​

Portals a context menu into a different part of the DOM.

ContextMenuRadioGroup ​

Groups radio items within a context menu.

ContextMenuRadioItem ​

A radio item within a context menu radio group.

ContextMenuSeparator ​

A visual separator between context menu items or groups.

ContextMenuShortcut ​

Displays a keyboard shortcut hint within a context menu item.

ContextMenuSub ​

The root provider for a context submenu.

ContextMenuSubContent ​

The content panel of a context submenu.

ContextMenuSubTrigger ​

The trigger that opens a context submenu.

ContextMenuTrigger ​

The area that triggers a context menu on right-click.

The root provider for a dropdown menu.

A checkable item within a dropdown menu.

The content panel of a dropdown menu, rendered inside a portal.

Groups related dropdown menu items together.

An individual action item within a dropdown menu.

A non-interactive label within a dropdown menu.

Groups radio items within a dropdown menu.

A radio item within a dropdown menu radio group.

A visual separator between dropdown menu items or groups.

Displays a keyboard shortcut hint within a dropdown menu item.

The root provider for a dropdown submenu.

The content panel of a dropdown submenu.

The trigger that opens a dropdown submenu.

The button that toggles a dropdown menu open or closed.

LinkModelView ​

Renders a VUEDA Button control that navigates to a named model view (such as read, update, or a custom action) for a given app, model, and optional pk. Renders as a link by default, or as a standard button when the button prop is set.

Styling resolves in two modes. In action styling mode (any of primary, tone, or emphasis is set) the button's look comes from the two-layer action mapping (see utils/actionVariant.js): the action's intrinsic tone (a delete/destroy action is destructive) crossed with the placement emphasis (emphasis, or fill when primary). Otherwise it renders as the plain navigation affordance: primary fill for button, primary link for anchor links.

A horizontal menu bar containing a set of menus.

A checkable item within a menubar menu.

The content panel of a menubar menu, rendered inside a portal.

Groups related menubar items together.

An individual action item within a menubar menu.

A non-interactive label within a menubar menu.

A single menu within a menubar.

Groups radio items within a menubar menu.

A radio item within a menubar menu radio group.

A visual separator between menubar menu items or groups.

Displays a keyboard shortcut hint within a menubar item.

The root provider for a menubar submenu.

The content panel of a menubar submenu, rendered inside a portal.

The trigger that opens a menubar submenu.

The button that opens a menu within a menubar.

The root provider for a navigation menu.

The content panel of a navigation menu item.

An optional indicator element displayed below the list of navigation menu items.

An individual item within a navigation menu list.

A navigable link within a navigation menu.

A list of navigation menu items.

The button that toggles a navigation menu item open or closed.

A viewport that renders the active navigation menu content.

Pagination ​

Root pagination component built on Reka UI's PaginationRoot.

PaginationBar ​

Compound bar for data-grid footers. Provides the flex row chrome (border-top, card surface, bottom card-radius caps) and exposes a default slot so consumers compose PaginationMeta, Pagination, and any per-page selector inside it.

PaginationContent ​

The list container for pagination items.

PaginationEllipsis ​

An ellipsis indicator for skipped pages in a pagination control.

PaginationFirst ​

A button to navigate to the first page in a pagination control.

PaginationFooter ​

Pagination footer for data views. Composes the PaginationBar substrate with a "Showing X to Y of N" range read-out (PaginationMeta), a rows-per-page selector (whose final "All" entry loads every page), and the first / previous / next / last navigation cluster with a "Page N of M" indicator.

PaginationItem ​

A single page number button in a pagination control.

PaginationLast ​

A button to navigate to the last page in a pagination control.

PaginationMeta ​

Mono supporting-text label for pagination summaries (e.g. "441 invoices · page 7 of 23"). Sits inside PaginationBar.

PaginationNext ​

A button to navigate to the next page in a pagination control.

PaginationPrevious ​

A button to navigate to the previous page in a pagination control.

The main sidebar container. Renders as an off-canvas sheet on mobile and a collapsible panel on desktop.

SidebarContent ​

The scrollable content area of the sidebar.

SidebarFooter ​

The footer section of the sidebar.

SidebarGroup ​

A group of related sidebar items with optional label and actions.

SidebarGroupAction ​

An action button shown at the top-right of a sidebar group.

SidebarGroupContent ​

The content container within a sidebar group.

SidebarGroupLabel ​

A label heading for a sidebar group.

SidebarHeader ​

The header section of the sidebar.

SidebarInput ​

A search or filter input styled for use inside the sidebar.

SidebarInset ​

The main content area adjacent to an inset-variant sidebar.

SidebarMenu ​

A list of sidebar menu items.

SidebarMenuAction ​

A contextual action button shown alongside a sidebar menu button.

SidebarMenuBadge ​

A badge displayed at the right of a sidebar menu button. Tone controls the chromatic treatment: neutral auto-promotes to a sidebar-primary tint when the ancestor menu button is active; primary and destructive force the corresponding tint regardless of active state.

SidebarMenuButton ​

A sidebar menu button that shows a tooltip when the sidebar is collapsed.

SidebarMenuButtonChild ​

Internal primitive element for SidebarMenuButton.

SidebarMenuItem ​

A single item within a sidebar menu list.

SidebarMenuSkeleton ​

A skeleton placeholder for a sidebar menu item while content is loading.

SidebarMenuSub ​

A nested sub-menu list inside a sidebar menu item.

SidebarMenuSubButton ​

An interactive button inside a sidebar sub-menu.

SidebarMenuSubItem ​

A single item within a sidebar sub-menu list.

SidebarProvider ​

Provider component that manages sidebar state and provides context to all child sidebar components.

SidebarRail ​

A thin interactive rail on the sidebar edge that can be clicked to toggle the sidebar.

SidebarSeparator ​

A visual separator between sections of the sidebar.

SidebarTrigger ​

A button that toggles the sidebar open or closed. The toggle glyph resolves through useIcons("SidebarTrigger", props)("toggle"); consumers register a default (canon is fa-regular fa-rectangle-list) via setIcons or replace per-instance via iconOverride.

SidebarUserBlock ​

Sidebar footer user block: 32 px avatar chip + name + role + a slot for a 20 px ghost kebab trigger. Composes UserAvatar with the sidebar tone so the chip belongs to the sidebar surface rather than the primary palette.

Objects-grid ​

ColumnDateTime ​

Date/time/datetime list column adapter. Wraps {@link DateTimeDisplay}, binding the cell's raw value and forwarding display configuration resolved from columnMappings (per field type) and any columnProps override.

Receives the ObjectsGrid value slot props; only value is consumed for rendering. inheritAttrs is disabled so the remaining cell context props (field, formatted, obj, etc.) are not leaked as DOM attributes onto the DateTimeDisplay root. DateTimeDisplay renders a dash for empty/invalid values.

The default format is "absolute" (clean absolute text with the relative time on hover), which reads better in a dense table than the inline default.

Foreign-key list column adapter. Renders the related object as a link to its detail view via {@link LinkModelView}, falling back to plain label text when the link target or pk is unavailable. Collapses the hand-written FK-link boilerplate (target/pk/label resolution + no-pk guard) that consuming list views previously repeated per column.

Receives the ObjectsGrid value slot props. Note the cell's pk slot prop is the row primary key, not the FK target; the target pk is derived from value, so pk is intentionally not consumed here. inheritAttrs is disabled so surplus cell-context props are not leaked as DOM attributes.

Target resolution prefers the field's own related-model identity (populated by the server for writable relations) and falls back to app/model supplied via columnProps, then to label-only text.

ColumnText ​

Default list column adapter. Renders the cell's pre-formatted value as plain text, reproducing ObjectsGrid's historical default cell content. Used as the fallback adapter when no type-specific column component is resolved.

Receives the ObjectsGrid value slot props (field, value, formatted, obj, pk, etc.); only formatted is consumed. String/number/boolean values render as-is. Object and array values (an inlined related object, or a JSON field, that has no more specific column adapter) render as compact JSON, truncated when very large, so they read sensibly instead of [object Object].

ObjectsGrid ​

Renders a list of objects as either a table or a card grid depending on the current breakpoint. Supports skeleton loading rows, field-level slot overrides, and per-field class customization.

ObjectsGridBodyCell ​

Renders a single data cell in the table-layout view of ObjectsGrid, exposing field value and metadata through the value slot.

ObjectsGridBodyCellSkeleton ​

Renders a single table-layout body cell skeleton placeholder while ObjectsGrid data is loading. Sizes the skeleton based on the field definition.

ObjectsGridCardCell ​

Renders a single field as a label/value pair in the card-layout view of ObjectsGrid.

ObjectsGridCardCellSkeleton ​

Renders a single card-layout cell skeleton placeholder while ObjectsGrid data is loading. Displays the field label alongside a sized skeleton for the value area.

ObjectsGridTableHeader ​

Renders a column header cell in the table-layout view of ObjectsGrid, showing the field label.

Shell ​

Accordion ​

Root accordion component built on Reka UI's AccordionRoot.

AccordionContent ​

The collapsible content area of an AccordionItem.

AccordionItem ​

An individual item in an Accordion component.

AccordionTrigger ​

The trigger button for an AccordionItem, wrapped in an AccordionHeader.

AlertDialog ​

Root alert dialog component built on Reka UI's AlertDialogRoot.

AlertDialogAction ​

The action button inside an AlertDialog, rendered through Button while preserving AlertDialog action behavior.

AlertDialogCancel ​

The cancel button inside an AlertDialog, rendered through Button while preserving AlertDialog cancel behavior.

AlertDialogContent ​

The content panel of an AlertDialog, rendered in a portal with an overlay.

AlertDialogDescription ​

The description text inside an AlertDialog.

AlertDialogFooter ​

The footer area of an AlertDialog, used to arrange action and cancel buttons.

AlertDialogHeader ​

The header area of an AlertDialog, used to arrange the title and description.

AlertDialogTitle ​

The title inside an AlertDialog.

AlertDialogTrigger ​

The trigger button that opens an AlertDialog.

Card ​

A card container with a border, background, and shadow.

CardAction ​

An action slot positioned in the trailing column of a CardHeader grid.

CardContent ​

The main content area of a Card component.

CardDescription ​

A muted description paragraph inside a CardHeader.

CardFooter ​

The footer section of a Card component.

CardHeader ​

The header section of a Card component.

CardTitle ​

The title heading inside a CardHeader.

Collapsible ​

Root collapsible component built on Reka UI's CollapsibleRoot.

CollapsibleContent ​

The content area that is shown or hidden by a Collapsible.

CollapsibleTrigger ​

The trigger button that toggles a Collapsible open or closed.

Dialog ​

Root dialog component built on Reka UI's DialogRoot.

DialogClose ​

A button that closes the Dialog when clicked.

DialogContent ​

The content panel of a Dialog, rendered in a portal with an overlay and optional close button.

DialogDescription ​

The description text inside a Dialog.

DialogFooter ​

The footer area of a Dialog, used to arrange action buttons and an optional close button.

DialogHeader ​

The header area of a Dialog, used to arrange the title and description.

DialogOverlay ​

The overlay backdrop behind a Dialog.

DialogScrollContent ​

A scrollable Dialog content panel that renders in a portal with a scrollable overlay.

DialogTitle ​

The title inside a Dialog.

DialogTrigger ​

The trigger button that opens a Dialog.

Drawer ​

Root Drawer component, a mobile-friendly dialog variant that slides in from an edge and supports drag-to-dismiss.

DrawerClose ​

A button that closes the Drawer when clicked.

DrawerContent ​

The content panel of a Drawer, rendered in a portal and sliding in from a chosen direction.

DrawerDescription ​

A description rendered inside a Drawer to provide context to screen readers.

DrawerFooter ​

Footer section of a Drawer, typically containing action buttons.

DrawerHeader ​

Header section of a Drawer, typically containing the title and description.

DrawerOverlay ​

The overlay backdrop rendered behind the drawer content.

DrawerTitle ​

The title of a Drawer, readable by assistive technology.

DrawerTrigger ​

A button that opens the Drawer when activated.

Field ​

A form field layout container that groups a label, control, and supporting text with configurable vertical, horizontal, or responsive orientation.

FieldContent ​

A flex column container that groups related controls within a field, adding consistent spacing between the control and its supporting text.

FieldDescription ​

A paragraph that provides supplementary context for a field, styled with muted text and link decorations.

FieldGroup ​

A vertical stack container for grouping multiple Field instances, with consistent spacing and container-query support for responsive layouts.

FieldLabel ​

A field label built on Label that optionally wraps an inline control, applying checked-state highlights when paired with a checkbox or radio.

FieldLegend ​

A fieldset legend styled as either a section heading or a field label, controlled by the variant prop.

FieldMessage ​

Displays field messages (errors or warnings) from a slot or an array of strings, arrays of strings (e.g. multiple server messages under one error code), or objects with a message property, deduplicating and rendering a list when multiple messages are present.

FieldSeparator ​

A horizontal rule that visually divides sections within a field group, optionally displaying a centered text label over the line.

FieldSet ​

A semantic fieldset that groups related form controls with consistent vertical spacing, adjusting gap for checkbox and radio groups automatically.

FieldTitle ​

A non-interactive label-styled div for titling a field when a semantic label element is not appropriate, such as when the field contains its own label.

HoverCard ​

Root hover card component built on Reka UI's HoverCardRoot.

HoverCardContent ​

The content panel of a HoverCard, rendered in a portal.

HoverCardTrigger ​

The trigger element that opens a HoverCard on hover.

Item ​

A flexible list item container that supports visual variants and sizes. Renders via the Reka UI Primitive for polymorphic element support.

ItemActions ​

A row of action controls (e.g. buttons) aligned at the end of a Item.

ItemContent ​

The primary content area of a Item, arranged vertically with a flex column layout.

ItemDescription ​

A supporting description paragraph inside a Item, styled with muted text and line clamping.

ItemFooter ​

A footer row at the bottom of a Item that distributes content between its start and end.

ItemGroup ​

A vertical list container for grouping multiple Item components.

ItemHeader ​

A header row at the top of a Item that distributes content between its start and end.

ItemMedia ​

A media slot inside a Item for icons or images, with variant-based sizing and styling.

ItemSeparator ​

A horizontal separator rule used to divide sections within a Item or ItemGroup.

ItemTitle ​

A title element inside a Item, rendered as an inline-flex row with icon support.

Label ​

A label component built on Reka UI's Label with consistent form label styling.

PageActions ​

Wraps page-level action buttons and renders them into the page-title action zone bound by a display component (see usePageTitle). When no zone exists, the actions render inline where this component is placed, so a view degrades gracefully if the layout omits a title display.

PageTitle ​

Page-level header bar that an integrator places in their layout (above <RouterView>). It reads the active view's title and loading state from usePageTitle and hosts the page-action zone that PageActions teleports into. The view supplies the data; this component decides where the page <h1> and its actions appear, so the title is a layout concern rather than baked into each view.

Popover ​

Root popover component built on Reka UI's PopoverRoot.

PopoverAnchor ​

An anchor element for positioning a Popover relative to a reference element.

PopoverContent ​

The floating content panel of a popover, rendered inside a portal. Positioned relative to the trigger or anchor element.

PopoverTrigger ​

The trigger button that opens a Popover.

ResizableHandle ​

A drag handle for resizing panels in a ResizablePanelGroup.

ResizablePanel ​

A resizable panel managed by a ResizablePanelGroup.

ResizablePanelGroup ​

A container that manages a group of resizable panels.

ScrollArea ​

A scroll area component built on Reka UI's ScrollAreaRoot with a custom scrollbar.

ScrollBar ​

The scrollbar track and thumb for a ScrollArea.

Separator ​

A visual separator between content sections, built on Reka UI's Separator.

Sheet ​

Root Sheet component, a dialog variant that slides in from a side of the screen.

SheetClose ​

A button that closes the Sheet when clicked.

SheetContent ​

The content panel of a Sheet, rendered in a portal and sliding in from a chosen side.

SheetDescription ​

A description rendered inside a Sheet to provide context to screen readers.

SheetFooter ​

Footer section of a Sheet, typically containing action buttons.

SheetHeader ​

Header section of a Sheet, typically containing the title and description.

SheetOverlay ​

The overlay backdrop rendered behind the sheet content.

SheetTitle ​

The title of a Sheet, readable by assistive technology.

SheetTrigger ​

A button that opens the Sheet when activated.

Stepper ​

Root stepper component built on Reka UI's StepperRoot.

StepperDescription ​

The description text for a StepperItem.

StepperIndicator ​

The visual indicator (icon or number) inside a StepperItem.

StepperItem ​

An individual step item within a Stepper.

StepperSeparator ​

A visual separator between StepperItems.

StepperTitle ​

The title text for a StepperItem.

StepperTrigger ​

The clickable trigger area for a StepperItem.

Renders a sticky toolbar that hides when the user scrolls down past its initial position and reappears when they scroll back up or the scroll pauses.

Two modes:

  • Standalone (default). The bar self-stickies to the window's scroll (or to scrollRoot when it lives inside a scrollable region) and drives its own hide/reveal via useScrollReveal. The reveal strategy is selectable; scroll-up-or-idle is the default (and original) behavior.
  • Zone-managed (zone set). The bar teleports its surface into a StickyStackProvider zone (via StickyChrome) and lets that zone own the positioning and reveal, so it stacks with the page title and other chrome. When no provider is present the surface renders inline where the bar is placed.

Exposes named primary (submit / primary actions, pushed to the start) and secondary (read-only actions, contextual info) slots; falls back to the default slot when neither named slot is bound.

StickyChrome ​

Teleports a view's sticky chrome into one of the StickyStackProvider zones (top or bottom) and registers the reveal behavior that zone should adopt while this chrome is mounted (see useStickyStack). When no provider zone exists above, the chrome renders inline where this component is placed, so a view degrades gracefully if the layout omits the provider.

StickyStackProvider ​

Hosts the framework-owned sticky chrome stack for a layout. Place it around the scrolling region (inside the layout's main content area, wrapping <RouterView>); the window remains the scroll container, so this component introduces no overflow. It renders an ordered stack of independently-revealing sticky bars pinned to the top and bottom of the viewport, establishes the useStickyStack context so the active view can teleport chrome into either zone (via StickyChrome), and publishes the visible top-stack height as --vueda-sticky-stack-top for descendants (such as a sticky grid header) to offset against.

The page title goes in the top slot (plain composition); it is the always-pinned first bar of the top stack, and the view's chrome (filters, form actions) stacks below it, each revealing on its own schedule. Each bar's sticky offset is the cumulative height of the visible bars between it and the viewport edge, so hiding one bar compacts the rest with no offsets crossing the layout boundary.

Tabs ​

Root tabs component built on Reka UI's TabsRoot.

TabsContent ​

The content panel for a single tab in a Tabs component.

TabsList ​

The list of tab triggers in a Tabs component.

TabsTrigger ​

A tab trigger button that activates its associated TabsContent.

Tooltip ​

Root tooltip component built on Reka UI's TooltipRoot.

TooltipContent ​

The content panel of a Tooltip, rendered in a portal with an arrow.

TooltipProvider ​

Provides tooltip configuration context to all descendant Tooltip components.

TooltipTrigger ​

The trigger element that shows a Tooltip on hover or focus.

Support ​

EmptyComponent ​

LazyRender ​

Defers rendering its default slot until the component scrolls into the viewport, using an IntersectionObserver. Before the content is visible, a placeholder slot is rendered instead, allowing callers to supply a skeleton or spacer.

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