karaUI

Setup

Theme setup

Nothing in karaUI hard-codes a color. Every component reads the same semantic variables shadcn/ui uses (bg-primary, text-muted-foreground, border, ring), so once your app defines them, any component you add picks them up. Pick whichever route fits your project:

Route A — let shadcn write the tokens (recommended)

Already on shadcn/ui? Skip this step, the variables are in place. For a fresh project, the init command below adds them to your stylesheet.

Shellterminal
npx shadcn@latest init

Route B — copy karaUI's theme.css

Prefer to skip shadcn entirely? Drop the block below into globals.css right after the @import "tailwindcss";. line. Besides the color variables it carries the keyframes and surface helper classes some components rely on. Tailwind CSS v4 is required.

The same file is served at /theme.css.

CSSglobals.css
@custom-variant dark (&:where(.dark, .dark *));

:root {
    /* Base palette */
    --background: oklch(99% 0 0);
    --foreground: oklch(15% 0 0);
    --card: oklch(97% 0 0);
    --muted-foreground: oklch(50% 0 0);
    --border: oklch(15% 0 0 / 0.06);
    /* karaUI extensions */
    --border-strong: oklch(15% 0 0 / 0.12);
    --accent-fg: oklch(15% 0 0);
    --neon: oklch(80% 0.22 145);
    --violet: oklch(68% 0.22 295);
    --danger: oklch(62% 0.22 25);
    --success: oklch(70% 0.18 155);
    --warning: oklch(78% 0.18 75);
    --glass-bg: oklch(99% 0 0 / 0.55);
    --glass-border: oklch(15% 0 0 / 0.08);
    --glass-strong-bg: rgb(255 255 255 / 0.7);
    --glass-thin-bg: rgb(255 255 255 / 0.45);
    /* shadcn semantic tokens */
    --card-foreground: var(--foreground);
    --popover: var(--card);
    --popover-foreground: var(--foreground);
    --primary: var(--foreground);
    --primary-foreground: var(--background);
    --secondary: var(--card);
    --secondary-foreground: var(--foreground);
    --muted: var(--card);
    --accent: oklch(72% 0.18 195);
    --accent-foreground: var(--accent-fg);
    --destructive: var(--danger);
    --input: var(--border);
    --ring: var(--border-strong);
    /* Categorical chart series, in fixed order (shadcn --chart-* names).
       Validated for CVD and normal-vision separation on --card. */
    --chart-1: #2a78d6;
    --chart-2: #eb6834;
    --chart-3: #1baf7a;
    --chart-4: #eda100;
    --chart-5: #e87ba4;
}

.dark {
    --background: #151515;
    --foreground: oklch(96% 0 0);
    --card: #1c1c1c;
    --muted-foreground: oklch(62% 0 0);
    --border: rgb(255 255 255 / 0.05);
    --border-strong: rgb(255 255 255 / 0.1);
    --chart-1: #3987e5;
    --chart-2: #d95926;
    --chart-3: #199e70;
    --chart-4: #c98500;
    --chart-5: #d55181;
    --accent: oklch(80% 0.18 195);
    --accent-fg: #151515;
    --glass-bg: rgb(28 28 28 / 0.55);
    --glass-border: rgb(255 255 255 / 0.08);
    --glass-strong-bg: rgb(28 28 28 / 0.6);
    --glass-thin-bg: rgb(21 21 21 / 0.45);
}

@theme inline {
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

    --color-border: var(--border);
    --color-border-strong: var(--border-strong);
    --color-chart-1: var(--chart-1);
    --color-chart-2: var(--chart-2);
    --color-chart-3: var(--chart-3);
    --color-chart-4: var(--chart-4);
    --color-chart-5: var(--chart-5);
    --color-neon: var(--neon);
    --color-violet: var(--violet);
    --color-success: var(--success);
    --color-warning: var(--warning);
    --color-background: var(--background);
    --color-foreground: var(--foreground);
    --color-card: var(--card);
    --color-card-foreground: var(--card-foreground);
    --color-popover: var(--popover);
    --color-popover-foreground: var(--popover-foreground);
    --color-primary: var(--primary);
    --color-primary-foreground: var(--primary-foreground);
    --color-secondary: var(--secondary);
    --color-secondary-foreground: var(--secondary-foreground);
    --color-muted: var(--muted);
    --color-muted-foreground: var(--muted-foreground);
    --color-accent: var(--accent);
    --color-accent-foreground: var(--accent-foreground);
    --color-destructive: var(--destructive);
    --color-input: var(--input);
    --color-ring: var(--ring);
}

@theme {
    --animate-marquee: marquee 30s linear infinite;
    --animate-marquee-vertical: marquee-vertical 30s linear infinite;
    --animate-shimmer: shimmer 2.5s linear infinite;

    @keyframes marquee {
        from { transform: translateX(0); }
        to { transform: translateX(calc(-100% - var(--gap, 1rem))); }
    }
    @keyframes marquee-vertical {
        from { transform: translateY(0); }
        to { transform: translateY(calc(-100% - var(--gap, 1rem))); }
    }
    @keyframes shimmer {
        from { background-position: 200% 0; }
        to { background-position: -200% 0; }
    }
}

@layer utilities {
    .scrollbar-hide::-webkit-scrollbar { display: none; }
    .scrollbar-hide { scrollbar-width: none; }

    .mask-radial-fade {
        mask-image: radial-gradient(ellipse at center, black 40%, transparent 75%);
    }
    .mask-b-fade {
        mask-image: linear-gradient(to bottom, black 60%, transparent);
    }

    .glass {
        background: var(--glass-bg);
        backdrop-filter: blur(20px) saturate(160%);
        border: 1px solid var(--glass-border);
        box-shadow:
            0 1px 0 0 rgb(255 255 255 / 0.06) inset,
            0 24px 60px -24px rgb(0 0 0 / 0.45);
    }
    .glass-strong {
        background: var(--glass-strong-bg);
        backdrop-filter: blur(16px);
    }
    .glass-thin {
        background: var(--glass-thin-bg);
        backdrop-filter: blur(12px);
        border: 1px solid var(--glass-border);
    }
}

Design styles

karaUI ships 10 design styles, the default included. A style swaps the palette, corner radius, shadows and fonts together, and each one has its own light and dark set. Every card below is drawn in the style it names. Try one on this site with Use this style (or the palette button in the header and dock), or grab its CSS with Copy CSS and paste it into your globals.css after the theme variables.

karaUI

The stock karaUI look: soft neutrals, glass and a cyan accent.

Active
PrimaryAccentMuted
  • Soft neutral surfaces
  • Glass and gentle depth
  • Geist type

Minimalism

Monochrome, hairline borders and lots of air. Nothing decorative.

PrimaryAccentMuted
  • Few elements
  • No decorative details
  • Lots of negative space
  • Minimal bold colors

Neobrutalism

Clashing saturated color, thick black outlines and hard offset shadows.

PrimaryAccentMuted
  • Provocative layouts
  • Clashing color palettes
  • Heavy shadows and outlines

Constructivism

Red, black and cream, condensed uppercase headlines and sharp geometry.

PrimaryAccentMuted
  • Sans-serif fonts
  • Various geometric shapes
  • Elements aligned to one side

Swiss

International Typographic Style: a strict grid, tight grotesk type and one red.

PrimaryAccentMuted
  • Strong modular grid
  • Clean sans-serif fonts
  • Minimal realistic imagery
  • Poster-inspired composition

Editorial

Print-inspired: paper and ink, a high-contrast serif and fine rules.

PrimaryAccentMuted
  • Print-inspired
  • High-contrast fonts
  • Large visuals
  • Decorative elements

Hand-drawn

Sketchbook energy: a handwritten face, wobbly corners and pencil lines.

PrimaryAccentMuted
  • Handwritten or script fonts
  • Sketches and brush strokes
  • Free-form layout
  • Intentional visual chaos

Retro

Sunset gradients, film grain and old-school terminal type on chunky shapes.

PrimaryAccentMuted
  • Bright palettes and gradients
  • Grainy textures
  • Old-school tech

Flat

Totally flat: pastel fills, no shadows or depth, friendly readable type.

PrimaryAccentMuted
  • No shadows or 3D
  • Pastel tones
  • Clean readable fonts

Bento

Big rounded tiles on a tinted canvas, packed tight, no tricks.

PrimaryAccentMuted
  • Rounded rectangular blocks
  • Little empty space
  • No decorative tricks