Nuxt Ui

Tailwind CSS v4

Nuxt UI v3 uses Tailwind CSS v4. Import the theme in your CSS:

/* assets/css/main.css */
@import "tailwindcss";
@import "@nuxt/ui";

Key Components

1. Buttons

<template>
  <UButton label="Click me" />
  <UButton label="Danger" color="red" variant="soft" />
  <UButton label="Loading..." loading />
  <UButton icon="i-lucide-plus" size="sm" />
</template>

2. Forms

<template>
  <UForm :schema="schema" :state="state" @submit="onSubmit">
    <UFormField label="Email" name="email">
      <UInput v-model="state.email" type="email" />
    </UFormField>
    <UFormField label="Password" name="password">
      <UInput v-model="state.password" type="password" />
    </UFormField>
    <UButton type="submit" label="Submit" />
  </UForm>
</template>

<script setup lang="ts">
import { z } from 'zod'

const schema = z.object({
  email: z.string().email(),
  password: z.string().min(8),
})

const state = reactive({ email: '', password: '' })
const onSubmit = () => console.log(state)
</script>

3. Data Table

<template>
  <UTable :data="users" :columns="columns" />
</template>

<script setup>
const columns = [
  { accessorKey: 'name', header: 'Name' },
  { accessorKey: 'email', header: 'Email' },
  { accessorKey: 'role', header: 'Role' },
]

const users = [
  { name: 'John', email: '[email protected]', role: 'Admin' },
]
</script>

4. Navigation — CommandPalette

<template>
  <UCommandPalette :groups="groups" />
</template>

<script setup>
const groups = [{
  key: 'actions',
  label: 'Actions',
  commands: [
    { id: 'new', label: 'New file', icon: 'i-lucide-file-plus' },
    { id: 'search', label: 'Search', icon: 'i-lucide-search' },
  ]
}]
</script>

Theming

App Config

// app.config.ts
export default defineAppConfig({
  ui: {
    colors: {
      primary: 'green',
      neutral: 'slate',
    },
  },
})

Dark Mode

Dark mode works out of the box with @nuxtjs/color-mode:

<template>
  <UButton
    :icon="isDark ? 'i-lucide-sun' : 'i-lucide-moon'"
    @click="isDark = !isDark"
  />
</template>

<script setup>
const colorMode = useColorMode()
const isDark = computed({
  get: () => colorMode.value === 'dark',
  set: () => colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark',
})
</script>

Best Practices

1. Use app.config.ts for theming — Not nuxt.config.ts
2. Leverage built-in icons — Use Lucide icons via i-lucide-* pattern
3. Form validation — Always pair UForm with Zod or Yup schemas
4. Responsive design — Components are responsive by default; use Tailwind breakpoints for layout

References

• Nuxt UI Documentation
• Nuxt UI GitHub
• Radix Vue