Installation

Setup

Add to a Nuxt project

pnpm add @nuxt/ui

yarn add @nuxt/ui

npm install @nuxt/ui

bun add @nuxt/ui

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

@import "tailwindcss" theme(static);
@import "@nuxt/ui";

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

"files.associations": {
  "*.css": "tailwindcss"
},
"editor.quickSuggestions": {
  "strings": "on"
}

<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>

Use our Nuxt Starter

Start your project using the nuxt/starter#ui template with Nuxt UI pre-configured.

Create a new project locally by running the following command:

npx nuxi init -t ui <my-app>

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

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

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

fonts

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

• Default: true

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

colorMode

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

• Default: true

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  css: ['~/assets/css/main.css'],
  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']

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

theme.transitions

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

• Default: true

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

Continuous Releases

Nuxt UI 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.

Automatic preview releases are created for all commits and PRs to the v3 branch. Use them by replacing your package version with the specific commit hash or PR number.

{
  "dependencies": {
-   "@nuxt/ui": "^3.0.0",
+   "@nuxt/ui": "https://pkg.pr.new/@nuxt/ui@4c96909",
  }
}