Nuxt Ui
Published by nuxt-content in nuxt-studio
Review recommended54 installs
What this skill does
Use when building styled UI or working with @nuxt/ui v4 components (Button, Modal, Form, Table, etc.) - provides ready-to-use components with Tailwind Variants theming. Use vue skill for raw component patterns, reka-ui for headless primitives.
Add Nuxt Ui to your agent
Review the source and files first. When you are ready, copy the prompt instruction or use the CLI command supported by your environment.
Install with a prompt
Paste this into a compatible coding agent:
add this skill "nuxt-ui" from https://github.com/nuxt-content/nuxt-studioInstall with the CLI
Run this command in a controlled environment after reviewing the repository:
npx skills add https://github.com/nuxt-content/nuxt-studio --skill nuxt-uiSkill instructions
Nuxt UI v4
Component library for Vue 3 and Nuxt 4+ built on Reka UI (headless) + Tailwind CSS v4 + Tailwind Variants.
Current stable version: v4.3.0 (December 2025)
When to Use
- Installing/configuring @nuxt/ui
- Using UI components (Button, Card, Table, Form, etc.)
- Customizing theme (colors, variants, CSS variables)
- Building forms with validation
- Using overlays (Modal, Toast, CommandPalette)
- Working with composables (useToast, useOverlay)
For Vue component patterns: use vue skill
For Nuxt routing/server: use nuxt skill
Available Guidance
| 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 |
Usage Pattern
Load based on context:
- Installing Nuxt UI? → references/installation.md
- Customizing theme? → references/theming.md
- Component index → references/components.md
- Specific component → components/button.md, components/modal.md, etc.
- Building forms? → references/forms.md
- Using overlays? → references/overlays.md
- Using composables? → references/composables.md
DO NOT read all files at once. Load based on context.
Key Concepts
| 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
Quick Reference
// 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>
Resources
Token efficiency: Main skill ~300 tokens, each sub-file ~800-1200 tokens
Files included
- SKILL.md
- components/accordion.md
- components/alert.md
- components/app.md
- components/auth-form.md
- components/avatar-group.md
- components/avatar.md
- components/badge.md
- components/banner.md
- components/blog-post.md
- components/blog-posts.md
- components/breadcrumb.md
- components/button.md
- components/calendar.md
- components/card.md
- components/carousel.md
- components/changelog-version.md
- components/changelog-versions.md
- components/chat-message.md
- components/chat-messages.md
- components/chat-palette.md
- components/chat-prompt-submit.md
- components/chat-prompt.md
- components/checkbox-group.md
- components/checkbox.md
- components/chip.md
- components/collapsible.md
- components/color-mode-avatar.md
- components/color-mode-button.md
- components/color-mode-image.md
- components/color-mode-select.md
- components/color-mode-switch.md
- components/color-picker.md
- components/command-palette.md
- components/container.md
- components/content-navigation.md
- components/content-search-button.md
- components/content-search.md
- components/content-surround.md
- components/content-toc.md
- components/context-menu.md
- components/dashboard-group.md
- components/dashboard-navbar.md
- components/dashboard-panel.md
- components/dashboard-resize-handle.md
- components/dashboard-search-button.md
- components/dashboard-search.md
- components/dashboard-sidebar-collapse.md
- components/dashboard-sidebar-toggle.md
- components/dashboard-sidebar.md
- components/dashboard-toolbar.md
- components/drawer.md
- components/dropdown-menu.md
- components/editor-drag-handle.md
- components/editor-emoji-menu.md
- components/editor-mention-menu.md
- components/editor-suggestion-menu.md
- components/editor-toolbar.md
- components/editor.md
- components/empty.md
- components/error.md
- components/field-group.md
- components/file-upload.md
- components/footer-columns.md
- components/footer.md
- components/form-field.md
- components/form.md
- components/header.md
- components/icon.md
- components/input-date.md
- components/input-menu.md
- components/input-number.md
- components/input-tags.md
- components/input-time.md
- components/input.md
- components/kbd.md
- components/link.md
- components/locale-select.md
- components/main.md
- components/marquee.md
- components/modal.md
- components/navigation-menu.md
- components/page-anchors.md
- components/page-aside.md
- components/page-body.md
- components/page-card.md
- components/page-columns.md
- components/page-cta.md
- components/page-feature.md
- components/page-grid.md
- components/page-header.md
- components/page-hero.md
- components/page-links.md
- components/page-list.md
- components/page-logos.md
- components/page-section.md
- components/page.md
- components/pagination.md
- components/pin-input.md
- components/popover.md