Nuxt UI

ui.nuxt.com

Official Nuxt component library built on Tailwind and Reka UI for modern Vue apps.

Visit website
Component

Overview

Nuxt UI is a modern Vue UI component library built on Reka UI, Tailwind CSS, and Tailwind Variants. It provides 125+ production-ready, accessible components designed for building beautiful web applications. While optimized for Nuxt, it works seamlessly with any Vue project including Vite, Inertia, and SSR setups.

The library emphasizes developer experience with intuitive APIs, comprehensive TypeScript support, and auto-completion. Components come beautifully styled by default but are fully customizable through a flexible CSS-first design system powered by Tailwind CSS. All components follow WAI-ARIA compliance standards with built-in keyboard navigation and screen reader support.

Nuxt UI v4 unified the open-source library and Pro components into a single free offering, including 125+ components, production-ready templates for both Nuxt and Vue, and a complete Figma design kit for designer-developer collaboration.

Key features

  • 125+ production-ready components
  • Tailwind CSS styling
  • WAI-ARIA accessibility compliance
  • TypeScript support with auto-completion
  • Dark and light mode
  • Internationalization (50+ languages)
  • Customizable design system with CSS variables
  • Reka UI foundation
  • 200,000+ customizable icons via Iconify
  • Production-ready templates
Pros
  • Fully open source and free
  • Excellent TypeScript support and DX
  • Accessible by default with ARIA compliance
  • Highly customizable design system
  • Works with Nuxt and plain Vue
  • Comprehensive documentation
  • Active community with 6.8K+ GitHub stars
  • Includes Figma design kit
Cons
  • Requires Tailwind CSS knowledge for customization
  • Tailwind CSS dependency may add build complexity
  • Learning curve for advanced customization
  • Primarily focused on web applications
Use this if
You're building Vue or Nuxt applications and want a comprehensive, accessible component library with excellent TypeScript support and a flexible design system based on Tailwind CSS.
Skip this if
You prefer Material Design styling (use Vuetify), Ant Design styling (use ant-design-vue), non-Tailwind CSS solutions (use PrimeVue or Element Plus), or copying components into your repo (use shadcn-vue).

Best for

Vue and Nuxt applicationsBuilding accessible web interfacesProjects using Tailwind CSSTeams needing production-ready componentsApplications requiring dark mode supportMulti-language applicationsRapid prototyping and development

Alternatives

Vuetifyant-design-vuePrimeVueElement Plusshadcn-vueQuasar

Compare Nuxt UI alternatives

More Component

Compare all
View Radix Icons
Radix Icons

Crisp 15×15 icon set for interface design.

View React Router
React Router

Declarative routing library for React apps with nested routes and data APIs.

View Vercel AI Elements
Vercel AI Elements

Vercel AI SDK component library on shadcn/ui for AI-native apps.

View Radix UI
Radix UI

Unstyled, accessible React primitives for dialogs, menus, tabs, and form controls.