Components

A vertically stacked set of interactive headings that each reveal a section of content.

Displays a callout for user attention, with optional destructive styling.

A modal dialog that interrupts the user with important content and expects a response.

Displays content within a fixed, desired width-to-height ratio.

Displays a file, image, or upload as a card with media, title, description, and actions.

An image element with a fallback for representing a user or entity.

Displays a badge or a component that looks like a badge.

Displays the path to the current resource using a hierarchy of links.

A chat message bubble with alignment, color variants, and an optional reactions badge.

A polymorphic button with variants, sizes, icons, and a CTA group helper.

Groups related buttons together with consistent styling, orientation, and separators.

A date field component that allows users to enter and edit dates, and navigate by month and year.

Displays a card with header, content, and footer.

A carousel of slides with previous/next controls and keyboard navigation.

A themeable wrapper around Unovis for building bar, line, and area charts with tooltips and legends.

A control that allows the user to toggle between checked and not checked.

An interactive component which expands and collapses a panel of content.

An autocomplete input that filters a searchable list of options in a popover.

Command menu for search and quick actions.

Constrains content to a max width and centers it with responsive side padding.

Displays a menu at the pointer, triggered by a right click.

A popover-driven calendar for picking a single date from a button-style trigger.

A window overlaid on either the primary window or another dialog window.

A panel that slides in from an edge of the screen, built on Vaul.

Displays a menu of actions or options triggered by a button.

Displays an empty state placeholder with icon, title, description, and actions.

Combine labels, controls, descriptions, and errors into accessible form fields.

Composable, validated form fields built on vee-validate with labels and error messages.

A polymorphic heading element with configurable level, size, weight, and tone.

Displays content in a popover when a trigger is hovered.

A namespaced icon registry with a renderer component, grid layout, and searchable gallery.

Displays a form input field or a component that looks like an input field.

Groups an input with addons, icons, and inline actions.

Accessible one-time-password input with grouped, animated character slots.

A flexible layout primitive for rows of content with media, title, description, and actions.

Displays a keyboard key or shortcut.

Renders an accessible label associated with controls.

An invisible full-coverage link overlay that makes an entire card or row clickable.

A styled, polymorphic text link with tone, underline, and size variants.

A typed logo component with size variants and a brand logo set.

A compact inline marker for labeling content, with an optional icon and separator style.

A horizontal application menu bar with nested dropdown menus, like native desktop menus.

A chat message layout primitive with avatar, header, content, and footer slots.

An auto-scrolling viewport for chat-style message lists that tracks the live edge and lets users scroll away and back.

A styled wrapper around the native HTML select element.

A collection of links for site or application navigation, with optional flyout content.

An input for entering a number, with increment and decrement controls.

Navigation for paged content, with first, previous, next, last, and page-number controls.

Displays rich content in a portal, anchored to a trigger element.

Displays an indicator showing the completion progress of a task.

A set of checkable buttons where only one item can be checked at a time.

A calendar for selecting a date range, such as a start and end date.

Accessible resizable panel groups and layouts.

Augments native scroll functionality for custom, cross-browser styling.

A scrollable container that fades its edges to hint at overflowing content.

Displays a list of options for the user to pick from, triggered by a button.

Visually or semantically separates content.

Extends the Dialog component to display content that complements the main content of the screen.

An animated shimmering text or inline-content effect.

A composable, themeable sidebar with collapsible, floating, and inset variants.

Use to show a placeholder while content is loading.

An input where the user selects a value from within a given range.

An opinionated toast component, themed to match the design system.

A loading indicator that spins an icon with accessible status semantics.

A set of steps that are used to indicate progress through a multi-step process.

A control that allows the user to toggle between on and off states.

A responsive table component for displaying tabular data.

A set of layered sections of content—known as tab panels—that are displayed one at a time.

An input field for creating and managing a list of tags.

A flexible typography component for rendering body text with consistent sizing, weight, and tone.

Displays a form textarea or a component that looks like a textarea.

A two-state button that can be either on or off.

A set of two-state buttons that can be toggled on or off, grouped together.

A popup that displays information related to an element when it receives keyboard focus or the mouse hovers over it.