Nuxt UI, the Intuitive Component Library for Vue Apps

Building a Vue application from scratch means making dozens of decisions before writing a single line of business logic: which component library to use, how to handle accessibility, whether your design system will scale, and how tightly it should couple to your framework. Nuxt UI answers most of those questions before you even open your editor.

What Is Nuxt UI?

Nuxt UI is a free, open-source Vue component library built on three core technologies:

• Reka UI — headless accessible primitives that handle keyboard navigation, focus management, and screen reader support out of the box
• Tailwind CSS — utility-first styling with a CSS-first configuration model
• Tailwind Variants — a type-safe API for managing component variants and resolving style conflicts cleanly

The result is 125+ production-ready components that are accessible by default, visually polished, and straightforward to customize.

One important clarification: despite the name, Nuxt UI is not Nuxt-exclusive. It works equally well in any Vue project via a Vite plugin. If you’re building with plain Vue, Vue Router, and Vite, the setup takes only a few lines of configuration.

How Nuxt UI Fits Into the Vue Ecosystem

When evaluating a Vue component library, the real question isn’t “does it have enough components?” — it’s “does it fit how I actually build?”

Here’s where Nuxt UI sits relative to common alternatives:

If your stack already includes Tailwind CSS and you want high-level components — data tables, forms, overlays, navigation — without building them yourself, Nuxt UI is the natural fit.

Getting Started: Installation

For Nuxt projects, add the module to nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css']
})

Then wrap your app with UApp and import the styles in your CSS entry file:

@import "tailwindcss";
@import "@nuxt/ui";

<!-- app.vue -->
<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>

For standard Vue + Vite projects, configure the Vite plugin:

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [vue(), ui()]
})

Then register the plugin in main.ts and import the same CSS. Components and composables are auto-imported globally in both setups.

Key Features Worth Knowing

Accessibility without extra work. Because Nuxt UI builds on Reka UI, complex components like modals, tabs, and dropdowns handle ARIA attributes, focus trapping, and keyboard interactions automatically. You still need to test in context, but the foundation is solid.

TypeScript throughout. Every component prop, slot, and event is typed. Theming via app.config.ts is type-safe, and component props, slots, and composables are fully typed throughout the library.

Theming that doesn’t fight you. Nuxt UI v4 uses a CSS-first configuration model. Customizing colors, sizes, and variants happens in CSS or app.config.ts — no JavaScript config files to wrestle with.

125+ components across 13 categories, including specialized groups for dashboards, AI chat interfaces, rich text editing, and Nuxt Content integration — areas where most Tailwind CSS Vue component libraries offer nothing.

When Nuxt UI Is the Right Choice

Nuxt UI makes sense when you want:

• Tailwind-native components that don’t require a separate design token system
• Accessibility handled at the primitive level, not bolted on afterward
• Nuxt 4 UI components with first-class SSR, i18n, and color mode support
• A free, MIT-licensed library with no paywalled components (Nuxt UI Pro was merged into the main library in v4)

It’s less ideal if you need Material Design, prefer copying component source into your repo (consider shadcn-vue instead), or are building cross-platform apps targeting mobile and desktop (consider Quasar).

Conclusion

Nuxt UI removes the scaffolding tax that slows down early-stage Vue development. With accessible components, a coherent design system, and TypeScript built in, you can focus on what your application actually does rather than rebuilding primitives.

Start with the official documentation or clone one of the ready-made templates — Dashboard, SaaS, Landing, or Starter — and have something running in minutes.

FAQs

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.