Menu
Documentation
v4.0.0-beta.4

Theming overview

Use theming concepts to quickly change the look and feel of your UI.

Shuriken UI theme

The Shuriken UI theme is a set of Tailwind CSS 4 design tokens to generate utility classes that can be used to style the components.

You can see below the default theme configuration:

css
@theme {
  /** Fonts */
  --font-heading: var(--font-sans);
  
  /** Colors */
  --color-muted-50: var(--color-gray-50);
  --color-muted-100: var(--color-gray-100);
  --color-muted-200: var(--color-gray-200);
  --color-muted-300: var(--color-gray-300);
  --color-muted-400: var(--color-gray-400);
  --color-muted-500: var(--color-gray-500);
  --color-muted-600: var(--color-gray-600);
  --color-muted-700: var(--color-gray-700);
  --color-muted-800: var(--color-gray-800);
  --color-muted-900: var(--color-gray-900);
  --color-muted-950: var(--color-gray-950);

  --color-primary-50: var(--color-purple-50);
  --color-primary-100: var(--color-purple-100);
  --color-primary-200: var(--color-purple-200);
  --color-primary-300: var(--color-purple-300);
  --color-primary-400: var(--color-purple-400);
  --color-primary-500: var(--color-purple-500);
  --color-primary-600: var(--color-purple-600);
  --color-primary-700: var(--color-purple-700);
  --color-primary-800: var(--color-purple-800);
  --color-primary-900: var(--color-purple-900);
  --color-primary-950: var(--color-purple-950);
  --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);
  
  --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-info-invert: var(--color-white);
  --color-info-base: var(--color-info-600);
  --color-info-heavy: var(--color-info-700);
  --color-info-light: var(--color-info-500);
  
  --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-success-invert: var(--color-white);
  --color-success-base: var(--color-success-600);
  --color-success-heavy: var(--color-success-700);
  --color-success-light: var(--color-success-500);
  
  --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-warning-invert: var(--color-white);
  --color-warning-base: var(--color-warning-600);
  --color-warning-heavy: var(--color-warning-700);
  --color-warning-light: var(--color-warning-500);
  
  --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);
  --color-destructive-invert: var(--color-white);
  --color-destructive-base: var(--color-destructive-600);
  --color-destructive-heavy: var(--color-destructive-700);
  --color-destructive-light: var(--color-destructive-500);

  /** Components */
  --color-link: var(--color-primary-base);
  --color-ring: var(--color-muted-800);

  --color-field-label: var(--color-muted-600);
  --color-field-description: var(--color-muted-500);
  --color-field-loading: var(--color-muted-400);

  --color-input-default-border: var(--color-muted-300);
  --color-input-default-bg: var(--color-white);
  --color-input-default-text: var(--color-muted-600);
  --color-input-default-placeholder: var(--color-muted-300);
  --color-input-default-button-bg: var(--color-muted-100);
  --color-input-default-button-bg-active: var(--color-muted-200);
  --color-input-default-button-text: var(--color-muted-700);

  --color-input-muted-border: var(--color-muted-300);
  --color-input-muted-bg: var(--color-muted-50);
  --color-input-muted-text: var(--color-muted-600);
  --color-input-muted-placeholder: var(--color-muted-300);
  --color-input-muted-button-bg: var(--color-muted-200);
  --color-input-muted-button-bg-active: var(--color-muted-300);
  --color-input-muted-button-text: var(--color-muted-700);

  --color-portal-default-bg: var(--color-white);
  --color-portal-default-border: var(--color-muted-300);
  --color-portal-default-item-bg-active: var(--color-muted-100);
  --color-portal-default-item-text: var(--color-input-default-text);
  --color-portal-default-item-text-active: var(--color-primary-base);

  --color-portal-muted-bg: var(--color-muted-50);
  --color-portal-muted-border: var(--color-muted-300);
  --color-portal-muted-item-bg-active: var(--color-muted-200);
  --color-portal-muted-item-text: var(--color-input-muted-text);
  --color-portal-muted-item-text-active: var(--color-primary-base);

  --color-track-default-bg: var(--color-muted-200);
  --color-track-default-bg-active: var(--color-muted-500);
  --color-track-default-bg-invert: var(--color-white);
  --color-track-default-handle-bg: var(--color-white);
  --color-track-default-handle-border: var(--color-muted-300);
  --color-track-default-handle-ring: var(--color-track-default-bg-active);

  --color-track-dark-bg: var(--color-muted-200);
  --color-track-dark-bg-active: var(--color-muted-900);
  --color-track-dark-bg-invert: var(--color-white);
  --color-track-dark-handle-bg: var(--color-white);
  --color-track-dark-handle-border: var(--color-muted-300);
  --color-track-dark-handle-ring: var(--color-track-dark-bg-active);

  --color-card-default-bg: var(--color-white);
  --color-card-default-border: var(--color-muted-300);

  --color-card-muted-bg: var(--color-muted-50);
  --color-card-muted-border: var(--color-muted-300);

  --color-tag-default-bg: var(--color-white);
  --color-tag-default-border: var(--color-muted-400);
  --color-tag-default-text: var(--color-muted-400);

  --color-tag-muted-bg: var(--color-muted-400);
  --color-tag-muted-border: var(--color-muted-400);
  --color-tag-muted-text: var(--color-muted-400);

  --color-tag-dark-bg: var(--color-muted-900);
  --color-tag-dark-border: var(--color-muted-900);
  --color-tag-dark-text: var(--color-muted-900);

  --color-popup-default-bg: var(--color-portal-default-bg);
  --color-popup-default-border: var(--color-portal-default-border);
  --color-popup-default-text: var(--color-portal-default-item-text);

  --color-popup-muted-bg: var(--color-portal-muted-bg);
  --color-popup-muted-border: var(--color-portal-muted-border);
  --color-popup-muted-text: var(--color-portal-muted-item-text);

  --color-popup-dark-bg: var(--color-muted-950);
  --color-popup-dark-border: var(--color-muted-950);
  --color-popup-dark-text: var(--color-white);

  /** Animations */
  --animate-nui-placeload: nui-placeload 1s linear infinite forwards;
  --animate-nui-progress-indeterminate: nui-progress-indeterminate 3s linear infinite forwards;
  --animate-nui-spin: spin 2s linear infinite;
  
  @keyframes nui-placeload {
    0% {
      background-position: -468px 0;
    }
    100% {
      background-position: 468px 0;
    }
  }
  @keyframes nui-progress-indeterminate {
    0% {
      margin-left: -100%;
    }
    60% {
      margin-left: 100%;
    }
    100% {
      margin-left: -100%;
    }
  }
}

You can customize the theme by changing the values of the design tokens or by creating new ones in your project, like the example below:

css
@import 'tailwindcss';
@import '@shuriken-ui/nuxt';

@theme {
  /* Override Tailwind default values */
  --font-sans: Inter, sans-serif;
  --breakpoint-sm: 30rem;

  /* Override Shuriken UI default values */
  --color-primary-50: var(--color-sky-50);
  --color-primary-100: var(--color-sky-100);
  --color-primary-200: var(--color-sky-200);
  --color-primary-300: var(--color-sky-300);
  --color-primary-400: var(--color-sky-400);
  --color-primary-500: var(--color-sky-500);
  --color-primary-600: var(--color-sky-600);
  --color-primary-700: var(--color-sky-700);
  --color-primary-800: var(--color-sky-800);
  --color-primary-900: var(--color-sky-900);
  --color-primary-950: var(--color-sky-950);

  /* Create your own theme variables */
  --color-custom: oklch(0.74 0.17 40.24);
  --text-xxs: 0.625rem;
}

@layer base {
  .dark {
    /* Set custom values for dark mode */
    --color-primary-50: var(--color-blue-50);
    --color-primary-100: var(--color-blue-100);
    --color-primary-200: var(--color-blue-200);
    --color-primary-300: var(--color-blue-300);
    --color-primary-400: var(--color-blue-400);
    --color-primary-500: var(--color-blue-500);
    --color-primary-600: var(--color-blue-600);
    --color-primary-700: var(--color-blue-700);
    --color-primary-800: var(--color-blue-800);
    --color-primary-900: var(--color-blue-900);
    --color-primary-950: var(--color-blue-950);
  }
}

@layer components {
  /* Add your custom styles here */
  .external-library-class {
    @apply bg-primary-base text-primary-invert text-xxs;
  }
}
Primary color

The main color used in your application is defined by the primary color of your theme.

Muted color

The shade of gray applied to borders, texts, etc is defined by the muted color.

Dark mode

Switch between light and dark mode to change the appearance of your application.

Visual style

Control the visual style of the components by manipulating components properties.

Shared design tokens

Shuriken UI uses a set of shared design tokens to create a consistent visual language across all components.

As an example, all input components can have default and muted variants, which share the same design tokens but have different visual styles.

You can easily customize the appearance of these components by changing the design tokens in your project.

css
@import 'tailwindcss';
@import '@shuriken-ui/nuxt';

@theme {
  /** Update all input default variant */
  --color-input-default-border: var(--color-muted-300);
  --color-input-default-bg: var(--color-white);
  --color-input-default-text: var(--color-muted-600);
  --color-input-default-placeholder: var(--color-muted-300);
  --color-input-default-button-bg: var(--color-muted-100);
  --color-input-default-button-bg-active: var(--color-muted-200);
  --color-input-default-button-text: var(--color-muted-700);
}

Using a combination of component variants alongside customized props allows you to create a multitude of unique looking interfaces.

?
Helen Miller

has accepted to join the project

New Project

Create a new project

Installation

Visual style