From nuxt-ui-v4
Provides Nuxt UI v4 components for Nuxt 4 apps: 125+ accessible Tailwind v4 elements with Reka UI, dark mode, theming. Use for dashboards, forms, overlays, layouts, or component/theming/TS errors.
npx claudepluginhub secondsky/claude-skills --plugin nuxt-ui-v4This skill is limited to using the following tools:
**Version**: Nuxt UI v4.6+ | Nuxt v4.0.0 | **125+ Components**
references/COMMON_ERRORS_DETAILED.mdreferences/accessibility-patterns.mdreferences/ai-sdk-v5-integration.mdreferences/auth-form.mdreferences/chat-components.mdreferences/chat-reasoning.mdreferences/chat-shimmer.mdreferences/chat-tool.mdreferences/command-palette-setup.mdreferences/common-components.mdreferences/component-theming-guide.mdreferences/composables-guide.mdreferences/content-components.mdreferences/css-variables-reference.mdreferences/dark-mode-guide.mdreferences/dashboard-components.mdreferences/data-display-components.mdreferences/design-system-guide.mdreferences/editor-components.mdreferences/feedback-components-reference.mdGuides Next.js Cache Components and Partial Prerendering (PPR) with cacheComponents enabled. Implements 'use cache', cacheLife(), cacheTag(), revalidateTag(), static/dynamic optimization, and cache debugging.
Guides building MCP servers enabling LLMs to interact with external services via tools. Covers best practices, TypeScript/Node (MCP SDK), Python (FastMCP).
Generates original PNG/PDF visual art via design philosophy manifestos for posters, graphics, and static designs on user request.
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.
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.
bunx nuxi init my-app && cd my-app
bun add @nuxt/ui tailwindcss
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/ui'],
css: ['~/assets/css/main.css']
})
/* assets/css/main.css */
@import "tailwindcss";
@import "@nuxt/ui";
<!-- app.vue -->
<template><UApp><NuxtPage /></UApp></template>
Or use a template:
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
Complete admin interface system:
<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
Purpose-built for AI chatbots with AI SDK v5:
<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
Rich text editing with TipTap:
<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
Landing pages and content layouts:
<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
Documentation and blog content:
<template>
<UBlogPosts>
<UBlogPost v-for="post in posts" v-bind="post" />
</UBlogPosts>
</template>
Details: Load references/content-components.md for blog and documentation patterns
SaaS pricing pages:
<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
Input, InputDate, InputTime, InputNumber, InputTags, InputMenu, Select, SelectMenu, Textarea, Checkbox, CheckboxGroup, RadioGroup, Switch, Slider, Calendar, ColorPicker, PinInput, Form, FormField, FileUpload, FieldGroup, 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
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
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
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
Card, Container, Main, Header, Footer, FooterColumns, Separator
Table (with virtualization), ScrollArea
Button, FieldGroup, Avatar, AvatarGroup, Badge, Accordion, Carousel, Chip, Collapsible, Icon, Kbd, Marquee, Timeline, User, App
ColorModeAvatar, ColorModeButton, ColorModeImage, ColorModeSelect, ColorModeSwitch, LocaleSelect
Core: useToast, useOverlay, useFormField, useScrollShadow
Utilities: defineShortcuts, defineLocale, extendLocale, extractShortcuts
const { add } = useToast()
add({ title: 'Success', color: 'success' })
defineShortcuts({ 'meta_k': () => openSearch() })
AI Utilities: isReasoningStreaming, isToolStreaming, getTextFromMessage (from @nuxt/ui/utils/ai)
1. Missing UApp Wrapper → Wrap app with <UApp>
2. CSS Import Order → @import "tailwindcss" FIRST, then @import "@nuxt/ui"
3. Missing tailwindcss package → bun add @nuxt/ui tailwindcss (both required)
4. Module Not Found → Add '@nuxt/ui' to modules in nuxt.config.ts
5. useChat not found → AI SDK v5 uses new Chat() class, not useChat() composable
Full list: Load references/COMMON_ERRORS_DETAILED.md for 25+ error solutions
Dashboard/Admin: dashboard-components.md
AI Chat: chat-components.md, ai-sdk-v5-integration.md
Chat Sub-components: chat-reasoning.md, chat-tool.md, chat-shimmer.md
Rich Text: editor-components.md
Landing Pages: page-layout-components.md
Pricing/SaaS: pricing-components.md
Blog/Docs: content-components.md
Auth/Login: auth-form.md
Forms: form-components-reference.md, form-validation-patterns.md
Theming: semantic-color-system.md, component-theming-guide.md
Troubleshooting: COMMON_ERRORS_DETAILED.md
/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 patternsThis plugin includes the official Nuxt UI MCP server (https://ui.nuxt.com/mcp) providing: