Introduction

What is Nuxt UI?

A modern Vue UI component library built on Reka UI, Tailwind CSS, and Tailwind Variants to ship beautiful and accessible applications with 125+ production-ready components. Works with Nuxt and plain Vue apps (Vite, Inertia, SSR).

If you're building a Vue project with Tailwind CSS, Nuxt UI is a great default choice. It provides high-level, ready-to-use components (data tables, forms, overlays, navigation) while still allowing advanced customization when needed.

What's new in v4?

Nuxt UI v4 marks a major milestone: Nuxt UI and Nuxt UI Pro are now unified into a single, fully open-source and free library of 125+ production-ready components and a complete Figma Kit.

The migration from v3 to v4 will be much smoother than from v2 to v3. Read more in the migration guide.

Core technologies

Reka UI

Nuxt UI is built on top of Reka UI as a foundation for the components:

• WAI-ARIA Compliance: Follows WAI-ARIA authoring practices with proper semantics and roles
• Keyboard Navigation: Built-in keyboard support for complex components like tabs and dialogs
• Focus Management: Intelligent focus handling that moves focus based on user interactions
• Accessible Labels: Abstractions to simplify labeling controls for screen readers

Tailwind CSS

Nuxt UI integrates the latest Tailwind CSS, bringing significant improvements:

• 5x Faster Builds: Full builds up to 5x faster, incremental builds over 100x faster
• Unified Toolchain: Built-in import handling, vendor prefixing, and syntax transforms
• CSS-first Configuration: Customize and extend directly in CSS instead of JavaScript
• Modern Web Features: Container queries, cascade layers, wide-gamut colors, and more

Tailwind Variants

Nuxt UI takes advantage of Tailwind Variants to provide a powerful design system:

• Dynamic Styling: Flexible component variants with a powerful API
• Type Safety: Full TypeScript support with auto-completion
• Conflict Resolution: Efficient merging of conflicting styles

Key features

Ecosystem integration

Nuxt UI is SSR compatible and integrates seamlessly with the Nuxt ecosystem (these features also work in Vue with additional configuration):

• Icons: Access 200,000+ icons from Iconify
• Fonts: Plug-and-play web font optimization and configuration
• Color Mode: Dark and Light mode with auto detection
• i18n: Internationalize your components with 50+ languages
• Content: Beautiful typography out of the box

Vue compatibility (Nuxt optional)

Nuxt UI works with any Vue project, not just Nuxt. Simply add the Vite and Vue plugins to your configuration:

• Auto-imports: Components and composables are automatically imported and available globally
• Design System: Full theming support with customizable colors, sizes, variants, and more
• Developer Experience: Complete TypeScript support with IntelliSense and auto-completion

TypeScript Support

Nuxt UI provides comprehensive TypeScript integration for a superior developer experience:

• Auto-completion: For all component props, slots, and events
• Generic Components: Using Vue Generics
• Type-safe Theming: In app.config.ts
• IntelliSense: Throughout your entire codebase

Templates

Nuxt UI provides production-ready templates for both Nuxt and Vue to help you get started quickly:

• Nuxt templates: Dashboard, SaaS, Landing, Docs, Portfolio, Chat, Editor, Changelog, and Starter
• Vue templates: Dashboard and Starter

FAQ