Menu
Documentation
v4.0.0-beta.4

Colors

Understanding the color system and its application in your theme.

Primary color

The primary is the most dominant color in your theme, it is used for primary buttons, links and other interactive elements. There is a number of primary colors to choose from. The default primary color used in Shuriken UI is the Tailwind indigo color.

50
100
200
300
400
500
600
700
800
900
950

Muted color

Grays are used for backgrounds, borders, text and other non-interactive elements. You can choose a pure gray or one of the tinted grays. The default muted color used in Shuriken UI is the Tailwind neutral color.

50
100
200
300
400
500
600
700
800
900
950

Alpha variants

Every color has multiple alpha variants using the Tailwind CSS opacity utilities. You can use those to modify the opacity of any color or to play with transparency effects.

Important note

Avoid at maximum using alpha variants on container elements, as it will make the text or any element inside less readable, or unreadable if overlayed on something else, like dropdown menus for instance.

Choosing a primary color

There is a number of primary colors to choose from. Take a look at the basic colors provided by Tailwind CSS and choose one of those as your primary color.

red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose
black

Setting the primary color

Once you have chosen a primary color, you can set it in your main.css file. Make sure to use the --color-* syntax:

css
@theme {
  --color-primary-50: var(--color-indigo-50);
  --color-primary-100: var(--color-indigo-100);
  --color-primary-200: var(--color-indigo-200);
  --color-primary-300: var(--color-indigo-300);
  --color-primary-400: var(--color-indigo-400);
  --color-primary-500: var(--color-indigo-500);
  --color-primary-600: var(--color-indigo-600);
  --color-primary-700: var(--color-indigo-700);
  --color-primary-800: var(--color-indigo-800);
  --color-primary-900: var(--color-indigo-900);
  --color-primary-950: var(--color-indigo-950);
}

Setting the primary variables

In general you won't need all thoses nuances of the primary color. This is why we have narrowed it to four shades named invert, base, light and heavy.

The invert color will generally be used to display text elements on a primary color background, e.g a primary red button with a white primary-invert text. You can then easily override those variables to change the visual style of your application:

css
@theme {
  --color-primary-invert: var(--color-white);
  --color-primary-base: var(--color-primary-500);
  --color-primary-heavy: var(--color-primary-600);
  --color-primary-light: var(--color-primary-400);
}

Using other primary colors

You can choose to use other colors rather than the ones provided by Tailwind CSS out-of-the-box. You can use tools like Tailwind Shades to generate a color palette based on your branding color.

Choosing a muted color

The muted color is used for backgrounds, borders, text and other non-interactive elements. You can choose a pure gray or one of the tinted grays provided by Tailwind CSS. Like for the primary color, you can also use tools like Tailwind Shades to generate a custom gray shade palette.

slate
gray
zinc
neutral
stone

Setting the muted color

Once you have chosen a muted color, you can set it in your main.css file:

css
@theme {
  --color-muted-50: var(--color-neutral-50);
  --color-muted-100: var(--color-neutral-100);
  --color-muted-200: var(--color-neutral-200);
  --color-muted-300: var(--color-neutral-300);
  --color-muted-400: var(--color-neutral-400);
  --color-muted-500: var(--color-neutral-500);
  --color-muted-600: var(--color-neutral-600);
  --color-muted-700: var(--color-neutral-700);
  --color-muted-800: var(--color-neutral-800);
  --color-muted-900: var(--color-neutral-900);
  --color-muted-950: var(--color-neutral-950);
}

Support colors

Shuriken UI provides a set of support colors that you can use to convey meaning or to highlight important information. Many components use these colors to designate a status or a state. These colors have the same set of derivative variables as the primary color.

Info color

The default info color used in Shuriken UI is the Tailwind sky color.

50
100
200
300
400
500
600
700
800
900
950
css
@theme {
  --color-info-invert: var(--color-white);
  --color-info-base: var(--color-info-500);
  --color-info-heavy: var(--color-info-600);
  --color-info-light: var(--color-info-400);
}

Success color

The default success color used in Shuriken UI is the Tailwind teal color.

50
100
200
300
400
500
600
700
800
900
950
css
@theme {
  --color-success-invert: var(--color-white);
  --color-success-base: var(--color-success-500);
  --color-success-heavy: var(--color-success-600);
  --color-success-light: var(--color-success-400);
}

Warning color

The default warning color used in Shuriken UI is the Tailwind amber color.

50
100
200
300
400
500
600
700
800
900
950
css
@theme {
  --color-warning-invert: var(--color-white);
  --color-warning-base: var(--color-warning-500);
  --color-warning-heavy: var(--color-warning-600);
  --color-warning-light: var(--color-warning-400);
}

Destructive color

The default danger color used in Shuriken UI is the Tailwind red color.

50
100
200
300
400
500
600
700
800
900
950
css
@theme {
  --color-destructive-invert: var(--color-white);
  --color-destructive-base: var(--color-destructive-500);
  --color-destructive-heavy: var(--color-destructive-600);
  --color-destructive-light: var(--color-destructive-400);
}

Setting the support colors

Once you have chosen your support colors, you can set them in your tailwind.config.ts file:

css
@theme {
  --color-info-50: var(--color-sky-50);
  --color-info-100: var(--color-sky-100);
  --color-info-200: var(--color-sky-200);
  --color-info-300: var(--color-sky-300);
  --color-info-400: var(--color-sky-400);
  --color-info-500: var(--color-sky-500);
  --color-info-600: var(--color-sky-600);
  --color-info-700: var(--color-sky-700);
  --color-info-800: var(--color-sky-800);
  --color-info-900: var(--color-sky-900);
  --color-info-950: var(--color-sky-950);

  --color-success-50: var(--color-teal-50);
  --color-success-100: var(--color-teal-100);
  --color-success-200: var(--color-teal-200);
  --color-success-300: var(--color-teal-300);
  --color-success-400: var(--color-teal-400);
  --color-success-500: var(--color-teal-500);
  --color-success-600: var(--color-teal-600);
  --color-success-700: var(--color-teal-700);
  --color-success-800: var(--color-teal-800);
  --color-success-900: var(--color-teal-900);
  --color-success-950: var(--color-teal-950);

  --color-warning-50: var(--color-amber-50);
  --color-warning-100: var(--color-amber-100);
  --color-warning-200: var(--color-amber-200);
  --color-warning-300: var(--color-amber-300);
  --color-warning-400: var(--color-amber-400);
  --color-warning-500: var(--color-amber-500);
  --color-warning-600: var(--color-amber-600);
  --color-warning-700: var(--color-amber-700);
  --color-warning-800: var(--color-amber-800);
  --color-warning-900: var(--color-amber-900);
  --color-warning-950: var(--color-amber-950);

  --color-destructive-50: var(--color-rose-50);
  --color-destructive-100: var(--color-rose-100);
  --color-destructive-200: var(--color-rose-200);
  --color-destructive-300: var(--color-rose-300);
  --color-destructive-400: var(--color-rose-400);
  --color-destructive-500: var(--color-rose-500);
  --color-destructive-600: var(--color-rose-600);
  --color-destructive-700: var(--color-rose-700);
  --color-destructive-800: var(--color-rose-800);
  --color-destructive-900: var(--color-rose-900);
  --color-destructive-950: var(--color-rose-950);
}
Important note

With this new CSS variables approach, Tailwind v4 is able to infer color classes if your variables start with the --color-* prefix. If you create a --color-custom variable, Tailwind will automatically generate classes like bg-custom or text-custom.

Visual style

Typography