vueda

Appearance

View Markdown

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) below the form, or, with the page prop, a sticky action bar above it. When the form has per-field errors that no rendered field shows beside itself, it also renders a structured validation alert sourced from formContext.state.errors. The alert sits with the non-field error block above the fields, so a reader meets it before the first field and the submit control. 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. Delegates the form submission to an inner ActionForm.

By default the form's action needs a recent session, so a pending reauthentication flow sends the user to the reauthenticate route. That flow belongs to the whole session, not to this form. Set requireRecentAuth to false for a form whose action the server accepts without a recent session.

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 page prop renders the same parts as a routed page instead: the confirm button moves into the sticky action bar and the parts sit in the page gutter, as the detail views lay out a page. The action views and ViewDestroy set page. The bare prop suppresses the card chrome and banner, for a host that wraps the form in a card of its own.

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 the closest model's actions by route name, sorted by string similarity to the tried action (detail actions only when the tried route has a pk, which their links reuse), 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. The server checks the current password and does not require a recent session, so the form sets requireRecentAuth to false.

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 ​

View that renders a confirmation form for the deactivate action via ModelActionForm, then sends a PATCH request to the deactivate endpoint when the user confirms. It shares its body with ViewActivate: the selected objects, the page title, the "Go Back" action, warning confirmation, and bulk requests. Attributes and slots pass through to ModelActionForm, so a wrapping page can adapt it, for example to a self-service account page with confirmText, bannerTitle, actionSuccessSummary, and the confirm-message slot.

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.

Contributes its own page title ("Delete Widget", or "Delete 3 Widgets" for a bulk destroy) through {@link usePageTitle}, so the layout's PageTitle display renders a heading here as it does on the other CRUD views.

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.

ViewForgotPassword ​

Default forgot password view. Asks for an email address and requests a password reset link for it, inside an AuthorizingForm card.

The server answers the same way whether or not an account uses the address, so the confirmation does not say that one does. Replace pieces through the field(email), widget(email), action-bar, and suffix slots; any other AuthorizingForm or ActionForm slot is forwarded through.

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 ​

Compact loading status for route-level async resolution. Shows a loading icon and label, with optional request details and dependency progress. After slowAfterMs, shows a slow-load message and the optional slow-actions slot.

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.

ViewReauthenticate ​

Default reauthentication view. Confirms a signed-in user's identity before a reauthentication-guarded action, with the proof the server requires for the account. storeUser.authPendingFlow names it: mfa_reauthenticate renders ViewTwoFactorAuth submitting through storeUser.twoFactorReauthenticate; reauthenticate renders a password form in an AuthorizingForm card submitting through storeUser.reauthenticate. Both wait for authPendingFlow to clear before redirecting, so a user whose session is already recent is sent on without a prompt.

The header, subTitle, and toasts set here are defaults: an attribute passed in with the same name falls through to whichever form is showing and replaces it, as does any other AuthorizingForm prop such as redirect. Integrators can replace pieces of the password form through the field(password), widget(password), and action-bar slots; other slots are forwarded to the form being rendered.

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.

ViewResetPassword ​

Default reset password view, the page a password reset email links to. Checks the link, then asks for a new password and its confirmation inside an AuthorizingForm card.

The emailed link carries the account's pk in its path and the token in its query, so a route passes both as props, for example /reset-password/:pk with props: (route) => ({ pk: route.params.pk, token: route.query.token }). A link the server rejects shows the invalid-message slot instead of the form. After a successful reset the view goes to signInTo.

Replace pieces through the field(password), widget(password), field(password_confirm), widget(password_confirm), action-bar, and invalid-message slots; any other AuthorizingForm or ActionForm slot is forwarded through.

ViewSelectedObjectsAction ​

Shared body of ViewActivate and ViewDeactivate: loads the selected objects, contributes the page title, teleports a "Go Back" action into the title action zone, and runs the action through ModelActionForm with a PATCH request. Every attribute, such as tone or confirmText, and every slot passes through to ModelActionForm. The wrapping view owns the root element, its theme key, and the action's defaults.

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, toasts, theme overrides, all forwarded to AuthorizingForm), show a "Forgot password?" link with forgotPasswordTo, or replace individual pieces through the field(email), widget(email), field(password), widget(password), action-bar, and suffix slots. Any other AuthorizingForm or ActionForm slot is forwarded through.

ViewTwoFactorAuth ​

Two-factor authentication challenge view. 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. A separate ghost CTA reveals a recovery-code path that swaps the form body to a single mono text input.

By default the code completes sign-in through storeUser.twoFactorAuthenticate. The header, subTitle, and runAction set here are defaults: an attribute passed in with the same name falls through to the root AuthorizingForm and replaces it. ViewReauthenticate passes runAction that way to confirm a signed-in user's second factor through storeUser.twoFactorReauthenticate. The server lists methods and sends codes for the user in the pending login stage or, failing that, the signed-in user, so one fetch serves both.

Once a who-is request has succeeded, an anonymous user with no second-factor flow pending has no sign-in to finish here, for example because the pending sign-in expired. The view sends that user to the sign-in route, keeping the redirect query, and shows a warning toast that explains why. A signed-out user whose methods request is refused with an UnauthorizedError goes there too. Both paths share one redirect, so the user sees one toast and one navigation when both react to the same refused request.

ViewUpdate ​

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

Widgets ​

WidgetBooleanReadOnly ​

Read-only presentation for boolean fields. Wraps {@link WidgetReadOnly} so the row keeps its label association, theme slots, and lookup behavior, and fills the value with {@link BooleanDisplay} instead of the raw serialized literal.

fieldMappings selects this widget through readOnlyWidget and supplies the per-type labels through readOnlyWidgetProps, so a project that says "Enabled" and "Disabled" sets them once in its own mapping rather than per field.

A consumer's own default slot still wins: this widget supplies the boolean rendering only when the field has no widget(fieldName)default override.

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.

WidgetDateTimeReadOnly ​

Read-only presentation for date, time, and datetime fields. Wraps {@link WidgetReadOnly} so the row keeps its label association, theme slots, and lookup behavior, and fills the value with {@link DateTimeDisplay} instead of the raw serialized string.

fieldMappings selects this widget through readOnlyWidget and supplies the per-type display options through readOnlyWidgetProps, which mirror the columnProps that columnMappings gives ColumnDateTime. A read view and a list therefore format the same field the same way, and an empty value renders the same dash in both.

A consumer's own default slot still wins: this widget supplies the date rendering only when the field has no widget(fieldName)default override.

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 value is DRF's duration string ([D ]HH:MM:SS), as a Django DurationField sends and reads it, or with seconds a number of seconds, as DurationSecondsField sends and reads it. The shown units split the value between them, so a duration of two days reads as 48 hours when days are hidden. Clearing a unit while the rest of the value is zero sets the value to null. Entering 0 keeps a zero duration. A negative value, such as Django's -1 23:00:00 for minus one hour, shows a "Negative" segment with a minus sign before the spinners. The spinners show the duration's size, and editing them keeps the value negative.

WidgetDurationReadOnly ​

Read-only presentation for duration fields. Wraps {@link WidgetReadOnly} so the row keeps its label association, theme slots, and lookup behavior, and fills the value with {@link DurationDisplay} instead of the raw serialized literal.

fieldMappings selects this widget through readOnlyWidget and supplies the display options through readOnlyWidgetProps, which mirror the columnProps that columnMappings gives ColumnDuration. A read view and a list therefore word the same field the same way, and an empty value renders the same dash in both.

A consumer's own default slot still wins: this widget supplies the duration rendering only when the field has no widget(fieldName)default override.

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.

WidgetFileReadOnly ​

Read-only presentation for file and image fields. Wraps {@link WidgetReadOnly} so the row keeps its label association, theme slots, and lookup behavior, and fills the value with {@link FileDisplay}: a link labelled with the file name, instead of the { name, url } object that the plain read-only widget prints.

fieldMappings selects this widget through readOnlyWidget.

A consumer's own default slot still wins: this widget supplies the file rendering only when the field has no widget(fieldName)default override.

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.

WidgetJsonReadOnly ​

Read-only presentation for JSON fields. Wraps {@link WidgetReadOnly} so the row keeps its label association, theme slots, and lookup behavior, and fills the value with {@link JsonDisplay} instead of the one-line literal the plain read-only widget prints.

The block form is the point: a read view has the room to indent a nested payload, while a list cell does not, so {@link ColumnJson} renders the same value inline. Both give a null value the same dash.

fieldMappings selects this widget through readOnlyWidget and supplies the display options through readOnlyWidgetProps.

A consumer's own default slot still wins: this widget supplies the JSON rendering only when the field has no widget(fieldName)default override.

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.

WidgetOTPInput ​

A one-time code widget that renders an InputOTP with form field integration. Used for verification codes when paired with FormField. Renders one slot per character unless the default slot supplies its own groups and slots.

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.

WidgetTagsInput ​

A tags input widget for a field that holds a list of values. Each entry becomes a removable tag, and the field value is the array of entered strings. An entry is added on Enter, on the comma delimiter, on paste, and when the input loses focus. Each entry is trimmed before it is added, so 2 next to an existing 2 is a duplicate. With numeric, only entries written as decimal numbers are added, such as 12, -2.5, .5, or 1e3. A rejected entry stays in the input, marked invalid, until it is edited.

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 a diagnostic when a form model resolves no widget for a field, either because the field's type pair has no entry in the field mappings or because a configured widget name does not resolve. Surfaces a misconfigured field definition in the form rather than dropping the field silently.

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.

BooleanDisplay ​

Presents a boolean as a word rather than its stored literal, so a read view says "Yes" instead of true. A null or absent value renders the same dash {@link DateTimeDisplay} uses for an empty date, which is the third state a NullBooleanField can hold.

A serializer that sends 1, 0, "true", or "false" still lands on a word; only null, undefined, and the empty string read as "no value recorded" and take the dash.

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 scope chips, the filter chips, and the sort chips on a single line, with a hairline divider between each pair of active groups. The groups are told apart by their own tint (info for scopes, primary for filters, neutral for sorts), so the band reads as grouped categories rather than one undifferentiated pile. Each group owns its own clear control.

Presentational only: the host supplies the chip groups via the scopes, 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.

DurationDisplay ​

Presents a duration in named units rather than its stored literal, so a read view says "730 days" instead of 730 00:00:00. A null or absent value renders the same dash {@link DateTimeDisplay} uses for an empty date.

Both serialized shapes are accepted: the Django duration string DRF's DurationField sends ([-]D HH:MM:SS[.ffffff]) and the number of seconds VUEDA's DurationSecondsField sends. Units that hold zero are left out, so a value only names the parts it has. A duration of zero names the smallest unit ("0 seconds"), which is a recorded value and not the same as no value at all. Sub-second precision is dropped.

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.

FileDisplay ​

Presents a stored file as a link labelled with the file name, rather than the { "name": ..., "url": ... } object that VUEDA's file and image serializer fields send. A plain string value is read as the file's URL and is also the label. A null, absent, or empty value renders the same dash {@link DateTimeDisplay} uses for an empty date.

JsonDisplay ​

Presents a JSON value as formatted text. The block form indents it over several lines, so nesting is readable rather than one long line; the inline form keeps it compact for a table cell and truncates it past maxLength. A null or absent value renders the same dash {@link DateTimeDisplay} uses for an empty date.

An empty object or array is a recorded value, not an absent one, so it renders as {} or []. The empty string is the JSON string scalar here and renders as "", unlike {@link BooleanDisplay} and {@link DurationDisplay}, whose serializers send "" to mean a blank field. A value that cannot be serialized (a circular structure) falls back to plain coercion rather than rendering nothing.

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.

ScopeChip ​

Renders one list scope as a read-only pill. A scope is a list constraint supplied by a link or by application code that has no editable input, so the label segment only describes it; when the scope is clearable, a trailing segment asks to clear it.

ScopeGroup ​

Renders a list's active scopes as a strip of ScopeChips, plus a Clear scopes control when more than one clearable scope is active. A scope is a list constraint supplied by a link or by application code that has no editable input: the chips describe it and offer removal, and the add-filter menu never offers it. The scope-side counterpart to FilterGroup's chips.

Presentational only: the group reports which scopes the reader asked to clear, and the host removes their values.

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.

It reads these icon names from the Sonner registry entry: check for success, info, triangleExclamation for warning, close for error and for the close button, and loading.

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.

FieldSetInlineActionButton ​

Default non-destroy action button shared by stacked and tabular inline rows. Invokes the configured callback with the layout's row context, the action, and the click event. Appearance comes from the shared Button theme.

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. Every entry can be removed. Required lists need at least one entry; optional lists may be empty. Added entries require a value.

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 editable new (unsaved) rows, even without a destroy action. Editable existing rows show a destroy checkbox supplied by the parent inline. Slot overrides are 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 (label: message) when it carries exactly one message, or as its own sub-header plus list when it carries more.

A field is named by its label from fieldDetails, so the confirmation calls a field what the form above it calls it. With no entry there it falls back to the start-cased field name.

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.

FormModelField ​

Renders one field of the surrounding FormModel with that form model's per-field slots, such as #widget(sku), #field(sku)label, and #field-errors. Use it in a custom #fields layout, where a plain FieldRenderer would not receive those slots.

It accepts every FieldRenderer prop and passes it through. A slot passed to FormModelField directly wins over the form model's slot with the same name.

Uses a render function (not a template), because a template can only render the component's own slots, not the slot functions that the form model provides.

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 framed, scrollable container and styled table element.

The frame sits outside the scroll container, so rows and sticky header cells scroll inside it and never paint over its edge.

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 ​

ColumnBoolean ​

Boolean list column adapter. Wraps {@link BooleanDisplay}, binding the cell's raw value and forwarding the labels resolved from columnMappings (per field type) and any columnProps override, so a list cell says "Yes" where the read view says "Yes".

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 BooleanDisplay root. BooleanDisplay renders a dash for an empty value.

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.

ColumnDuration ​

Duration list column adapter. Wraps {@link DurationDisplay}, binding the cell's raw value and forwarding the display options resolved from columnMappings (per field type) and any columnProps override, so a list cell words a duration the way the read view does.

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 DurationDisplay root. DurationDisplay renders a dash for an empty value.

ColumnFile ​

File and image list column adapter. Wraps {@link FileDisplay} in its inline form, binding the cell's raw value, so a cell shows a link labelled with the file name where the {@link ColumnText} fallback printed the { name, url } object as JSON.

The cell holds its own link, so ViewList does not wrap this adapter in the record's detail link.

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

ColumnJson ​

JSON list column adapter. Wraps {@link JsonDisplay} in its inline form, binding the cell's raw value and forwarding the options resolved from columnMappings (per field type) and any columnProps override.

A cell has one line to work with, so this renders compact JSON and truncates past maxLength, while the read view indents the same value through {@link WidgetJsonReadOnly}. That is a layout difference, not a wording one: both print the same JSON and give a null value the same dash.

This replaces the {@link ColumnText} fallback that previously handled these cells. The visible changes are the mono stack, the dash for a null, and value rather than formatted as the source, so a cell reflects the stored payload rather than the grid's pre-formatted copy of it.

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

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.