Skin / Theme pack

Flat

Neutral reset skin with square corners, no shadows, and instant motion.

One command installs the pack's theme.css, skin.css and skin.config.tsx over the refined library — tokens, skin.css and slot classes together. Reinstalling refined resets the theme and skin targets back to the baseline look.

Skin pack

npx shadcn@latest add http://127.0.0.1:3000/r/flat/skin.json

See registry manifest

Pack source

The 3 files this pack ships, read straight from the registry. Each is yours to own and edit after install.

theme.css — token block scoped to [data-skin]; a theme skin's entire brand

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

/*

* "Flat" skin pack — THEME skin, tokens only. Neutral reset: square corners, zero

* shadow, instant motion, flat gray. Additive over baseline (values only, never

* @theme bindings). Scoped [data-skin="flat"], co-compiles with baseline.

*/

[data-skin="flat"] {

--font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

--primary: #171717; /* neutral-900 */

--primary-foreground: #fafafa; /* neutral-50 */

--foreground: #0a0a0a; /* neutral-950 */

--secondary-foreground: #0a0a0a;

--accent-foreground: #0a0a0a;

--background: #ffffff;

--card: #ffffff;

--card-foreground: #0a0a0a;

--popover: #ffffff;

--popover-foreground: #0a0a0a;

--canvas: #ffffff; /* flat = page == surfaces, no floating "paper" level */

/* structural reset */

--radius: 0px; /* squares every control + surface (the radius scale is multiplied from --radius) */

--corner-shape: round;

--shadow-size: 0; /* zero elevation — flattens the token-gated --shadow-* scale */

--scroll-fade-size: 0px; /* hard edges */

--backdrop-blur-popover: 0px;

--backdrop-blur-overlay: 0px;

--duration-fast: 0ms;

--duration-base: 0ms;

--duration-slow: 0ms;

/* these CANNOT be 0 (would break rendering) — kept at real values */

--control-h: 36px; /* 0 = buttons/inputs collapse to invisible */

--ring-opacity: 1;

--popover-opacity: 1; /* 0 = transparent popovers */

--overlay-opacity: 0.2; /* keeps the dialog backdrop dim */

--padding-x: 16px; /* 0 = content glued to surface edges */

--padding-y: 10px;

}

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

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

--primary: #fafafa;

--primary-foreground: #171717;

--foreground: #fafafa;

--card-foreground: #fafafa;

--popover-foreground: #fafafa;

--secondary-foreground: #fafafa;

--accent-foreground: #fafafa;

--background: #0a0a0a;

--card: #171717;

--popover: #171717;

--canvas: #0a0a0a;

}

Refined UI

Flat

Pack source