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.
Generates Nuxt UI v4 components for building accessible dashboards, forms, and AI chat interfaces.
npx claudepluginhub secondsky/claude-skillsThis skill is limited to using the following tools:
references/COMMON_ERRORS_DETAILED.mdreferences/accessibility-patterns.mdreferences/ai-sdk-v5-integration.mdreferences/chat-components.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.mdreferences/form-advanced-patterns.mdreferences/form-components-reference.mdreferences/form-validation-patterns.mdreferences/i18n-integration.mdVersion: 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.
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
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
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>
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
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, 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, 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
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
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
/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:
Expert guidance for Next.js Cache Components and Partial Prerendering (PPR). **PROACTIVE ACTIVATION**: Use this skill automatically when working in Next.js projects that have `cacheComponents: true` in their next.config.ts/next.config.js. When this config is detected, proactively apply Cache Components patterns and best practices to all React Server Component implementations. **DETECTION**: At the start of a session in a Next.js project, check for `cacheComponents: true` in next.config. If enabled, this skill's patterns should guide all component authoring, data fetching, and caching decisions. **USE CASES**: Implementing 'use cache' directive, configuring cache lifetimes with cacheLife(), tagging cached data with cacheTag(), invalidating caches with updateTag()/revalidateTag(), optimizing static vs dynamic content boundaries, debugging cache issues, and reviewing Cache Component implementations.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.