ui

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.