Introduction

Nuxt UI harnesses the combined strengths of Reka UI, Tailwind CSS, and Tailwind Variants to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.

Reka UI

We've transitioned from Headless UI to Reka UI as our core component foundation. This shift brings several key advantages:

  • : With 55+ primitives, Reka UI significantly expands our component offerings.
  • : Reka UI's growing popularity ensures ongoing improvements and updates.
  • : Built-in accessibility features align with our commitment to inclusive design.
  • : Seamless integration with Vue 3 and the Composition API.

This transition empowers Nuxt UI to become a more comprehensive and flexible UI library, offering developers greater power and customization options.

Tailwind CSS v4

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

  • : Full builds in the new engine are up to 5x faster, and incremental builds are over 100x faster — and measured in microseconds.
  • : Built-in import handling, vendor prefixing, and syntax transforms, with no additional tooling required.
  • : A reimagined developer experience where you customize and extend the framework directly in CSS instead of a JavaScript configuration file.
  • : Built on native cascade layers, wide-gamut colors, and including first-class support for modern CSS features like container queries, @starting-style, popovers, and more.
Learn about all the breaking changes in Tailwind CSS v4.

Tailwind Variants

We've adopted Tailwind Variants to manage our design system, offering:

  • : Flexible component variants with a powerful API
  • : Full TypeScript support with auto-completion
  • : Efficient merging of conflicting styles

This integration unifies the styling of components, ensuring consistency and code maintainability.

TypeScript Integration

Nuxt UI offers significantly improved TypeScript integration, providing a superior developer experience:

  • :
    • Full auto-completion for component props based on your theme
    • Intelligent suggestions for app.config.ts theme configuration
  • :
    • Built using Vue 3 Generics
    • Improved type inference for slots and events
  • :
    • Leveraging Tailwind Variants for type-safe styling options
    • Customizable types for extended theme configurations
Check out an example of the Accordion component with auto-completion for props and slots.

Vue compatibility

You can now use Nuxt UI in any Vue project without Nuxt by adding the Vite and Vue plugins to your configuration. This provides:

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

Nuxt DevTools Integration

You can play with Nuxt UI components as well as your app components directly from Nuxt Devtools with the compodium module, providing a powerful development experience:

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

Migration

We want to be transparent: migrating from Nuxt UI v2 to v3 will require significant effort. While we've maintained core concepts and components, Nuxt UI v3 has been rebuilt from the ground up, resulting in a new library with enhanced capabilities.

Key points to consider:

  • Read our migration guide to upgrade your project from v2 to v3.
  • Review the new documentation and components carefully before attempting to upgrade.
  • If you encounter any issues, please report them on our GitHub repository.

FAQ

We're excited about the possibilities Nuxt UI v3 brings to your projects. Explore our documentation to learn more about new features, components, and best practices for building powerful, accessible user interfaces.

Installation

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