We are thrilled to introduce Nuxt UI v3, a comprehensive redesign of our UI library that delivers significant improvements in accessibility, performance, and developer experience. This major update represents over 1,500 commits of dedicated work, collaboration, and innovation from our team and the community.
Read the blog post announcement: https://nuxt.com/blog/nuxt-ui-v3
✨ Highlights
🧩 Reka UI: A New Foundation
We've transitioned from Headless UI to Reka UI as our core component foundation, bringing:
- Expanded Component Library: Access to 55+ primitives, significantly expanding our component offerings
- Future-Proof Development: Benefit from Reka UI's growing popularity and continuous improvements
- First-Class Accessibility: Built-in accessibility features aligned with our commitment to inclusive design
🚀 Tailwind CSS v4 Integration
Nuxt UI now leverages the latest Tailwind CSS v4, delivering:
- Exceptional Performance: Full builds up to 5× faster, with incremental builds over 100× faster
- Streamlined Toolchain: Built-in import handling, vendor prefixing, and syntax transforms with zero additional tooling
- CSS-First Configuration: Customize and extend the framework directly in CSS instead of JavaScript configuration
🎨 Tailwind Variants
We've adopted Tailwind Variants to power our design system, offering:
- Dynamic Styling: Create flexible component variants with a powerful, intuitive API
- Type Safety: Full TypeScript support with intelligent auto-completion
- Smart Conflict Resolution: Efficiently merge conflicting styles with predictable results
📝 Enhanced TypeScript Integration
Nuxt UI provides significantly improved TypeScript support:
- Intelligent Auto-completion for component props based on your theme configuration
- Generic-based Components built using Vue 3 Generics with improved type inference for slots and events
- Type-safe Theming leveraging Tailwind Variants with customizable types for extended configurations
🔄 Vue Compatibility
Use Nuxt UI in any Vue project without Nuxt by adding the Vite and Vue plugins to your configuration:
- Auto-imports: Components and composables automatically imported and available globally
- Complete Theming: Full theming support with customizable colors, sizes, variants, and more
- Superior Developer Experience: Comprehensive TypeScript support with IntelliSense and auto-completion
Get started with Nuxt UI for Vue →
Migration from v2
We want to be transparent: migrating from Nuxt UI v2 to v3 requires significant effort. While we've maintained core concepts and components, Nuxt UI v3 has been rebuilt from the ground up to provide enhanced capabilities.
To upgrade your project:
- Read our detailed migration guide
- Review the new documentation and components before attempting to upgrade
- Report any issues on our GitHub repository
🙏 Acknowledgements
This release represents thousands of hours of work from our team and the community. We'd like to thank everyone who contributed to making Nuxt UI v3 a reality, especially @romhml, @sandros94, and @hywax for their tremendous work.