Colors

NextUI's plugin enables you to personalize the semantic colors of the theme such as primary, secondary, success, etc.

Note: Colors configurations apply globally across all components.

Default Colors

NextUI offers a default color palette right out of the box, perfect for when you're still undecided about your specific branding colors.

These colors are split into Common Colors and Semantic Colors.

• Common Colors: Consistent across themes.
• Semantic Colors: Adjust according to the chosen theme.

Common Colors

Common colors, like TailwindCSS colors, remain consistent regardless of the theme.

To prevent conflicts with TailwindCSS colors, common colors are initially disabled but can be activated with the addCommonColors option.

Enabling this option supplements some TailwindCSS default colors with the following:

Semantic Colors

Semantic colors adapt with the theme, delivering meaning and reinforcing your brand identity.

For an effective palette, we recommend using color ranges from 50 to 900. You can use tools like Eva Design System, Smart Watch, Palette or Color Box to generate your palette.

Semantic colors should be placed inside the nextui plugin options, not inside the TailwindCSS theme object.

Change the docs theme to see the semantic colors in action.

Using Semantic Colors

Semantic colors can be applied anywhere in your project where colors are used, such as text color, border color, background color utilities, and more.

Javascript Variables

Import semantic and common colors into your JavaScript files as follows:

CSS Variables

NextUI creates CSS variables using the format --prefix-colorname-shade for each semantic color. By default the prefix is nextui, but you can change it with the prefix option.

Then you can use the CSS variables in your CSS files.