Skin / Advanced pack

Liquid metal

Polished metal skin with a WebGL shader control surface.

Preview Liquid metal 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/liquid-metal/theme.css

[data-skin="liquid-metal"][data-skin] {

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

--font-mono: Menlo, Monaco, "Courier New", monospace;

--radius: 14px;

--padding-x: 18px;

--padding-y: 11px;

--control-h: 40px;

--shadow-size: 1.6;

--popover-opacity: 0.7;

--backdrop-blur-popover: 16px;

--overlay-opacity: 0.45;

--backdrop-blur-overlay: 10px;

--duration-base: 260ms;

--duration-fast: 195ms;

--duration-slow: 390ms;

--ease-standard: cubic-bezier(0.16, 1, 0.3, 1);

--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: oklch(0.5 0.0198 74);

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

--scroll-fade-size: 2rem;

--primary: oklch(0.9192 0.0388 261.447);

--primary-foreground: oklch(0.2102 0.006 285.874);

--foreground: oklch(0.2107 0.0087 264.371);

--secondary-foreground: oklch(0.2107 0.0087 264.371);

--accent-foreground: oklch(0.2107 0.0087 264.371);

--canvas: oklch(0.9509 0.0056 264.533);

--background: oklch(0.9744 0.0039 271.371);

--card: oklch(0.9744 0.0039 271.371);

--card-foreground: oklch(0.2107 0.0087 264.371);

--popover: oklch(0.9744 0.0039 271.371);

--popover-foreground: oklch(0.2107 0.0087 264.371);

}

.dark[data-skin="liquid-metal"][data-skin],

.dark [data-skin="liquid-metal"][data-skin] {

--foreground: oklch(0.9841 0.0012 264.547);

--card-foreground: oklch(0.9841 0.0012 264.547);

--popover-foreground: oklch(0.9841 0.0012 264.547);

--secondary-foreground: oklch(0.9841 0.0012 264.547);

--accent-foreground: oklch(0.9841 0.0012 264.547);

/* Dark surfaces stay explicit so portalled menus and popovers never retain the light values. */

--canvas: oklch(0.1417 0.0044 285.819);

--background: oklch(0.1417 0.0044 285.819);

--card: oklch(0.1763 0.0058 285.786);

--popover: oklch(0.1763 0.0058 285.786);

--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);

/* Bright enough to clear 3:1 on the near-black page AND on the metal control the shader paints,

which sits well above --background and is invisible to the theme audit. */

--focus-ring: oklch(0.72 0.0181 70);

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

}

Installation

Start complete or add only Liquid metal

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, and includes the pack’s declared runtimes or extensions.

Complete project

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

Skin only

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

See registry manifest