Skin / Advanced pack

macOS

Apple-inspired glass skin with live backdrop blur, SVG edge refraction, paired light and dark rims, and a flush sidebar.

Preview macOS 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/modern-apple/theme.css

[data-skin="modern-apple"][data-skin] {

--control-fill: oklch(from var(--background) l c h / 0.55);

  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;

--font-mono: "SF Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

--text-micro: 0.6875rem;

--text-caption: 0.75rem;

--text-label: 0.8125rem;

--text-body-lg: 1.0625rem;

--text-heading-1: 2rem;

--text-heading-1--font-weight: 600;

--text-heading-1--letter-spacing: -0.025em;

--text-display: 2.5rem;

--text-display--letter-spacing: -0.03em;

--background: oklch(1 0 0);

--foreground: oklch(0.2178 0 89.876);

--card: oklch(1 0 0);

--card-foreground: oklch(0.2178 0 89.876);

--popover: oklch(0.995 0 0);

--popover-foreground: oklch(0.2178 0 89.876);

--primary: oklch(0.556 0.2018 254.088);

--primary-foreground: oklch(1 0 0);

--muted: oklch(0.9673 0.0024 286.354);

--muted-foreground: oklch(0.47 0 0);

--secondary: oklch(0.9364 0.0027 286.347);

--secondary-foreground: oklch(0.2178 0 89.876);

--accent: oklch(0.9673 0.0024 286.354);

--accent-foreground: oklch(0.2178 0 89.876);

--destructive: oklch(0.583 0.2328 25.739);

--destructive-foreground: oklch(1 0 0);

--ring-opacity: 0.12;

--border: oklch(0 0 0 / var(--ring-opacity));

--input: oklch(0 0 0 / 0.16);

--ring: var(--primary);

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

--canvas: oklch(0.9466 0 0);

--popover-opacity: 0.36;

--backdrop-blur-popover: 3px;

--scroll-fade-size: 2rem;

--shadow-color: oklch(0.2244 0.0257 263.845);

--shadow-size: 1;

--shadow-opacity: 0.85;

--radius: 0.75rem;

--radius-control: calc(var(--radius) * 0.75);

--radius-field: calc(var(--radius) * 1.9);

--radius-panel: calc(var(--radius) * 1.7);

--radius-scene: calc(var(--radius) * 2);

--corner-shape: superellipse(1.25);

--popover-padding: 0.3125rem;

--radius-popup-item: 0.5rem;

--padding-x: 1rem;

--padding-y: 0.5rem;

--control-h: 2rem;

--ease-standard: cubic-bezier(0.33, 1, 0.68, 1);

--ease-emphasized: linear(

0,

0.006,

0.025 3.1%,

0.101 7.3%,

0.276 12.5%,

0.578 19.8%,

0.73 24%,

0.853,

0.949 31.9%,

1.008,

1.062 39.5%,

1.079,

1.085,

1.08 46.9%,

1.055 52.2%,

1.014 60.4%,

0.995 66.6%,

0.985 72.9%,

0.987 80.2%,

0.997 91.7%,

1

);

--duration-fast: 160ms;

--duration-base: 280ms;

--duration-slow: 420ms;

}

.dark[data-skin="modern-apple"][data-skin],

.dark [data-skin="modern-apple"][data-skin] {

--background: oklch(0.235 0 89.876);

--foreground: oklch(0.9673 0.0024 286.354);

--card: oklch(0.2478 0.0042 286.109);

--card-foreground: oklch(0.9673 0.0024 286.354);

--popover: oklch(0.27 0.006 286.001);

--popover-foreground: oklch(0.9673 0.0024 286.354);

--primary: oklch(0.557 0.2056 255.486);

--muted: oklch(0.2978 0.0033 286.199);

--muted-foreground: oklch(0.78 0.004 286);

--secondary: oklch(0.3473 0.004 286.188);

--secondary-foreground: oklch(0.9673 0.0024 286.354);

--accent: oklch(0.326 0.0056 286.084);

--accent-foreground: oklch(0.9673 0.0024 286.354);

--destructive: oklch(0.581 0.2261 28.178);

--destructive-text: oklch(from var(--destructive) 0.8 c h);

--ring-opacity: 0.14;

--border: oklch(1 0 0 / var(--ring-opacity));

--input: oklch(1 0 0 / 0.18);

--canvas: oklch(0.1822 0.004 286.056);

--popover-opacity: 0.42;

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

--shadow-opacity: 1;

}

Installation

Start complete or add only macOS

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-modern-apple.json

Skin only

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

See registry manifest