nuxt/ui
Overview
This skill lets you build accessible, themeable UIs with @nuxt/ui v4 — a 125+ component Vue library powered by Reka UI and Tailwind CSS. It provides ready-made components, layout patterns, icons, and composables to speed up dashboards, docs sites, chat interfaces, and forms. Use it with Nuxt, Vite-based Vue, or Inertia-driven Laravel/Adonis apps.
How this skill works
Install the @nuxt/ui package and import its CSS alongside Tailwind. Wrap your app in the required UApp root to enable global behavior (toasts, overlays, tooltips) and register the plugin for Vue or the module for Nuxt. Components are themeable via runtime config, ui props, and semantic utilities; icons use Iconify conventions and composables expose toasts, overlays, and keyboard shortcuts.
When to use it
- Building admin dashboards, documentation sites, or marketing pages quickly
- Creating consistent, accessible forms with built-in validation support
- Composing complex layouts (chat, editor, dashboard) from reusable primitives
- Applying brand theming across components without hand-crafting styles
- Integrating with Nuxt, Vite/Vue, or Inertia backends for full-stack apps
Best practices
- Always wrap your app with UApp to enable global features
- Use semantic utilities (e.g., text-default, bg-elevated) instead of raw Tailwind color names
- Prefer the ui prop for per-component overrides; it has highest priority for slots and classes
- Configure the seven semantic colors at runtime to keep designs consistent across environments
- Read generated theme files for slot names and variant details when customizing components
Example use cases
- Spin up a SaaS dashboard using the Dashboard layout and resizable sidebars
- Build an authenticated admin panel with forms, validation, and programmatic modals
- Create a docs site with sidebar navigation and automatic table-of-contents layout
- Implement an AI chat UI using the Chat layout and overlay composables for modals and toasts
- Prototype a branded landing page by changing runtime color tokens and component slots
FAQ
Yes. @nuxt/ui builds on Tailwind CSS and expects Tailwind to be available in your project.
Is UApp required?
Yes. UApp provides global config and services (toasts, overlays, tooltips) and must wrap your application root.
How do I customize colors to match my brand?
Set the seven semantic colors (primary, secondary, success, info, warning, error, neutral) in Nuxt app.config or the Vite plugin runtime config; use semantic utilities in components.
Can I use custom icons?
Yes. Iconify collections are supported. In Nuxt add customCollections via the icon config; in Vue use the Vite plugin or install icon packs locally.
2 skills
This skill helps you build polished Nuxt and Vue interfaces with 125+ accessible components and Tailwind theming for brand-specific UIs.
This skill guides you through Nuxt UI component contribution, including structure, theming, testing, and documentation to streamline development.
