How to Get Started with Nuxt UI

Nuxt UI is a free, open-source Vue component library with 125+ accessible, TypeScript components built on Reka UI and Tailwind CSS. To get started, install it in your project, import it in your CSS, and begin using components — the library ships with icons, fonts, color mode, i18n, and typography already wired in, so you don't need to configure those separately. It works in Nuxt and in any Vue app.

Prerequisites

• A Vue or Nuxt project (the library supports both)
• Tailwind CSS v4, since Nuxt UI is imported through your CSS entry file
• Node.js and a package manager (npm, pnpm, yarn, or bun)

Setup Steps

1. Install the package

Add Nuxt UI to your project with your package manager. The exact install command depends on your setup, but the package is published under the @nuxt/ui name.

2. Import it in your CSS

Nuxt UI is imported alongside Tailwind CSS in your main CSS file. Based on the official example, your main.css should look like this:

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

The order matters: Tailwind CSS is imported first, then Nuxt UI on top of it. This is what connects the component library to Tailwind's utility system.

3. Customize your theme (optional)

You can override design variables using Tailwind's @theme block in the same CSS file. For example, to change the default sans-serif font:

@theme {
  --font-sans: 'Public Sans', sans-serif;
}

This lets you keep Nuxt UI's defaults while adjusting fonts, colors, and other design tokens to match your brand.

4. Configure the app (optional)

Nuxt UI uses an app.config.ts file for app-level configuration. You only need to touch this if you want to change default component behavior or theming beyond what CSS variables cover.

5. Start using components

Once imported, the 125+ components are available in your templates. The library is "beautiful by default," so components render with sensible styling without extra setup.

What You Get Out of the Box

Because these are already integrated, you avoid the usual step of installing and configuring each one individually.

Components and Templates

Nuxt UI offers two starting points:

• Components — individual building blocks you compose into your own layouts. The library covers common patterns like forms, notifications, date pickers, dashboards, and account settings.
• Templates — pre-built layouts that share the same theme, so you can start from a full page or app shell rather than assembling components from scratch.

If you're prototyping or want a consistent look across pages quickly, templates are the faster route. If you need full control, start with individual components.

Common Pitfalls

• Import order in CSS — putting @import "@nuxt/ui" before @import "tailwindcss" can break styling. Keep Tailwind first.
• Skipping the CSS import — installing the package alone isn't enough; components need the CSS entry to pick up styles.
• Assuming Nuxt-only — despite the name, Nuxt UI works in any Vue app, so you're not locked into the Nuxt framework.

Where to Go Next

The official site provides a Get started entry point and a component explorer covering all 125+ components. Use the component explorer to preview behavior before wiring anything into your project, and check the templates section if you want a ready-made layout.