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.
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
125+ battle-tested components including data tables, forms, overlays, and navigation 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 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