nuxt-ui-v4

What this skill does

# Nuxt UI v4 - Production Component Library

**Version**: Nuxt UI v4.6+ | Nuxt v4.0.0 | **125+ Components**
**Last Verified**: 2026-03-30

A comprehensive production-ready component library with 125+ accessible components, Tailwind CSS v4, Reka UI accessibility, and first-class AI integration. Works with Nuxt and plain Vue apps (Vite, Inertia, SSR).

**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**: React projects, Nuxt 3 or earlier, Tailwind CSS v3. Vue-only projects ARE supported via Vite plugin.

---

## Quick Start

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

```typescript
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css']
})
```

```css
/* assets/css/main.css */
@import "tailwindcss";
@import "@nuxt/ui";
```

```vue
<!-- app.vue -->
<template><UApp><NuxtPage /></UApp></template>
```

**Or use a template**:
```bash
npm create nuxt@latest -- -t ui             # Starter
npm create nuxt@latest -- -t ui/dashboard    # Dashboard
npm create nuxt@latest -- -t ui/chat         # AI Chat
npm create nuxt@latest -- -t ui/landing      # Landing page
npm create nuxt@latest -- -t ui/saas         # SaaS
npm create nuxt@latest -- -t ui/docs         # Documentation
npm create nuxt@latest -- -t ui/portfolio    # Portfolio
npm create nuxt@latest -- -t ui/changelog    # Changelog
npm create nuxt@latest -- -t ui/editor       # Rich text editor
```

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

## Secure Installation

UI packages modify CSS and component trees — verify before allowing into your project. Follow supply chain security best practices:

- **Block post-install scripts** — `npm config set ignore-scripts true` (or Bun: disabled by default)
- **Cooldown period** — Wait 7 days for new package versions to be vetted by the community
- **Audit before installing** — Run `socket package score npm <pkg>` or use `socket npm install <pkg>` to check packages

Load the `dependency-upgrade` skill for full security configuration including Socket CLI integration, cooldown setup, lockfile validation, and CI enforcement.

---

## Component Categories (125+ Total)

### Dashboard (10 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

```vue
<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 (8 components)
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
- **ChatReasoning** - Collapsible AI reasoning/thinking process (NEW v4.6)
- **ChatTool** - Collapsible AI tool invocation status (NEW v4.6)
- **ChatShimmer** - Text shimmer animation for streaming states (NEW v4.6)

```vue
<script setup lang="ts">
import { isReasoningUIPart, isTextUIPart, isToolUIPart, getToolName } from 'ai'
import { Chat } from '@ai-sdk/vue'
import { isReasoningStreaming, isToolStreaming } from '@nuxt/ui/utils/ai'

const input = ref('')
const chat = new Chat({
  onError(error) { console.error(error) }
})

function onSubmit() {
  chat.sendMessage({ text: input.value })
  input.value = ''
}
</script>

<template>
  <UChatMessages :messages="chat.messages" :status="chat.status">
    <template #content="{ message }">
      <template v-for="(part, index) in message.parts" :key="`${message.id}-${part.type}-${index}`">
        <UChatReasoning v-if="isReasoningUIPart(part)" :text="part.text" :streaming="isReasoningStreaming(message, index, chat)" />
        <UChatTool v-else-if="isToolUIPart(part)" :text="getToolName(part)" :streaming="isToolStreaming(part)" />
        <template v-else-if="isTextUIPart(part)">
          <MDC v-if="message.role === 'assistant'" :value="part.text" :cache-key="`${message.id}-${index}`" />
          <p v-else-if="message.role === 'user'" class="whitespace-pre-wrap">{{ part.text }}</p>
        </template>
      </template>
    </template>
  </UChatMessages>
  <UChatPrompt v-model="input" @submit="onSubmit">
    <UChatPromptSubmit :status="chat.status" @stop="chat.stop()" @reload="chat.regenerate()" />
  </UChatPrompt>
</template>
```

**Details**: Load `references/chat-components.md` for full AI SDK integration, streaming, reasoning, tool calling

---

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

```vue
<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

```vue
<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

```vue
<template>
  <UBlogPosts>
    <UBlogPost v-for="post in posts" v-