Components

Build beautiful, accessible, and responsive user interfaces with 110+ Vue components powered by Tailwind CSS and Reka UI.

Layout

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

App

Wraps your app to provide global configurations and more.

Container

A container lets you center and constrain the width of your content.

Error

A pre-built error component with NuxtError support.

Footer

A responsive footer component.

Header

A responsive header component.

Main

A main element that fills the available viewport height.

Element

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

Alert

A callout to draw user's attention.

Avatar

An img element with fallback and Nuxt Image support.

AvatarGroup

Stack multiple avatars in a group.

Badge

A short text to represent a status or a category.

Banner

Display a banner at the top of your website to inform users about important information.

Button

A button element that can act as a link or trigger an action.

Calendar

A calendar component for selecting single dates, multiple dates or date ranges.

Card

Display content in a card with a header, body and footer.

Chip

An indicator of a numeric value or a state.

Collapsible

A collapsible element to toggle visibility of its content.

FieldGroup

Group multiple button-like elements together.

Icon

A component to display any icon from Iconify or another component.

Kbd

A kbd element to display a keyboard key.

Progress

An indicator showing the progress of a task.

Separator

Separates content horizontally or vertically.

Skeleton

A placeholder to show while content is loading.

Form

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

Checkbox

An input element to toggle between checked and unchecked states.

CheckboxGroup

A set of checklist buttons to select multiple option from a list.

ColorPicker

A component to select a color.

FileUpload

An input element to upload files.

Form

A form component with built-in validation and submission handling.

FormField

A wrapper for form elements that provides validation and error handling.

Input

An input element to enter text.

InputMenu

An autocomplete input with real-time suggestions.

InputNumber

An input for numerical values with a customizable range.

InputTags

An input element that displays interactive tags.

PinInput

An input element to enter a pin.

RadioGroup

A set of radio buttons to select a single option from a list.

Select

A select element to choose from a list of options.

SelectMenu

An advanced searchable select element.

Slider

An input to select a numeric value within a range.

Switch

A control that toggles between two states.

Textarea

A textarea element to input multi-line text.

Data

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

Accordion

A stacked set of collapsible panels.

Carousel

A carousel with motion and swipe built using Embla.

Empty

A component to display an empty state.

Marquee

A component to create infinite scrolling content.

Table

A responsive table element to display data in rows and columns.

Timeline

A component that displays a sequence of events with dates, titles, icons or avatars.

Tree

A tree view component to display and interact with hierarchical data structures.

User

Display user information with name, description and avatar.

Navigation

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

Breadcrumb

A hierarchy of links to navigate through a website.

CommandPalette

A command palette with full-text search powered by Fuse.js for efficient fuzzy matching.

FooterColumns

A list of links as columns to display in your Footer.

Link

A wrapper around <NuxtLink> with extra props.

NavigationMenu

A list of links that can be displayed horizontally or vertically.

Pagination

A list of buttons or links to navigate through pages.

Stepper

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

Tabs

A set of tab panels that are displayed one at a time.

Overlay

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

ContextMenu

A menu to display actions when right-clicking on an element.

Drawer

A drawer that smoothly slides in & out of the screen.

DropdownMenu

A menu to display actions when clicking on an element.

Modal

A dialog window that can be used to display a message or request user input.

Popover

A non-modal dialog that floats around a trigger element.

Slideover

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

Toast

A succinct message to provide information or feedback to the user.

Tooltip

A popup that reveals information when hovering over an element.

Page

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

AuthForm

A customizable Form to create login, register or password reset forms.

BlogPost

A customizable article to display in a blog page.

BlogPosts

Display a list of blog posts in a responsive grid layout.

ChangelogVersion

A customizable article to display in a changelog.

ChangelogVersions

Display a list of changelog versions in a timeline.

Page

A grid layout for your pages with left and right columns.

PageAnchors

A list of anchors to be displayed in the page.

PageAside

A sticky aside to display your page navigation.

PageBody

The main content of your page.

PageCard

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

PageColumns

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

PageCTA

A call to action section to display in your pages.

PageFeature

A component to showcase key features of your application.

PageGrid

A responsive grid system for displaying content in a flexible layout.

PageHeader

A responsive header for your pages.

PageHero

A responsive hero for your pages.

PageLinks

A list of links to be displayed in the page.

PageList

A vertical list layout for displaying content in a stacked format.

PageLogos

A list of logos or images to display on your pages.

PageSection

A responsive section for your pages.

PricingPlan

A customizable pricing plan to display in a pricing page.

PricingPlans

Display a list of pricing plans in a responsive grid layout.

PricingTable

A responsive pricing table component that displays tiered pricing plans with feature comparisons.

Check out the SaaS template on GitHub for a real-life example.

Dashboard

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

DashboardGroup

A fixed layout component that provides context for dashboard components with sidebar state management and persistence.

DashboardNavbar

A responsive navbar to display in a dashboard.

DashboardPanel

A resizable panel to display in a dashboard.

DashboardResizeHandle

A handle to resize a sidebar or panel.

DashboardSearch

A ready to use CommandPalette to add to your dashboard.

DashboardSearchButton

A pre-styled Button to open the DashboardSearch modal.

DashboardSidebar

A resizable and collapsible sidebar to display in a dashboard.

DashboardSidebarCollapse

A Button to collapse the sidebar on desktop.

DashboardSidebarToggle

A Button to toggle the sidebar on mobile.

DashboardToolbar

A toolbar to display under the navbar in a dashboard.

Check out the Dashboard template on GitHub for a real-life example.

Chat

Components for building conversational interfaces and chatbots, powered by the Vercel AI SDK.

ChatMessage

Display a chat message with icon, avatar, and actions.

ChatMessages

Display a list of chat messages, designed to work seamlessly with Vercel AI SDK.

ChatPalette

A chat palette to create a chatbot interface inside an overlay.

ChatPrompt

An enhanced Textarea for submitting prompts in AI chat interfaces.

ChatPromptSubmit

A Button for submitting chat prompts with automatic status handling.

Check out the AI Chat template on GitHub for a real-life example.

Content

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

ContentNavigation

An accordion-style navigation component for organizing page links.

ContentSearch

A ready to use CommandPalette to add to your documentation.

ContentSearchButton

A pre-styled Button to open the ContentSearch modal.

ContentSurround

A pair of prev and next links to navigate between pages.

ContentToc

A sticky Table of Contents with automatic active anchor link highlighting.

Check out the Docs template on GitHub for a real-life example.

Color Mode

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

ColorModeAvatar

An Avatar with a different source for light and dark mode.

ColorModeButton

A Button to switch between light and dark mode.

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.