Nuxt UI

Nuxt UI is a library of accessible, typed Vue components built on Reka UI, Tailwind CSS and Tailwind Variants. It works as a module in Nuxt and as a Vite plugin in plain Vue apps.

[!NOTE] You are on the v4 branch. Check out the v3 branch for Nuxt UI v3 or the v2 branch for Nuxt UI v2.

Documentation

Visit https://ui.nuxt.com to explore the documentation.

Templates

Start your project from one of the Nuxt UI templates below, or browse them all on the templates page.

• Starter: A minimal template to get started with Nuxt UI.
• Landing: A landing page template powered by Nuxt Content.
• Docs: A documentation template powered by Nuxt Content.
• SaaS: A SaaS template with landing, pricing, docs and blog powered by Nuxt Content.
• Dashboard: A dashboard template with multi-column layout.
• Chat: An AI chatbot template with GitHub authentication and persistent chat history powered by Vercel AI SDK.
• Portfolio: A portfolio template to showcase your work, skills and blog powered by Nuxt Content.
• Changelog: A changelog template to display your repository release notes from GitHub powered by Nuxt MDC.
• Editor: A rich text editor template powered by TipTap with support for markdown, HTML, and JSON content types.
• Calendar: An Apple Calendar inspired template with day, week and month views, drag and drop and optimistic updates.

Installation

pnpm add @nuxt/ui tailwindcss

yarn add @nuxt/ui tailwindcss

npm install @nuxt/ui tailwindcss

bun add @nuxt/ui tailwindcss

Nuxt

1. Add the Nuxt UI module in your nuxt.config.ts:

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

2. Import Tailwind CSS and Nuxt UI in your CSS:

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

Learn more in the installation guide.

Vue

1. Add the Nuxt UI Vite plugin in your 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()
  ]
})

2. Use the Nuxt UI Vue plugin in your main.ts:

import './assets/css/main.css'

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import ui from '@nuxt/ui/vue-plugin'
import App from './App.vue'

const app = createApp(App)

const router = createRouter({
  routes: [],
  history: createWebHistory()
})

app.use(router)
app.use(ui)

app.mount('#app')

3. Import Tailwind CSS and Nuxt UI in your CSS:

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

Learn more in the installation guide.

Contribution

Found a bug? Open an issue with a reproduction. Questions and ideas go in Discussions.

Before opening a pull request, read the contribution guide and set up your local development environment.

[!TIP] AGENTS.md gives AI coding agents the component structure, theming patterns, testing conventions and documentation guidelines they need to contribute. Agents that support it load it automatically.

Credits

• vuejs/core
• vitejs/vite
• nuxt/nuxt
• nuxt/icon
• nuxt/fonts
• nuxt-modules/color-mode
• unovue/reka-ui
• tailwindlabs/tailwindcss
• vueuse/vueuse

License

Licensed under the MIT license.