Nuxt Ui

---
name: nuxt-ui
description: A comprehensive Vue UI component library (Nuxt optional) with 125+ accessible, production-ready, Tailwind CSS components for building modern web applications.
metadata:
  source: llms.txt
  source_url: https://ui.nuxt.com/llms.txt
  generated: 2026-02-10T17:44:25.259Z
---

# Nuxt UI

> A comprehensive Vue UI component library (Nuxt optional) with 125+ accessible, production-ready, Tailwind CSS components for building modern web applications.

A comprehensive Vue UI component library (Nuxt optional) with 125+ accessible, production-ready, Tailwind CSS components for building modern web applications.

## Available Resources

### Installation (Nuxt & Vue)

- **Installation**: Learn how to install and configure Nuxt UI in your Nuxt application.
  - URL: https://ui.nuxt.com/raw/docs/getting-started/installation/nuxt.md

- **Installation**: Learn how to install and configure Nuxt UI in your Vue application, compatible with both plain Vite and Inertia.
  - URL: https://ui.nuxt.com/raw/docs/getting-started/installation/vue.md

### Getting Started

- **Introduction**: Nuxt UI is a comprehensive Vue UI component library (Nuxt optional), offering 125+ accessible, Tailwind CSS components for building modern web applications.
  - URL: https://ui.nuxt.com/raw/docs/getting-started.md

- **Installation**: Learn how to install and configure Nuxt UI in your Nuxt application.
  - URL: https://ui.nuxt.com/raw/docs/getting-started/installation/nuxt.md

- **Installation**: Learn how to install and configure Nuxt UI in your Vue application, compatible with both plain Vite and Inertia.
  - URL: https://ui.nuxt.com/raw/docs/getting-started/installation/vue.md

- **Migration to v4**: A comprehensive guide to migrate your application from Nuxt UI v3 to Nuxt UI v4.
  - URL: https://ui.nuxt.com/raw/docs/getting-started/migration/v4.md

- **Migration to v3**: A comprehensive guide to migrate your application from Nuxt UI v2 to Nuxt UI v3.
  - URL: https://ui.nuxt.com/raw/docs/getting-started/migration/v3.md

- **Contribution**: A comprehensive guide on contributing to Nuxt UI, including project structure, development workflow, and best practices.
  - URL: https://ui.nuxt.com/raw/docs/getting-started/contribution.md

- **Design System**: Nuxt UI's design system uses Tailwind CSS for simple theming and easy customization.
  - URL: https://ui.nuxt.com/raw/docs/getting-started/theme/design-system.md

- **CSS Variables**: Nuxt UI uses CSS variables as design tokens for flexible, consistent theming with built-in light and dark mode support.
  - URL: https://ui.nuxt.com/raw/docs/getting-started/theme/css-variables.md

- **Customize components**: Learn how to customize Nuxt UI components with the Tailwind Variants API for advanced, flexible, and maintainable styling.
  - URL: https://ui.nuxt.com/raw/docs/getting-started/theme/components.md

- **Icons**: Nuxt UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.
  - URL: https://ui.nuxt.com/raw/docs/getting-started/integrations/icons/nuxt.md

- **Icons**: Nuxt UI integrates with Iconify to access over 200,000+ icons.
  - URL: https://ui.nuxt.com/raw/docs/getting-started/integrations/icons/vue.md

- **Fonts**: Nuxt UI integrates with Nuxt Fonts to provide plug-and-play font optimization.
  - URL: https://ui.nuxt.com/raw/docs/getting-started/integrations/fonts.md

- **Color Mode**: Nuxt UI integrates with Nuxt Color Mode to allow for easy switching between light and dark themes.
  - URL: https://ui.nuxt.com/raw/docs/getting-started/integrations/color-mode/nuxt.md

- **Color Mode**: Nuxt UI integrates with VueUse to allow for easy switching between light and dark themes.
  - URL: https://ui.nuxt.com/raw/docs/getting-started/integrations/color-mode/vue.md

- **Internationalization (i18n)**: Nuxt UI supports 50+ locales and multi-directional (LTR/RTL) internationalization.
  - URL: https://ui.nuxt.com/raw/docs/getting-started/integrations/i18n/nuxt.md

- **Internationalization (i18n)**: Nuxt UI supports 50+ locales and multi-directional (LTR/RTL) internationalization.
  - URL: https://ui.nuxt.com/raw/docs/getting-started/integrations/i18n/vue.md

- **Content**: Nuxt UI integrates with Nuxt Content to deliver beautiful typography and consistent component styling.
  - URL: https://ui.nuxt.com/raw/docs/getting-started/integrations/content.md

- **SSR**: Nuxt UI has first-party support for Vue SSR. This guide will help you have it fully enabled.
  - URL: https://ui.nuxt.com/raw/docs/getting-started/integrations/ssr.md

- **MCP Server**: Use Nuxt UI components in your AI assistants with Model Context Protocol support.
  - URL: https://ui.nuxt.com/raw/docs/getting-started/ai/mcp.md

- **LLMs.txt**: How to get AI tools like Cursor, Windsurf, GitHub Copilot, ChatGPT, and Claude to understand Nuxt UI components, theming, and best practices.
  - URL: https://ui.nuxt.com/raw/docs/getting-started/ai/llms-txt.md

- **Skills**: Install Nuxt UI skills to give AI coding agents deep knowledge of components, theming, and best practices.
  - URL: https://ui.nuxt.com/raw/docs/getting-started/ai/skills.md

### Components

- **Accordion**: A stacked set of collapsible panels.
  - URL: https://ui.nuxt.com/raw/docs/components/accordion.md

- **Alert**: A callout to draw user's attention.
  - URL: https://ui.nuxt.com/raw/docs/components/alert.md

- **App**: Wraps your app to provide global configurations and more.
  - URL: https://ui.nuxt.com/raw/docs/components/app.md

- **AuthForm**: A customizable Form to create login, register or password reset forms.
  - URL: https://ui.nuxt.com/raw/docs/components/auth-form.md

- **Avatar**: An img element with fallback and Nuxt Image support.
  - URL: https://ui.nuxt.com/raw/docs/components/avatar.md

- **AvatarGroup**: Stack multiple avatars in a group.
  - URL: https://ui.nuxt.com/raw/docs/components/avatar-group.md

- **Badge**: A short text to represent a status or a category.
  - URL: https://ui.nuxt.com/raw/docs/components/badge.md

- **Banner**: Display a banner at the top of your website to inform users about important information.
  - URL: https://ui.nuxt.com/raw/docs/components/banner.md

- **BlogPost**: A customizable article to display in a blog page.
  - URL: https://ui.nuxt.com/raw/docs/components/blog-post.md

- **BlogPosts**: Display a list of blog posts in a responsive grid layout.
  - URL: https://ui.nuxt.com/raw/docs/components/blog-posts.md

- **Breadcrumb**: A hierarchy of links to navigate through a website.
  - URL: https://ui.nuxt.com/raw/docs/components/breadcrumb.md

- **Button**: A button element that can act as a link or trigger an action.
  - URL: https://ui.nuxt.com/raw/docs/components/button.md

- **Calendar**: A calendar component for selecting single dates, multiple dates or date ranges.
  - URL: https://ui.nuxt.com/raw/docs/components/calendar.md

- **Card**: Display content in a card with a header, body and footer.
  - URL: https://ui.nuxt.com/raw/docs/components/card.md

- **Carousel**: A carousel with motion and swipe built using Embla.
  - URL: https://ui.nuxt.com/raw/docs/components/carousel.md

- **ChangelogVersion**: A customizable article to display in a changelog.
  - URL: https://ui.nuxt.com/raw/docs/components/changelog-version.md

- **ChangelogVersions**: Display a list of changelog versions in a timeline.
  - URL: https://ui.nuxt.com/raw/docs/components/changelog-versions.md

- **ChatMessage**: Display a chat message with icon, avatar, and actions.
  - URL: https://ui.nuxt.com/raw/docs/components/chat-message.md

- **ChatMessages**: Display a list of chat messages, designed to work seamlessly with Vercel AI SDK.
  - URL: https://ui.nuxt.com/raw/docs/components/chat-messages.md

- **ChatPalette**: A chat palette to create a chatbot interface inside an overlay.
  - URL: https://ui.nuxt.com/raw/docs/components/chat-palette.md

- **ChatPrompt**: An enhanced Textarea for submitting prompts in AI chat interfaces.
  - URL: https://ui.nuxt.com/raw/docs/components/chat-prompt.md

- **ChatPromptSubmit**: A Button for submitting chat prompts with automatic status handling.
  - URL: https://ui.nuxt.com/raw/docs/components/chat-prompt-submit.md

- **Checkbox**: An input element to toggle between checked and unchecked states.
  - URL: https://ui.nuxt.com/raw/docs/components/checkbox.md

- **CheckboxGroup**: A set of checklist buttons to select multiple option from a list.
  - URL: https://ui.nuxt.com/raw/docs/components/checkbox-group.md

- **Chip**: An indicator of a numeric value or a state.
  - URL: https://ui.nuxt.com/raw/docs/components/chip.md

- **Collapsible**: A collapsible element to toggle visibility of its content.
  - URL: https://ui.nuxt.com/raw/docs/components/collapsible.md

- **ColorModeAvatar**: An Avatar with a different source for light and dark mode.
  - URL: https://ui.nuxt.com/raw/docs/components/color-mode-avatar.md

- **ColorModeButton**: A Button to switch between light and dark mode.
  - URL: https://ui.nuxt.com/raw/docs/components/color-mode-button.md

- **ColorModeImage**: An image element with a different source for light and dark mode.
  - URL: https://ui.nuxt.com/raw/docs/components/color-mode-image.md

- **ColorModeSelect**: A Select to switch between system, dark & light mode.
  - URL: https://ui.nuxt.com/raw/docs/components/color-mode-select.md

- **ColorModeSwitch**: A switch to toggle between light and dark mode.
  - URL: https://ui.nuxt.com/raw/docs/components/color-mode-switch.md

- **ColorPicker**: A component to select a color.
  - URL: https://ui.nuxt.com/raw/docs/components/color-picker.md

- **CommandPalette**: A command palette with full-text search powered by Fuse.js for efficient fuzzy matching.
  - URL: https://ui.nuxt.com/raw/docs/components/command-palette.md

- **Container**: A container lets you center and constrain the width of your content.
  - URL: https://ui.nuxt.com/raw/docs/components/container.md

- **ContentNavigation**: An accordion-style navigation component for organizing page links.
  - URL: https://ui.nuxt.com/raw/docs/components/content-navigation.md

- **ContentSearch**: A ready to use CommandPalette to add to your documentation.
  - URL: https://ui.nuxt.com/raw/docs/components/content-search.md

- **ContentSearchButton**: A pre-styled Button to open the ContentSearch modal.
  - URL: https://ui.nuxt.com/raw/docs/components/content-search-button.md

- **ContentSurround**: A pair of prev and next links to navigate between pages.
  - URL: https://ui.nuxt.com/raw/docs/components/content-surround.md

- **ContentToc**: A sticky Table of Contents with automatic active anchor link highlighting.
  - URL: https://ui.nuxt.com/raw/docs/components/content-toc.md

- **ContextMenu**: A menu to display actions when right-clicking on an element.
  - URL: https://ui.nuxt.com/raw/docs/components/context-menu.md

- **DashboardGroup**: A fixed layout component that provides context for dashboard components with sidebar state management and persistence.
  - URL: https://ui.nuxt.com/raw/docs/components/dashboard-group.md

- **DashboardNavbar**: A responsive navbar to display in a dashboard.
  - URL: https://ui.nuxt.com/raw/docs/components/dashboard-navbar.md

- **DashboardPanel**: A resizable panel to display in a dashboard.
  - URL: https://ui.nuxt.com/raw/docs/components/dashboard-panel.md

- **DashboardResizeHandle**: A handle to resize a sidebar or panel.
  - URL: https://ui.nuxt.com/raw/docs/components/dashboard-resize-handle.md

- **DashboardSearch**: A ready to use CommandPalette to add to your dashboard.
  - URL: https://ui.nuxt.com/raw/docs/components/dashboard-search.md

- **DashboardSearchButton**: A pre-styled Button to open the DashboardSearch modal.
  - URL: https://ui.nuxt.com/raw/docs/components/dashboard-search-button.md

- **DashboardSidebar**: A resizable and collapsible sidebar to display in a dashboard.
  - URL: https://ui.nuxt.com/raw/docs/components/dashboard-sidebar.md

- **DashboardSidebarCollapse**: A Button to collapse the sidebar on desktop.
  - URL: https://ui.nuxt.com/raw/docs/components/dashboard-sidebar-collapse.md

- **DashboardSidebarToggle**: A Button to toggle the sidebar on mobile.
  - URL: https://ui.nuxt.com/raw/docs/components/dashboard-sidebar-toggle.md

- **DashboardToolbar**: A toolbar to display under the navbar in a dashboard.
  - URL: https://ui.nuxt.com/raw/docs/components/dashboard-toolbar.md

- **Drawer**: A drawer that smoothly slides in & out of the screen.
  - URL: https://ui.nuxt.com/raw/docs/components/drawer.md

- **DropdownMenu**: A menu to display actions when clicking on an element.
  - URL: https://ui.nuxt.com/raw/docs/components/dropdown-menu.md

- **Editor**: A rich text editor component based on TipTap with support for markdown, HTML, and JSON content types.
  - URL: https://ui.nuxt.com/raw/docs/components/editor.md

- **EditorDragHandle**: A draggable handle for reordering and selecting blocks in the editor.
  - URL: https://ui.nuxt.com/raw/docs/components/editor-drag-handle.md

- **EditorEmojiMenu**: An emoji picker menu that displays emoji suggestions when typing the : character in the editor.
  - URL: https://ui.nuxt.com/raw/docs/components/editor-emoji-menu.md

- **EditorMentionMenu**: A mention menu that displays user suggestions when typing the @ character in the editor.
  - URL: https://ui.nuxt.com/raw/docs/components/editor-mention-menu.md

- **EditorSuggestionMenu**: A command menu that displays formatting and action suggestions when typing the / character in the editor.
  - URL: https://ui.nuxt.com/raw/docs/components/editor-suggestion-menu.md

- **EditorToolbar**: A customizable toolbar for editor actions that can be displayed as fixed, bubble, or floating menu.
  - URL: https://ui.nuxt.com/raw/docs/components/editor-toolbar.md

- **Empty**: A component to display an empty state.
  - URL: https://ui.nuxt.com/raw/docs/components/empty.md

- **Error**: A pre-built error component with NuxtError support.
  - URL: https://ui.nuxt.com/raw/docs/components/error.md

- **FieldGroup**: Group multiple button-like elements together.
  - URL: https://ui.nuxt.com/raw/docs/components/field-group.md

- **FileUpload**: An input element to upload files.
  - URL: https://ui.nuxt.com/raw/docs/components/file-upload.md

- **Footer**: A responsive footer component.
  - URL: https://ui.nuxt.com/raw/docs/components/footer.md

- **FooterColumns**: A list of links as columns to display in your Footer.
  - URL: https://ui.nuxt.com/raw/docs/components/footer-columns.md

- **Form**: A form component with built-in validation and submission handling.
  - URL: https://ui.nuxt.com/raw/docs/components/form.md

- **FormField**: A wrapper for form elements that provides validation and error handling.
  - URL: https://ui.nuxt.com/raw/docs/components/form-field.md

- **Header**: A responsive header component.
  - URL: https://ui.nuxt.com/raw/docs/components/header.md

- **Icon**: A component to display any icon from Iconify or another component.
  - URL: https://ui.nuxt.com/raw/docs/components/icon.md

- **Input**: An input element to enter text.
  - URL: https://ui.nuxt.com/raw/docs/components/input.md

- **InputDate**: An input component for date selection.
  - URL: https://ui.nuxt.com/raw/docs/components/input-date.md

- **InputMenu**: An autocomplete input with real-time suggestions.
  - URL: https://ui.nuxt.com/raw/docs/components/input-menu.md

- **InputNumber**: An input for numerical values with a customizable range.
  - URL: https://ui.nuxt.com/raw/docs/components/input-number.md

- **InputTags**: An input element that displays interactive tags.
  - URL: https://ui.nuxt.com/raw/docs/components/input-tags.md

- **InputTime**: An input for selecting a time.
  - URL: https://ui.nuxt.com/raw/docs/components/input-time.md

- **Kbd**: A kbd element to display a keyboard key.
  - URL: https://ui.nuxt.com/raw/docs/components/kbd.md

- **Link**: A wrapper around <NuxtLink> with extra props.
  - URL: https://ui.nuxt.com/raw/docs/components/link.md

- **LocaleSelect**: A Select to switch between locales.
  - URL: https://ui.nuxt.com/raw/docs/components/locale-select.md

- **Main**: A main element that fills the available viewport height.
  - URL: https://ui.nuxt.com/raw/docs/components/main.md

- **Marquee**: A component to create infinite scrolling content.
  - URL: https://ui.nuxt.com/raw/docs/components/marquee.md

- **Modal**: A dialog window that can be used to display a message or request user input.
  - URL: https://ui.nuxt.com/raw/docs/components/modal.md

- **NavigationMenu**: A list of links that can be displayed horizontally or vertically.
  - URL: https://ui.nuxt.com/raw/docs/components/navigation-menu.md

- **Page**: A grid layout for your pages with left and right columns.
  - URL: https://ui.nuxt.com/raw/docs/components/page.md

- **PageAnchors**: A list of anchors to be displayed in the page.
  - URL: https://ui.nuxt.com/raw/docs/components/page-anchors.md

- **PageAside**: A sticky aside to display your page navigation.
  - URL: https://ui.nuxt.com/raw/docs/components/page-aside.md

- **PageBody**: The main content of your page.
  - URL: https://ui.nuxt.com/raw/docs/components/page-body.md

- **PageCard**: A pre-styled card component that displays a title, description and optional link.
  - URL: https://ui.nuxt.com/raw/docs/components/page-card.md

- **PageColumns**: A responsive multi-column layout system for organizing content side-by-side.
  - URL: https://ui.nuxt.com/raw/docs/components/page-columns.md

- **PageCTA**: A call to action section to display in your pages.
  - URL: https://ui.nuxt.com/raw/docs/components/page-cta.md

- **PageFeature**: A component to showcase key features of your application.
  - URL: https://ui.nuxt.com/raw/docs/components/page-feature.md

- **PageGrid**: A responsive grid system for displaying content in a flexible layout.
  - URL: https://ui.nuxt.com/raw/docs/components/page-grid.md

- **PageHeader**: A responsive header for your pages.
  - URL: https://ui.nuxt.com/raw/docs/components/page-header.md

- **PageHero**: A responsive hero for your pages.
  - URL: https://ui.nuxt.com/raw/docs/components/page-hero.md

- **PageLinks**: A list of links to be displayed in the page.
  - URL: https://ui.nuxt.com/raw/docs/components/page-links.md

- **PageList**: A vertical list layout for displaying content in a stacked format.
  - URL: https://ui.nuxt.com/raw/docs/components/page-list.md

- **PageLogos**: A list of logos or images to display on your pages.
  - URL: https://ui.nuxt.com/raw/docs/components/page-logos.md

- **PageSection**: A responsive section for your pages.
  - URL: https://ui.nuxt.com/raw/docs/components/page-section.md

- **Pagination**: A list of buttons or links to navigate through pages.
  - URL: https://ui.nuxt.com/raw/docs/components/pagination.md

- **PinInput**: An input element to enter a pin.
  - URL: https://ui.nuxt.com/raw/docs/components/pin-input.md

- **Popover**: A non-modal dialog that floats around a trigger element.
  - URL: https://ui.nuxt.com/raw/docs/components/popover.md

- **PricingPlan**: A customizable pricing plan to display in a pricing page.
  - URL: https://ui.nuxt.com/raw/docs/components/pricing-plan.md

- **PricingPlans**: Display a list of pricing plans in a responsive grid layout.
  - URL: https://ui.nuxt.com/raw/docs/components/pricing-plans.md

- **PricingTable**: A responsive pricing table component that displays tiered pricing plans with feature comparisons.
  - URL: https://ui.nuxt.com/raw/docs/components/pricing-table.md

- **Progress**: An indicator showing the progress of a task.
  - URL: https://ui.nuxt.com/raw/docs/components/progress.md

- **RadioGroup**: A set of radio buttons to select a single option from a list.
  - URL: https://ui.nuxt.com/raw/docs/components/radio-group.md

- **ScrollArea**: A flexible scroll container with virtualization support.
  - URL: https://ui.nuxt.com/raw/docs/components/scroll-area.md

- **Select**: A select element to choose from a list of options.
  - URL: https://ui.nuxt.com/raw/docs/components/select.md

- **SelectMenu**: An advanced searchable select element.
  - URL: https://ui.nuxt.com/raw/docs/components/select-menu.md

- **Separator**: Separates content horizontally or vertically.
  - URL: https://ui.nuxt.com/raw/docs/components/separator.md

- **Skeleton**: A placeholder to show while content is loading.
  - URL: https://ui.nuxt.com/raw/docs/components/skeleton.md

- **Slideover**: A dialog that slides in from any side of the screen.
  - URL: https://ui.nuxt.com/raw/docs/components/slideover.md

- **Slider**: An input to select a numeric value within a range.
  - URL: https://ui.nuxt.com/raw/docs/components/slider.md

- **Stepper**: A set of steps that are used to indicate progress through a multi-step process.
  - URL: https://ui.nuxt.com/raw/docs/components/stepper.md

- **Switch**: A control that toggles between two states.
  - URL: https://ui.nuxt.com/raw/docs/components/switch.md

- **Table**: A responsive table element to display data in rows and columns.
  - URL: https://ui.nuxt.com/raw/docs/components/table.md

- **Tabs**: A set of tab panels that are displayed one at a time.
  - URL: https://ui.nuxt.com/raw/docs/components/tabs.md

- **Textarea**: A textarea element to input multi-line text.
  - URL: https://ui.nuxt.com/raw/docs/components/textarea.md

- **Timeline**: A component that displays a sequence of events with dates, titles, icons or avatars.
  - URL: https://ui.nuxt.com/raw/docs/components/timeline.md

- **Toast**: A succinct message to provide information or feedback to the user.
  - URL: https://ui.nuxt.com/raw/docs/components/toast.md

- **Tooltip**: A popup that reveals information when hovering over an element.
  - URL: https://ui.nuxt.com/raw/docs/components/tooltip.md

- **Tree**: A tree view component to display and interact with hierarchical data structures.
  - URL: https://ui.nuxt.com/raw/docs/components/tree.md

- **User**: Display user information with name, description and avatar.
  - URL: https://ui.nuxt.com/raw/docs/components/user.md

### Composables

- **defineLocale**: A utility to create a custom locale for your app.
  - URL: https://ui.nuxt.com/raw/docs/composables/define-locale.md

- **defineShortcuts**: A composable to define keyboard shortcuts in your app.
  - URL: https://ui.nuxt.com/raw/docs/composables/define-shortcuts.md

- **extendLocale**: A utility to extend an existing locale with custom translations.
  - URL: https://ui.nuxt.com/raw/docs/composables/extend-locale.md

- **extractShortcuts**: A utility to extract keyboard shortcuts from menu items.
  - URL: https://ui.nuxt.com/raw/docs/composables/extract-shortcuts.md

- **useFormField**: A composable to integrate custom inputs with the Form component
  - URL: https://ui.nuxt.com/raw/docs/composables/use-form-field.md

- **useOverlay**: A composable to programmatically control overlays.
  - URL: https://ui.nuxt.com/raw/docs/composables/use-overlay.md

- **useToast**: A composable to display toast notifications in your app.
  - URL: https://ui.nuxt.com/raw/docs/composables/use-toast.md

### Documentation Sets

- **Nuxt UI Full Documentation**: This is the full documentation for Nuxt UI. It includes all the Markdown files written with the MDC syntax.
  - URL: https://ui.nuxt.com/llms-full.txt

### Notes

## How to Use This Skill

Reference these resources when working with Nuxt UI.