Skin / Theme pack

Rig

Brutalist skin with coral accents, squared corners, and dense typography.

Preview Rig How skin layers resolve

Source

Explore the files that define this skin. Copy any file to make it your own.

About the skin files

theme.css: token block scoped to [data-skin]; a theme skin's entire brand
skin.css: the pack's own vars + @utility helpers + descendant CSS the cva recipes can't express
skin.config.tsx: per-slot classes, adornments, and the motion flag

How skin layers resolve

src/registry/skin-packs/rig/theme.css

/* Brutalist coral, squared corners, dense type. */

[data-skin="rig"][data-skin] {

--font-sans: "Helvetica Neue", "Arial Nova", Arial, "Segoe UI", ui-sans-serif, sans-serif;

--font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

/* THE one radius knob: 0 squares every control + surface (the chamfer is added in skin.css). */

--padding-x: 18px;

--padding-y: 11px;

--control-h: 40px;

/* Flat + matte: brutalist controls carry their weight with fill + chamfer, not elevation. */

--overlay-opacity: 0.6;

--duration-base: 130ms;

--duration-fast: 85ms;

--duration-slow: 210ms;

--muted: oklch(0.9425 0.0104 79);

--muted-foreground: oklch(0.52 0.0224 72);

--secondary: oklch(0.9425 0.0104 79);

--accent: oklch(0.9295 0.0118 77);

--border: oklch(0.8851 0.0135 76 / var(--ring-opacity));

--input: oklch(0.8851 0.0135 76);

--ring: oklch(0.6903 0.0198 74);

--focus-ring: var(--foreground);

/* every control is chamfered by clip-path, which eats an outward ring; the indicator draws inside it */

--focus-ring-offset: -3px;

--shadow-color: oklch(0.2986 0.0421 63);

--scroll-fade-size: 2rem;

/* Coral = ACCENT not page bg; surfaces warm off-white (inverse of dark band's near-black stack).

* canvas = paper; card/background/popover = near-white surfaces above it.

* The filled primary is dark enough for white ink to clear WCAG AA. */

--primary: oklch(0.54 0.1892 32.312);

--primary-foreground: oklch(0.9852 0.0058 85);

--foreground: oklch(0.2168 0.0113 55.716);

--secondary-foreground: oklch(0.2168 0.0113 55.716);

--accent-foreground: oklch(0.2168 0.0113 55.716);

--canvas: oklch(0.96 0.0084 63.977);

--background: oklch(0.9789 0.0041 74.929);

--card: oklch(0.9933 0.0016 81.514);

--card-foreground: oklch(0.2168 0.0113 55.716);

--popover: oklch(0.9933 0.0016 81.514);

--popover-foreground: oklch(0.2168 0.0113 55.716);

}

:root:not(.dark)[data-skin="rig"][data-skin],

:where(:not(.dark)) [data-skin="rig"][data-skin] {

--control-rim: oklch(from var(--foreground) l c h / 0.5);

--control-rim-width: 1.5px;

}

.dark[data-skin="rig"][data-skin],

.dark [data-skin="rig"][data-skin] {

--primary: oklch(0.54 0.1833 32.21);

--foreground: oklch(0.9313 0.0143 81.504);

--secondary-foreground: oklch(0.9313 0.0143 81.504);

--accent-foreground: oklch(0.9313 0.0143 81.504);

--canvas: oklch(0.1576 0.0041 48.447);

--background: oklch(0.1812 0.0051 48.425);

--card: oklch(0.204 0.0058 48.423);

--card-foreground: oklch(0.9313 0.0143 81.504);

--popover: oklch(0.204 0.0058 48.423);

--popover-foreground: oklch(0.9313 0.0143 81.504);

--muted: oklch(0.2668 0.0132 66);

--muted-foreground: oklch(0.7405 0.0175 76);

--secondary: oklch(0.2668 0.0132 66);

--accent: oklch(0.2864 0.0141 67);

--border: oklch(0.3082 0.0147 67 / var(--ring-opacity));

--input: oklch(0.3082 0.0147 67);

--ring: oklch(0.5521 0.0181 70);

--shadow-color: oklch(0 0 0);

}

Installation

Start complete or add only Rig

Complete project installs the canonical Control UI component set and this skin in one step. Skin only replaces the active skin.config.tsx, skin-theme.css, and skin.css targets without changing component source.

Complete project

npx shadcn@latest add https://control-ui.dev/r/all-rig.json

Skin only

npx shadcn@latest add https://control-ui.dev/r/skin-rig.json --overwrite

See registry manifest