Made with Tailwind CSS v4

Build beautiful UI with 50+ 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 VueStart with Nuxt

Layout

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

App
Wraps your app to provide global configurations and more.
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.
Separator
Separates content horizontally or vertically.
Skeleton
A placeholder to show while content is loading.

Form

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

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.

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.
Icon
A component to display any icon from Iconify.
Keyboard Key
A kbd element to display a keyboard key.
Progress
An indicator showing the progress of a task.

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.
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.

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.
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.