---
description: 'Learn how to customize the look and feel of the components.'
navigation:
  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](/components/button) component as an example:

::component-code{slug="button"}
---
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`](/getting-started/installation#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.

```css [main.css]
@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;
}
```

```ts [nuxt.config.ts]
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.

```vue
<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](https://uicolors.app/) 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`.

```ts [app.config.ts]
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.
::