Components

Build stunning, accessible, and fully responsive UIs with a comprehensive suite of 110+ Vue components, engineered with Tailwind CSS and Reka UI.

Layout

Core structural components for organizing your application's layout and establishing a consistent foundation for your UI.

App

Encases your app to deliver global settings and additional features.

Container

A box for centering and setting a maximum width for your content.

Error

A pre-built error component with NuxtError support.

SidebarLayout

You incorporate a sidebar in the slider and CRM entity tab embedding. Overall, it's stylish, trendy, and youthful

Element

Essential UI building blocks including buttons, badges, avatars, icons, and other foundational interface elements for crafting intuitive and consistent user experiences.

Advice

A couple of lines of text and an avatar

Alert

An alert designed to capture the user's attention.

Avatar

An img element that includes fallback and supports Nuxt Image.

AvatarGroup

Pile multiple avatars into a single group.

Badge

A short descriptor for a status or category.

Banner

Top banner for important user messages.

Button

A button capable of linking or performing an action.

Calendar

A calendar tool for choosing individual dates, multiple dates, or date spans.

Card

Render the content within a card component comprising a header, body, and footer section.

Chip

An indicator that shows either a number or a state.

Collapsible

A collapsible component for showing or hiding its content.

Countdown

Countdown with options control.

FieldGroup

Organize several button-like elements into a group.

Kbd

A kbd element for indicating a keyboard input.

Progress

A progress bar displaying task completion status.

Separator

Divides content in a horizontal or vertical manner.

Skeleton

A toggle control for switching between two states.

Form

Comprehensive form components for building interactive user input experiences, including text inputs, selects, checkboxes, radio groups, switches, sliders, and complete form validation.

Checkbox

A toggle input for marking as checked or unchecked.

CheckboxGroup

Multi-select checklist using button controls.

ColorPicker

A color picker component.

FileUpload

A file upload input component.

Form

A form component designed for validation and handling submissions.

FormField

A container for form elements with built-in validation and error management.

Input

An input box designed for text entry.

InputMenu

An input field with live autocomplete suggestions.

InputNumber

Provide numerical input with a flexible range setting.

InputTags

A tags input component with interactive tag elements.

PinInput

A PIN code input component.

RadioGroup

A collection of radio buttons to pick a single choice from several options.

Range

A control for selecting a numeric value within a specified range.

Select

A selection field to pick from various options.

SelectMenu

A refined and searchable selection component.

Switch

A toggle control for switching between two states.

Textarea

A textarea for entering multi-line text.

Data

Components for displaying and organizing data, including tables, accordions, carousels, timelines, trees, and user profiles.

Accordion

This is a stacked set of collapsible panels

DescriptionList

For instances requiring the conversion of a table row into its own table to enhance page completeness.

Empty

An empty state component.

Table

A responsive data table component.

TableWrapper

Wrapper for displaying a html table

Timeline

A component for displaying a chronological sequence of events, with dates, titles, and supporting icons or avatars.

User

A component to display user details, including their name, bio, and profile picture.

Components for user navigation and wayfinding, including menus, breadcrumbs, pagination, tabs, steppers, links, and command palettes.

Breadcrumb

A breadcrumb navigation component.

CommandPalette

A searchable command palette powered by Fuse.js for fast, fuzzy text search.

Link

A wrapper around <NuxtLink> with extra props.

NavigationMenu

A link list that can be arranged in horizontal or vertical orientation.

Pagination

A navigation component with buttons or links for pagination.

Stepper

A stepper component to visualize progress in a multistep workflow.

Tabs

A collection of tab panels shown individually.

Overlay

Floating UI elements that appear above the main content, including modals, popovers, tooltips, drawers, slideovers, and context menus.

ContextMenu

A pop-up menu that appears upon right-clicking an element to present relevant actions.

DropdownMenu

A contextual menu for actions triggered by clicking an element.

Modal

A popup window for showing messages or gathering user input.

Popover

A non-modal popup window for showing messages or gathering user input.

Slideover

A dialog that slides in from any side of the screen.

Toast

A short message to offer information or feedback to the user.

Tooltip

A small window that shows details when you move your mouse over an item.

Page

Pre-built marketing and content sections for creating landing pages, blogs, pricing pages, and other marketing materials.

PageCard

A pre-styled card component featuring a title, description, and optional link.

PageColumns

A responsive multi-column layout system for organizing content side-by-side.

PageGrid

A responsive grid system for creating flexible content layouts.

PageLinks

A list of links to display on the page.

PageList

A vertical list layout for stacking content items.

Dashboard

Specialized components for building dynamic dashboards with resizable panels, collapsible sidebars, toolbars, and search functionality.

DashboardGroup

A fixed-layout dashboard container with sidebar state management and persistent UI state.

DashboardSearch

A ready-to-use Command Palette component for your dashboard.

DashboardSearchButton

A pre-styled button that opens the Dashboard Search modal.

Chat 2.1+

Components for building conversational interfaces and chatbots.

ChatMessage

A chat message component with icon, avatar, and action buttons.

ChatMessages

A chat messages list component designed for seamless integration with the Vercel AI SDK.

ChatPalette

A chat interface component designed to be displayed in a modal overlay.

ChatPrompt

An enhanced Textarea component optimized for prompt submission in AI chat interfaces.

ChatPromptSubmit

A chat prompt submission button with automatic status handling.

Content

Components that integrate with Content for documentation sites, including table of contents, search, navigation trees, and surrounding page links.

ContentSearch

A ready-to-use Command Palette component for your documentation.

ContentSearchButton

A pre-styled button that opens the content search modal.

ContentSurround

A pair of "Previous" and "Next" buttons for sequential page navigation.

ContentToc

A sticky table of contents component with dynamic active section highlighting.

Color Mode

Components that integrate with Color Mode for theme switching between light, dark, and system preferences.

ColorModeAvatar

An Avatar that automatically switches its image based on the current theme (light/dark).

ColorModeButton

A button to toggle between light and dark themes.

ColorModeImage

An image element with a different source for light and dark mode.

ColorModeSelect

A Select to switch between system, dark & light mode.

ColorModeSwitch

A switch to toggle between light and dark mode.

i18n

Components that integrate with i18n for internationalization and locale management.

LocaleSelect

A Select to switch between locales.