Introduction

Nuxt UI is a comprehensive UI library for Vue and Nuxt applications, offering a collection of fully styled and accessible components.

What is Nuxt UI?

A modern UI library built on Reka UI, Tailwind CSS, and Tailwind Variants to ship beautiful and accessible applications with 100+ production-ready components.

Developer Experience First

Intuitive APIs, excellent TypeScript support, auto-completion, and comprehensive docs.

Beautiful by Default

A modern, clean design out of the box with a theme you can adapt in minutes.

Accessible by Default

WAI-ARIA compliant with keyboard navigation, focus management, and screen reader support.

Production Ready

100+ battle-tested components used by thousands of applications in production.

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 100+ 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.

If you are migrating from v2, you can read more in this 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 v4, 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 theming 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 integrates with the Nuxt ecosystem to provide a seamless development experience:

  • 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 UI works with any Vue 3 project. Simply add the Vite and Vue plugins to your configuration:

  • Auto-imports: Components and composables are automatically imported and available globally
  • Theming System: Full theming support with customizable colors, sizes, variants, and more
  • Developer Experience: Complete TypeScript support with IntelliSense and auto-completion
Learn how to install and configure Nuxt UI in a Vue project in the Vue installation guide.

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 3 Generics
  • Type-safe Theming: In app.config.ts
  • IntelliSense: Throughout your entire codebase

Nuxt DevTools Integration

Play with Nuxt UI components directly from Nuxt DevTools with the compodium module:

  • Component Inspector: Inspect and analyze Nuxt UI components in real-time
  • Live Preview: Modify component props and see changes instantly
  • Code Generation: Get the corresponding code for your component configurations
Install the module to your Nuxt application with one command:
Terminal
npx nuxt module add compodium

FAQ

Installation

Learn how to install and configure Nuxt UI in your Nuxt application.