Installation

Learn how to install and configure Nuxt UI in your Nuxt application.

Setup

Add to a Nuxt project

Install the Nuxt UI v3 alpha package

pnpm add @nuxt/ui@next
If you're using pnpm, ensure that you either set shamefully-hoist=true in your .npmrc file or install tailwindcss@next in your project's root directory.

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

nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui']
})

Import Tailwind CSS and Nuxt UI in your CSS

assets/css/main.css
@import "tailwindcss";
@import "@nuxt/ui";
Use the css property in your nuxt.config.ts to import your CSS file.
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css']
})
It's recommended to install the Tailwind CSS IntelliSense extension for VSCode and add the following settings:
.vscode/settings.json
"files.associations": {
  "*.css": "tailwindcss"
},
"editor.quickSuggestions": {
  "strings": "on"
}

Wrap your app with App component

app.vue
<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>
The App component provides global configurations and is required for Toast and Tooltip components to work.

Use our Nuxt Starter

Start your project with a Nuxt template with Nuxt UI v3 pre-configured by using our Nuxt UI Starter.

Create a new project locally by running the following command:

Terminal
npx nuxi@latest init -t ui3 <my-app>
The <my-app> argument is the name of the directory where the project will be created, replace it with your project name.

Once the installation is complete, navigate into your project and start the development server:

Terminal
cd <my-app>
npm run dev

Options

You can customize Nuxt UI by providing options in your nuxt.config.ts.

prefix

Use the prefix option to change the prefix of the components.

  • Default: U
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  ui: {
    prefix: 'Nuxt'
  }
})

fonts

Use the fonts option to enable or disable the @nuxt/fonts module.

  • Default: true
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  ui: {
    fonts: false
  }
})

colorMode

Use the colorMode option to enable or disable the @nuxt/color-mode module.

  • Default: true
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  ui: {
    colorMode: false
  }
})

theme.colors

Use the theme.colors option to define the dynamic color aliases used to generate components theme.

  • Default: ['primary', 'secondary', 'success', 'info', 'warning', 'error']
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  ui: {
    theme: {
      colors: ['primary', 'error']
    }
  }
})
Learn more about color customization and theming in the Theme section.

theme.transitions

Use the theme.transitions option to enable or disable transitions on components.

  • Default: true
nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  ui: {
    theme: {
      transitions: false
    }
  }
})
This option adds the transition-colors class on components with hover or active states.

Continuous Releases

Nuxt UI v3 uses pkg.pr.new for continuous preview releases, providing developers with instant access to the latest features and bug fixes without waiting for official releases.

Preview releases are automatically generated for every commit to the v3 branch and pull requests targeting the v3 branch. To use it into your project, use the installation command below by replacing 5385f84 with any commit hash or pull request number.

pnpm add https://pkg.pr.new/@nuxt/ui@5385f84
pkg.pr.new will automatically comment on PRs with the installation URL, making it easy to test changes.

Introduction

A comprehensive, Nuxt-integrated UI library providing a rich set of fully-styled, accessible and highly customizable components for building modern web applications.

Theme

Learn how to customize Nuxt UI components using Tailwind CSS v4, CSS variables and the Tailwind Variants API for powerful and flexible theming.