secondsky/nuxt-ui-v4
Nuxt UI v4 component library for building Nuxt v4 applications. 125+ accessible components with Tailwind v4, Reka UI, dark mode, theming. Use for dashboards, forms, overlays, editors, page layouts, pricing pages, or encountering component, theming, or TypeScript errors.
npx skills add https://github.com/secondsky/claude-skills --skill nuxt-ui-v4Version: 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
UI packages modify CSS and component trees — verify before allowing into your project. Follow supply chain security best practices:
npm config set ignore-scripts true (or Bun: disabled by default)socket package score npm <pkg> or use socket npm install <pkg> to check packagesLoad the dependency-upgrade skill for full security configuration including Socket CLI integration, cooldown setup, lockfile validation, and CI enforcement.
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:
Take secondsky/nuxt-ui-v4 from the repository into ~/.claude/skills for personal
use, or into .claude/skills inside a project.
The agent identifies a skill by the name field in its header. Two skills with the
same name cannot sit side by side — one of them will be ignored.
The instructions reference npm.
Without those the skill loads but fails at the first command.