All Components

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

A visually emphasized message that informs the user of an event.

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

A group of animated tooltips that display on hover with smooth spring animations and dynamic positioning based on mouse movement.

Displays content within a desired ratio.

Choose from a list of suggested values with full keyboard support.

An image element with a fallback for representing the user.

A badge is a component that is used to highlight an item's status for quick recognition.

Breadcrumbs are a great way to show hierarchy in a page.

A button is a component that is used to trigger an action.

A container that groups related buttons together with consistent styling.

A calendar component allows you to display a calendar with events.

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

A carousel with motion and swipe built using Embla.

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

A component used to display some sort of indicator on another component.

An interactive component which expands/collapses a panel.

Autocomplete input and command palette with a list of suggestions.

A command menu component composed of the Combobox primitives from Reka UI.

A container to wrap content in. It has a max-width and is centered by default.

Displays a menu located at the pointer, triggered by a right-click or a long-press.

Displays a form input field for currency values.

DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, built upon the foundations of progressive enhancement, that adds all of these advanced features to any HTML table.

Enables users to input specific dates within a designated field.

Allows the user to select a date from a calendar.

A description list is typically used to display pairs of terms and details, like in invoices or product specifications, enhancing clarity and organization of information.

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

A horizontal line to separate content. Similiar to the Seperator component, but with items in the middle.

A wrapper component around Vue Draggable that makes any list of items sortable via drag and drop.

A drawer component that can be used as a Dialog replacement on tablet and mobile devices.

Displays a menu to the user—such as a set of actions or functions—triggered by a button.

Allows users to drag and drop files into the browser to upload them.

Displays an input field used for editing a single line of text, rendering as static text on load. It transforms into a text input field when the edit interaction is triggered.

A component used to display a message when there is no data to show.

An icon with a nice background color.

Combine labels, controls, and help text to compose accessible form fields and grouped inputs.

Building forms with VeeValidate and Zod.

A divider that has a gradient background

Displays a semantic heading with multiple levels of size and style customization.

For sighted users to preview content available behind a link.

A versatile icon component that supports Iconify icons, emojis, and custom images with automatic detection.

A lazy-loaded iframe component that loads content only when it comes into view, with customizable placeholder and intersection options.

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

Display additional information or actions to an input or textarea.

A versatile component that you can use to display any content.

The <kbd> HTML element represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device.

Renders an accessible label associated with controls.

Lists are used to group together related pieces of information so they are clearly associated with each other and easy to read.

A control that allows the user to toggle between checked and not checked from a list of options.

A loader indicates an unknown wait time or process duration, keeping users informed and enhancing their experience by providing visual feedback during delays.

A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.

A horizontal navigation bar for primary site links, branding, and interactive elements.

A navbar to use in your app. It is rendered as a header element by default but can be changed to a div with the as props.

A collection of links for navigating websites.

A number field allows a user to enter a number and increment or decrement the value using stepper buttons.

Displays data in paged format and provides navigation between pages.

A sequence of one-character alphanumeric inputs. Useful for PIN codes, verification codes, etc.

A placeholder box that can be used as any filler content.

Displays rich content in a portal, triggered by a button.

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.

A component for displaying and selecting star ratings.

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

A component for tracking scroll position and updating active links.

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

Display a dropdown list of options for users to choose from.

Visually or semantically separates content.

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

A composable, themeable and customizable sidebar component.

Use to show a placeholder while content is loading.

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

Sonner is an opinionated toast component for Vue. It's customizable, but styled by default. Comes with a swipe to dismiss animation.

A component that divides your layout into resizable sections.

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

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

A responsive table component.

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

Tag inputs render tags inside an input, followed by an actual text input.

A powerful datatable for your app built with TanStack Table.

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

A timeline component to display a series of events in chronological order.

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

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

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

A tree view widget displays a hierarchical list of items that can be expanded or collapsed to show or hide their child items, such as in a file system navigator.