Components

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

Layout

Structural components for organizing your app's layout. Start by wrapping your app with the App component.

App

Wraps your app to provide global configurations and more.

Container

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

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 such as buttons, badges, icons, avatars, 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.

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.

Comprehensive form components for building interactive user input flows, including text fields, selects, checkboxes, radio groups, toggles, and robust validation tools for accessible and dynamic forms.

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 managing data, including tables, lists, cards, data grids, and visualization elements.

Accordion

A stacked set of collapsible panels.

Carousel

A carousel with motion and swipe built using Embla.

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, and navigation bars.

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 like modals, dialogs, tooltips, popovers, and other components that overlay the main content.

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

Components to build all the marketing sections of your website, enabling you to create landing pages, blogs, changelogs, pricing pages, and more.

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.

Error

A pre-built error component with NuxtError support.

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.

Content

Components for organizing and displaying content on individual pages, including page headers, footers, and sidebars.

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.

Dashboard

Components for creating dashboards with dynamic sidebars and content.

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

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.

AI Chat

Components to build your own chatbot, powered by the Vercel AI SDK.

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

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.

Color Mode

Components that integrate with Color Mode, enabling light and dark mode switching.

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 internationalizing your application.

LocaleSelect

A Select to switch between locales.