Build beautiful UI with 100+ powerful components

Build your Vue or Nuxt application faster with Nuxt UI and Nuxt UI Pro components. Powered by Tailwind CSS and Reka UI, delivering responsive and customizable components.

Start with Vue Start with Nuxt

Element

Core UI building blocks like buttons, badges, icons, avatars, and other fundamental interface elements.

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.

Button

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

ButtonGroup

Group multiple button-like elements together.

Calendar

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

Chip

An indicator of a numeric value or a state.

Collapsible

A collapsible element to toggle visibility of its content.

ColorModeAvatar^PRO

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

ColorModeButton^PRO

A Button to switch between light and dark mode.

ColorModeImage^PRO

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

ColorModeSelect^PRO

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

ColorModeSwitch^PRO

A switch to toggle between light and dark mode.

ContentSearchButton^PRO

A pre-styled Button to open the ContentSearch modal.

DashboardSearchButton^PRO

A pre-styled Button to open the DashboardSearch modal.

DashboardSidebarCollapse^PRO

A Button to collapse the sidebar on desktop.

DashboardSidebarToggle^PRO

A Button to toggle the sidebar on mobile.

Icon

A component to display any icon from Iconify.

Keyboard Key

A kbd element to display a keyboard key.

LocaleSelect^PRO

A Select to switch between locales.

Progress

An indicator showing the progress of a task.

Form

Interactive form elements including inputs, selects, checkboxes, radio buttons, and advanced form validation components.

AuthForm^PRO

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

Checkbox

An input element to toggle between checked and unchecked states.

ColorPicker

A component to select a color.

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

Input numerical values with a customizable range.

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.

BlogPost^PRO

A customizable article to display in a blog page.

Carousel

A carousel with motion and swipe built using Embla.

PageAccordion^PRO

A pre-styled Accordion to display in your pages.

PageCard^PRO

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

PageCTA^PRO

A call to action section to display in your pages.

PageFeature^PRO

A component to showcase key features of your application.

PageHeader^PRO

A responsive header for your pages.

PageHero^PRO

A responsive hero for your pages.

PageLogos^PRO

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

PageMarquee^PRO

A component to create infinite scrolling content.

PageSection^PRO

A responsive section for your pages.

PricingPlan^PRO

A customizable pricing plan to display in a pricing page.

Table

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

Tree

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

User^PRO

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.

ContentNavigation^PRO

An accordion-style navigation component for organizing page links.

ContentSurround^PRO

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

ContentToc^PRO

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

FooterColumns^PRO

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.

PageAnchors^PRO

A list of anchors to be displayed in the page.

PageLinks^PRO

A list of links to be displayed in the page.

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.

ContentSearch^PRO

A ready to use CommandPalette to add to your documentation.

ContextMenu

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

DashboardSearch^PRO

A ready to use CommandPalette to add to your dashboard.

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.

Layout

Structural components for organizing content, including containers, grids, dividers, and responsive layout systems.

App

Wraps your app to provide global configurations and more.

Banner^PRO

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

BlogPosts^PRO

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

Card

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

Container

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

DashboardGroup^PRO

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

DashboardNavbar^PRO

A responsive navbar to display in a dashboard.

DashboardPanel^PRO

A resizable panel to display in a dashboard.

DashboardResizeHandle^PRO

A handle to resize a sidebar or panel.

DashboardSidebar^PRO

A resizable and collapsible sidebar to display in a dashboard.

DashboardToolbar^PRO

A toolbar to display under the navbar in a dashboard.

Error^PRO

A pre-built error component with NuxtError support.

Footer^PRO

A responsive footer component.

Header^PRO

A responsive header component.

Main^PRO

A main element that fills the available viewport height.

Page^PRO

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

PageAside^PRO

A sticky aside to display your page navigation.

PageBody^PRO

The main content of your page.

PageColumns^PRO

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

PageGrid^PRO

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

PageList^PRO

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

PricingPlans^PRO

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

Separator

Separates content horizontally or vertically.

Skeleton

A placeholder to show while content is loading.