ContextQMD
Back to Shark UI

Styling

docs/styling

latest13.5 KB
Original Source

Sections

Components

Utilities

Forms

Hooks

Styling

Copy Markdown

Guide to styling components with the color system.

Overview#

Shark UI’s styling system is built for clarity and consistent theming. It follows shadcn/ui theme tokens and adds three extra tokens: success, warning, and info to cover status states.

CSS Configuration#

See Installation for installing with CLI. To add the theme yourself, paste the following into globals.css:

Expand

globals.css

@theme inline {
  --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-destructive-foreground: var(--destructive-foreground);
  --color-info: var(--info);
  --color-info-foreground: var(--info-foreground);
  --color-success: var(--success);
  --color-success-foreground: var(--success-foreground);
  --color-warning: var(--warning);
  --color-warning-foreground: var(--warning-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
  --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);
  --radius-xs: calc(var(--radius) * 0.25);
  --radius-sm: calc(var(--radius) * 0.5);
  --radius-md: calc(var(--radius) * 0.75);
  --radius-lg: calc(var(--radius) * 1);
  --radius-xl: calc(var(--radius) * 1.5);
  --radius-2xl: calc(var(--radius) * 2);
  --radius-3xl: calc(var(--radius) * 3);
  --radius-4xl: calc(var(--radius) * 4);
}

:root {
  --radius: 0.5rem;
  --background: var(--color-neutral-50);
  --foreground: var(--color-neutral-800);
  --card: var(--color-neutral-50);
  --card-foreground: var(--color-neutral-800);
  --popover: var(--color-neutral-50);
  --popover-foreground: var(--color-neutral-800);
  --primary: var(--color-neutral-800);
  --primary-foreground: var(--color-neutral-50);
  --secondary: color-mix(
    in srgb,
    var(--color-neutral-950) 6%,
    var(--background)
  );
  --secondary-foreground: var(--color-neutral-800);
  --muted: color-mix(in srgb, var(--color-neutral-950) 6%, var(--background));
  --muted-foreground: color-mix(
    in srgb,
    var(--color-neutral-500) 80%,
    var(--color-neutral-950)
  );
  --accent: color-mix(in srgb, var(--color-neutral-950) 6%, var(--background));
  --accent-foreground: var(--color-neutral-800);
  --destructive: var(--color-red-500);
  --destructive-foreground: var(--color-red-700);
  --info: var(--color-blue-500);
  --info-foreground: var(--color-blue-700);
  --success: var(--color-emerald-500);
  --success-foreground: var(--color-emerald-700);
  --warning: var(--color-amber-500);
  --warning-foreground: var(--color-amber-700);
  --border: color-mix(in srgb, var(--color-neutral-950) 12%, var(--background));
  --input: color-mix(in srgb, var(--color-neutral-950) 13%, var(--background));
  --ring: var(--color-neutral-400);
  --sidebar: var(--color-neutral-50);
  --sidebar-foreground: color-mix(
    in srgb,
    var(--color-neutral-800) 64%,
    var(--sidebar)
  );
  --sidebar-primary: var(--color-neutral-800);
  --sidebar-primary-foreground: var(--color-neutral-50);
  --sidebar-accent: color-mix(
    in srgb,
    var(--color-neutral-950) 6%,
    var(--sidebar)
  );
  --sidebar-accent-foreground: var(--color-neutral-800);
  --sidebar-border: color-mix(
    in srgb,
    var(--color-neutral-950) 11%,
    var(--sidebar)
  );
  --sidebar-ring: var(--color-neutral-400);
  --chart-1: var(--color-orange-600);
  --chart-2: var(--color-teal-600);
  --chart-3: var(--color-cyan-900);
  --chart-4: var(--color-amber-400);
  --chart-5: var(--color-amber-500);
}

.dark {
  --background: var(--color-neutral-950);
  --foreground: var(--color-neutral-100);
  --card: color-mix(in srgb, var(--background) 98%, var(--color-neutral-50));
  --card-foreground: var(--color-neutral-100);
  --popover: color-mix(
    in srgb,
    var(--background) 96%,
    var(--color-neutral-50)
  );
  --popover-foreground: var(--color-neutral-100);
  --primary: var(--color-neutral-100);
  --primary-foreground: var(--color-neutral-800);
  --secondary: color-mix(in srgb, var(--color-white) 8%, var(--background));
  --secondary-foreground: var(--color-neutral-100);
  --muted: color-mix(in srgb, var(--color-neutral-50) 8%, var(--background));
  --muted-foreground: color-mix(
    in srgb,
    var(--color-neutral-500) 70%,
    var(--color-neutral-50)
  );
  --accent: color-mix(in srgb, var(--color-neutral-50) 8%, var(--background));
  --accent-foreground: var(--color-neutral-100);
  --destructive: color-mix(
    in srgb,
    var(--color-red-600) 90%,
    var(--color-neutral-50)
  );
  --destructive-foreground: var(--color-red-400);
  --info: var(--color-blue-500);
  --info-foreground: var(--color-blue-400);
  --success: var(--color-emerald-500);
  --success-foreground: var(--color-emerald-400);
  --warning: var(--color-amber-500);
  --warning-foreground: var(--color-amber-400);
  --border: color-mix(in srgb, var(--color-neutral-50) 12%, var(--background));
  --input: color-mix(in srgb, var(--color-neutral-50) 13%, var(--background));
  --ring: var(--color-neutral-500);
  --sidebar: color-mix(
    in srgb,
    var(--color-neutral-950) 97%,
    var(--color-neutral-50)
  );
  --sidebar-foreground: color-mix(
    in srgb,
    var(--color-neutral-100) 64%,
    var(--sidebar)
  );
  --sidebar-primary: var(--color-neutral-100);
  --sidebar-primary-foreground: var(--color-neutral-800);
  --sidebar-accent: color-mix(
    in srgb,
    var(--color-neutral-50) 8%,
    var(--sidebar)
  );
  --sidebar-accent-foreground: var(--color-neutral-100);
  --sidebar-border: color-mix(
    in srgb,
    var(--color-neutral-50) 11%,
    var(--sidebar)
  );
  --sidebar-ring: var(--color-neutral-400);
  --chart-1: var(--color-blue-700);
  --chart-2: var(--color-emerald-500);
  --chart-3: var(--color-amber-500);
  --chart-4: var(--color-purple-500);
  --chart-5: var(--color-rose-500);
}

Expand

Token convention#

Each color has two tokens: the base name is the fill. The same name with -foreground is the text and icon color meant to sit on that fill. Use both together on every new surface so content stays readable.

<div className="bg-primary text-primary-foreground" />

Adding new tokens#

New variables must be wired through @theme inline as --color-* entries. See Tailwind CSS

globals.css

@theme inline {
  --color-brand: var(--brand);
  --color-brand-foreground: var(--brand-foreground);
}

:root {
  --brand: oklch(0.55 0.18 250);
  --brand-foreground: oklch(0.99 0 0);
}

Customizing colors#

Override variables on :root and .dark. Always update foreground when you change a fill.

globals.css

:root {
  --primary: oklch(76.8% 0.233 130.85);
  --primary-foreground: oklch(98.6% 0.031 120.757);
}

.dark {
  --primary: oklch(53.2% 0.157 131.589);
  --primary-foreground: oklch(96.7% 0.067 122.328);
}

Radius Scale#

--radius is the base radius token for your theme.

We derive a small radius scale from it so components can use consistent corner sizes while still sharing a single source of truth.

app/globals.css

@theme inline {
  --radius-xs: calc(var(--radius) * 0.25);
  --radius-sm: calc(var(--radius) * 0.5);
  --radius-md: calc(var(--radius) * 0.75);
  --radius-lg: calc(var(--radius) * 1);
  --radius-xl: calc(var(--radius) * 1.5);
  --radius-2xl: calc(var(--radius) * 2);
  --radius-3xl: calc(var(--radius) * 3);
  --radius-4xl: calc(var(--radius) * 4);
}

:root {
  --radius: 0.5rem;
}

This means:

  • radius-lg is the base value.
  • Smaller radius scale down from --radius.
  • Larger radius scale up from --radius.
  • Changing --radius updates the entire radius scale.

Color system#

See Colors for the full token reference, and naming rules.

[

Previous page

Installation ](/docs/installation)[

Next page

Colors ](/docs/colors)

On This Page

OverviewCSS ConfigurationToken conventionAdding new tokensCustomizing colorsRadius ScaleColor system