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

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

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

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

```vue
<template>
  <UDashboardGroup>
    <UDashboardSidebar>
      <UNavigationMenu :items="menuItems" />
    </UDashboardSidebar>
    <UDashboardPanel>
      <templa