ui/docs/content/1.getting-started/4.colors.md

description, navigation

description	navigation
Learn how to customize the look and feel of the components.	badge label Todo

Color variant

In the previous section, we explored how components have themes that can include variants, which are reflected in their props. One common variant is color. Let's examine this using the Button component as an example:

::component-code

props: color: 'green' slots: default: Button

::

These color variants are generated based on the default Tailwind CSS colors, you can change this by using the colors option in your nuxt.config.ts to select only the colors you're actually using.

For example, you've added a custom cerise color and only use the default blue and green colors in your application.

@import "tailwindcss";
@import "@nuxt/ui";

@theme {
  --color-cerise-50: #fef2f4;
  --color-cerise-100: #fde6e9;
  --color-cerise-200: #fbd0d9;
  --color-cerise-300: #f7aab9;
  --color-cerise-400: #f27a93;
  --color-cerise-500: #e63f66;
  --color-cerise-600: #d42a5b;
  --color-cerise-700: #b21e4b;
  --color-cerise-800: #951c45;
  --color-cerise-900: #801b40;
  --color-cerise-950: #470a1f;
}

export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  ui: {
    colors: ['cerise', 'blue', 'green']
  }
})

This configuration will ensure that only classes for those three colors are generated in your final CSS bundle and that the color prop will be typed and provide autocompletion in your editor with those three colors.

<template>
  <UButton color="cerise">Button</UButton>
</template>

::caution Make sure to use color ranges from 50 to 950 when you define your colors. You can use tools like UI Colors to generate your palette. ::

Runtime colors

Nuxt UI generates CSS variables for color management. Among these, you'll find primary and gray color aliases, which are specifically introduced by Nuxt UI to simplify component styling and provide a consistent color scheme across your application.

You can configure those aliases in your app.config.ts file under the ui.colors key:

• The gray alias can be any of the default Tailwind CSS colors: slate, cool (renamed from gray), zinc, neutral or stone. Defaults to cool.
• The primary alias can be any of the other colors including your custom ones. Defaults to green.

export default defineAppConfig({
  ui: {
    colors: {
      primary: 'cerise',
      gray: 'zinc'
    }
  }
})

::tip The aliases colors can be removed from the colors option in your nuxt.config.ts if you don't use them specifically. For example if primary's target is cerise you don't have to select cerise, this will reduce the bundle even more. ::