nuxt /ui

Nuxt UI

(opens in a new tab) (opens in a new tab) (opens in a new tab) (opens in a new tab)

Nuxt UI harnesses the combined strengths of Reka UI (opens in a new tab), Tailwind CSS (opens in a new tab), and Tailwind Variants (opens in a new tab) to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.

[!NOTE] You are on the v4 branch, check out the v3 branch (opens in a new tab) for Nuxt UI v3 or v2 branch (opens in a new tab) for Nuxt UI v2.

Documentation

Visit https://ui.nuxt.com (opens in a new tab) to explore the documentation.

Templates

Kickstart your project with one of our ready-to-use Nuxt UI templates or follow the Installation Guide (opens in a new tab). Explore all available templates on the official templates page (opens in a new tab).

• Starter (opens in a new tab) — A minimal template to get started with Nuxt UI.
• Landing (opens in a new tab) — A modern landing page template powered by Nuxt Content.
• Docs (opens in a new tab) — A documentation template powered by Nuxt Content.
• SaaS (opens in a new tab) — A SaaS template with landing, pricing, docs and blog powered by Nuxt Content.
• Dashboard (opens in a new tab) — A dashboard template with multi-column layout.
• Chat (opens in a new tab) — An AI chatbot template with GitHub authentication and persistent chat history powered by Vercel AI SDK.
• Portfolio (opens in a new tab) — A sleek portfolio template to showcase your work, skills and blog powered by Nuxt Content.
• Changelog (opens in a new tab) — A changelog template to display your repository releases notes from GitHub powered by Nuxt MDC.
• Editor (opens in a new tab) — A rich text editor template powered by TipTap with support for markdown, HTML, and JSON content types.

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 (opens in a new tab).

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 (opens in a new tab).

Contribution

Thank you for considering contributing to Nuxt UI. Here are a few ways you can get involved:

• Reporting Bugs: If you come across any bugs or issues, please check out the reporting bugs guide to learn how to submit a bug report.
• Suggestions: Have any thoughts to enhance Nuxt UI? We’d love to hear them! Check out the contribution guide (opens in a new tab) to share your suggestions.

[!TIP] We provide contributing guidelines through AGENTS.md (opens in a new tab) for AI assistants to help you contribute to Nuxt UI. It is automatically picked up by all AI coding agents and guides through component structure, theming patterns, testing conventions, and documentation guidelines.

Local Development

Follow the docs to set up your local development environment (opens in a new tab) and contribute.

Credits

• nuxt/nuxt (opens in a new tab)
• nuxt/icon (opens in a new tab)
• nuxt/fonts (opens in a new tab)
• nuxt-modules/color-mode (opens in a new tab)
• unovue/reka-ui (opens in a new tab)
• tailwindlabs/tailwindcss (opens in a new tab)
• vueuse/vueuse (opens in a new tab)

License

Licensed under the MIT license (opens in a new tab).