Nuxt UI V4

Nuxt UI v4 - Production Component Library

Version: Nuxt UI v4.2.1 | Nuxt v4.0.0 | 125+ Components Last Verified: 2025-12-28

A comprehensive production-ready component library with 125+ accessible components, Tailwind CSS v4, Reka UI accessibility, and first-class AI integration.

MCP Integration: This plugin includes the official Nuxt UI MCP server for live component data.

When to Use / NOT Use

Use when: Building Nuxt v4 dashboards, AI chat interfaces, landing pages, forms, admin panels, pricing pages, blogs, documentation sites, or any UI with Nuxt UI components

DON'T use: Vue-only projects (no Nuxt), React projects, Nuxt 3 or earlier, Tailwind CSS v3

Quick Start

bunx nuxi init my-app && cd my-app
bun add @nuxt/ui

// nuxt.config.ts
export default defineNuxtConfig({ modules: ['@nuxt/ui'] })

<!-- app.vue -->
<template><UApp><NuxtPage /></UApp></template>
<style>
@import "tailwindcss";
@import "@nuxt/ui";
</style>

Commands available: /nuxt-ui-v4:setup, /nuxt-ui:migrate, /nuxt-ui:theme, /nuxt-ui:component

Component Categories (125+ Total)

Dashboard (11 components) - NEW

Complete admin interface system:

• DashboardGroup - Fixed layout wrapper with sidebar state management
• DashboardSidebar - Resizable, collapsible sidebar
• DashboardPanel - Main content panel with header/body/footer slots
• DashboardNavbar - Top navigation bar
• DashboardToolbar - Secondary toolbar under navbar
• DashboardSearch - CommandPalette for dashboard search
• DashboardSearchButton - Button to trigger search
• DashboardSidebarCollapse - Collapse button for desktop
• DashboardSidebarToggle - Toggle button for mobile
• DashboardResizeHandle - Resize handle for sidebar/panels

<template>
  <UDashboardGroup>
    <UDashboardSidebar>
      <UNavigationMenu :items="menuItems" />
    </UDashboardSidebar>
    <UDashboardPanel>
      <template #header><UDashboardNavbar /></template>
      <template #body><NuxtPage /></template>
    </UDashboardPanel>
  </UDashboardGroup>
</template>

Details: Load references/dashboard-components.md for complete dashboard patterns

Chat / AI (5 components) - NEW

Purpose-built for AI chatbots with AI SDK v5:

• ChatMessage - Single message with icon, avatar, actions
• ChatMessages - Message list with auto-scroll, status indicator
• ChatPalette - Chat interface inside an overlay
• ChatPrompt - Enhanced Textarea for AI prompts
• ChatPromptSubmit - Submit button with status handling

<script setup>
import { Chat } from '@ai-sdk/vue'
const chat = new Chat({ api: '/api/chat' })
</script>

<template>
  <UChatMessages :messages="chat.messages" :status="chat.status">
    <template #content="{ message }">{{ message.content }}</template>
  </UChatMessages>
  <UChatPrompt v-model="input" @submit="chat.sendMessage({ text: input })">
    <UChatPromptSubmit :status="chat.status" />
  </UChatPrompt>
</template>

Details: Load references/chat-components.md for AI SDK integration, streaming, error handling

Editor (6 components) - NEW

Rich text editing with TipTap:

• Editor - TipTap-based editor with markdown/HTML/JSON support
• EditorToolbar - Fixed, bubble, or floating toolbar
• EditorDragHandle - Drag handle for reordering blocks
• EditorMentionMenu - @ mention suggestions
• EditorEmojiMenu - : emoji picker
• EditorSuggestionMenu - / command menu

<template>
  <UEditor v-model="content" :extensions="extensions">
    <template #toolbar>
      <UEditorToolbar />
    </template>
  </UEditor>
</template>

Details: Load references/editor-components.md for TipTap setup, extensions, toolbar customization

Page Layout (16 components) - NEW

Landing pages and content layouts:

• Page - Grid layout with left/right columns
• PageHeader - Responsive page header
• PageHero - Hero section with title, description, CTAs
• PageSection - Content section container
• PageGrid - Responsive grid system
• PageColumns - Multi-column layout
• PageFeature - Feature showcase component
• PageCTA - Call-to-action section
• PageCard - Pre-styled card with title, description, link
• PageList - Vertical list layout
• PageLogos - Logo showcase
• PageAnchors - Anchor link list
• PageAside - Sticky sidebar
• PageBody - Main content area
• PageLinks - Link list

<template>
  <UPage>
    <UPageHero title="Welcome" description="Get started today" :links="heroLinks" />
    <UPageSection>
      <UPageGrid>
        <UPageFeature v-for="f in features" v-bind="f" />
      </UPageGrid>
    </UPageSection>
    <UPageCTA title="Ready?" :links="ctaLinks" />
  </UPage>
</template>

Details: Load references/page-layout-components.md for landing page patterns

Content (7 components) - NEW

Documentation and blog content:

• BlogPost - Article display component
• BlogPosts - Blog grid layout
• ChangelogVersion - Version entry display
• ChangelogVersions - Changelog timeline
• ContentNavigation - Accordion-style nav for docs
• ContentSearch - Documentation search CommandPalette
• ContentSearchButton - Button to open search
• ContentSurround - Prev/next navigation
• ContentToc - Sticky table of contents

<template>
  <UBlogPosts>
    <UBlogPost v-for="post in posts" v-bind="post" />
  </UBlogPosts>
</template>

Details: Load references/content-components.md for blog and documentation patterns

Pricing (3 components) - NEW

SaaS pricing pages:

• PricingPlan - Individual plan card
• PricingPlans - Responsive plan grid
• PricingTable - Feature comparison table

<template>
  <UPricingPlans>
    <UPricingPlan
      v-for="plan in plans"
      :title="plan.title"
      :price="plan.price"
      :features="plan.features"
    />
  </UPricingPlans>
</template>

Details: Load references/pricing-components.md for pricing page patterns

Forms (20 components)

Input, InputDate, InputTime, InputNumber, InputTags, InputMenu, Select, SelectMenu, Textarea, Checkbox, CheckboxGroup, RadioGroup, Switch, Slider, Calendar, ColorPicker, PinInput, Form, FormField, FileUpload, AuthForm

<UForm :state="state" :schema="schema" @submit="onSubmit">
  <UFormField name="email" label="Email">
    <UInput v-model="state.email" type="email" />
  </UFormField>
  <UButton type="submit">Submit</UButton>
</UForm>

Details: Load references/form-components-reference.md for validation, nested forms, file uploads

Navigation (8 components)

Tabs, Breadcrumb, Link, Pagination, CommandPalette, NavigationMenu, Stepper, Tree

<UTabs v-model="tab" :items="items" />
<UCommandPalette :groups="groups" placeholder="Search..." />
<UStepper v-model="step" :items="steps" />

Details: Load references/navigation-components-reference.md for patterns

Overlays (8 components)

Modal, Drawer, Slideover, Dialog, Popover, DropdownMenu, ContextMenu, Tooltip

<UModal v-model="isOpen"><UCard>Content</UCard></UModal>
<UDrawer v-model="isOpen" side="right">...</UDrawer>

Details: Load references/overlay-decision-guide.md for when to use each

Feedback (7 components)

Alert, Toast, Progress, Skeleton, Empty, Error, Banner

<UAlert color="warning" title="Warning message" />
<UEmpty icon="i-heroicons-inbox" title="No items" />
<UBanner title="Important announcement" />

Details: Load references/feedback-components-reference.md

Layout (6 components)

Card, Container, Main, Header, Footer, FooterColumns, Separator

Data (2 components)

Table (with virtualization), ScrollArea

General (15 components)

Button, FieldGroup, Avatar, AvatarGroup, Badge, Accordion, Carousel, Chip, Collapsible, Icon, Kbd, Marquee, Timeline, User, App

Color Mode (6 components)

ColorModeAvatar, ColorModeButton, ColorModeImage, ColorModeSelect, ColorModeSwitch, LocaleSelect

Composables

Core: useToast, useOverlay, useColorMode, useFormField Utilities: defineShortcuts, defineLocale, extendLocale, extractShortcuts

const { add } = useToast()
add({ title: 'Success', color: 'success' })

defineShortcuts({ 'meta_k': () => openSearch() })

Details: Load references/composables-guide.md

Common Errors (Top 5)

1. Missing UApp Wrapper → Wrap app with <UApp> 2. CSS Import Order → @import "tailwindcss" FIRST, then @import "@nuxt/ui" 3. Template Refs (v4.2+) → Use ref.value?.focus() not ref.value.$el.focus() 4. Module Not Found → Add '@nuxt/ui' to modules in nuxt.config.ts 5. Dark Mode Not Working → Set ui: { colorMode: true } in nuxt.config.ts

Full list: Load references/COMMON_ERRORS_DETAILED.md for 25+ error solutions

When to Load References

Dashboard/Admin: dashboard-components.md AI Chat: chat-components.md, ai-sdk-v5-integration.md Rich Text: editor-components.md Landing Pages: page-layout-components.md Pricing/SaaS: pricing-components.md Blog/Docs: content-components.md Forms: form-components-reference.md, form-validation-patterns.md Theming: semantic-color-system.md, component-theming-guide.md Troubleshooting: COMMON_ERRORS_DETAILED.md

Available Commands

• /nuxt-ui-v4:setup - Initialize Nuxt UI in project
• /nuxt-ui:migrate - Migrate from v2/v3 to v4
• /nuxt-ui:theme - Generate theme configuration
• /nuxt-ui:component - Scaffold component with Nuxt UI patterns

Available Agents

• nuxt-ui-component-selector - Recommends best components for use cases
• nuxt-ui-migration-assistant - Guides v2/v3 → v4 migration
• nuxt-ui-troubleshooter - Diagnoses and fixes common issues

MCP Integration

This plugin includes the official Nuxt UI MCP server (https://ui.nuxt.com/mcp) providing:

• Component listing and metadata
• Documentation access
• Migration guides
• Template discovery