# Nuxt UI > A comprehensive Vue UI component library (Nuxt optional) with 125+ accessible, production-ready, Tailwind CSS components for building modern web applications. - Skill: `diegosouzapw/nuxt-ui-2` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add diegosouzapw/nuxt-ui-2` - Raw SKILL.md: https://api.skillmd.com/api/skills/diegosouzapw/nuxt-ui-2/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: diegosouzapw (https://skillmd.com/u/diegosouzapw) - Updated: 2026-09-09 - Page: https://skillmd.com/skills/diegosouzapw/nuxt-ui-2 --- # 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 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.