Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
From nuxt-skills
Build styled UIs with @nuxt/ui v4 components including forms with Zod/Valibot validation, data tables with sorting, and modals/overlays. Also covers Tailwind Variants theming.
npx claudepluginhub onmax/nuxt-skills --plugin nuxt-skillsHow this skill is triggered — by the user, by Claude, or both
Slash command
/nuxt-skills:nuxt-uiThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Component library for Vue 3 and Nuxt 4+ built on Reka UI (headless) + Tailwind CSS v4 + Tailwind Variants.
components/accordion.mdcomponents/alert.mdcomponents/app.mdcomponents/auth-form.mdcomponents/avatar-group.mdcomponents/avatar.mdcomponents/badge.mdcomponents/banner.mdcomponents/blog-post.mdcomponents/blog-posts.mdcomponents/breadcrumb.mdcomponents/button.mdcomponents/calendar.mdcomponents/card.mdcomponents/carousel.mdcomponents/changelog-version.mdcomponents/changelog-versions.mdcomponents/chat-message.mdcomponents/chat-messages.mdcomponents/chat-palette.mdProvides 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.
Sets up production-ready shadcn-vue UI components in Vue/Nuxt apps with Tailwind CSS and Reka UI. Use for accessible forms, data tables, charts, dark mode, and component imports.
Guides building accessible, unstyled Vue 3 component primitives with Reka UI (formerly Radix Vue). Covers component API, asChild composition, controlled/uncontrolled state, virtualization, and WAI-ARIA patterns.
Share bugs, ideas, or general feedback.
Component library for Vue 3 and Nuxt 4+ built on Reka UI (headless) + Tailwind CSS v4 + Tailwind Variants.
Current stable version: v4.4.0 (January 2026)
For Vue component patterns: use vue skill
For Nuxt routing/server: use nuxt skill
| File | Topics |
|---|---|
| references/installation.md | Nuxt/Vue setup, pnpm gotchas, UApp wrapper, module options, prefix, tree-shaking |
| references/theming.md | Semantic colors, CSS variables, app.config.ts, Tailwind Variants |
| references/components.md | Component index by category (125+ components) |
| components/*.md | Per-component details (button.md, modal.md, etc.) |
| references/forms.md | Form components, validation (Zod/Valibot), useFormField |
| references/overlays.md | Toast, Modal, Slideover, Drawer, CommandPalette |
| references/composables.md | useToast, useOverlay, defineShortcuts, useScrollspy |
Consider loading these reference files based on your task:
DO NOT load all files at once. Load only what's relevant to your current task.
| Concept | Description |
|---|---|
| UApp | Required wrapper component for Toast, Tooltip, overlays |
| Tailwind Variants | Type-safe styling with slots, variants, compoundVariants |
| Semantic Colors | primary, secondary, success, error, warning, info, neutral |
| Reka UI | Headless component primitives (accessibility built-in) |
For headless component primitives (API details, accessibility patterns, asChild): read the reka-ui skill
// 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 - UApp wrapper required -->
<template>
<UApp>
<NuxtPage />
</UApp>
</template>
Token efficiency: Main skill ~300 tokens, each sub-file ~800-1200 tokens