Skin / Advanced pack

Windows XP

Windows XP Luna with compact system typography, glossy controls, blue window frames, and Explorer task panes.

Preview Windows XP 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/xp/theme.css

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

--font-sans: Tahoma, Arial, sans-serif;

--font-mono: "Lucida Console", Consolas, monospace;

--text-body: 0.75rem;

--text-body-lg: 0.8125rem;

--background: oklch(1 0 0);

--foreground: oklch(0.2178 0 0);

--card: oklch(1 0 0);

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

--popover: oklch(1 0 0);

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

--primary: oklch(0.5354 0.1543 259.46);

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

--muted: oklch(0.9501 0.0174 99.605);

--muted-foreground: oklch(0.47 0.0245 98.401);

--secondary: oklch(0.9318 0.0228 98.65);

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

--accent: oklch(0.5354 0.1543 259.46);

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

--destructive: oklch(0.577 0.1823 25.932);

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

--border: oklch(0.6817 0.0116 204.079 / var(--ring-opacity));

--input: oklch(0.6833 0.0533 246.812);

--ring: oklch(0.8118 0.1544 77.609);

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

--focus-ring-style: dotted;

--focus-ring-width: 1px;

--focus-ring-offset: -4px;

--canvas: oklch(0.9318 0.0228 98.65);

--overlay-opacity: 0.3;

--scroll-fade-size: 0rem;

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

--shadow-size: 0.4;

--radius: 0rem;

--popover-padding: 2px;

--padding-x: 0.625rem;

--padding-y: 0.375rem;

--control-h: 1.625rem;

--ease-standard: linear;

--ease-emphasized: linear;

--duration-fast: 0ms;

--duration-base: 0ms;

--duration-slow: 0ms;

--text-label: 0.6875rem;

}

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

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

--background: oklch(0.2459 0.0072 248.122);

--foreground: oklch(0.919 0.0071 88.645);

--card: oklch(0.2795 0.0085 255.574);

--card-foreground: oklch(0.919 0.0071 88.645);

--popover: oklch(0.2795 0.0085 255.574);

--popover-foreground: oklch(0.919 0.0071 88.645);

--primary: oklch(0.5512 0.1425 260.917);

--muted: oklch(0.2958 0.0084 255.567);

--muted-foreground: oklch(0.7028 0.0111 247.986);

--secondary: oklch(0.2958 0.0084 255.567);

--secondary-foreground: oklch(0.919 0.0071 88.645);

--accent: oklch(0.5016 0.1504 261.426);

--destructive: oklch(0.574 0.1623 27.404);

--border: oklch(0.3847 0.0136 256.762 / var(--ring-opacity));

--input: oklch(0.4441 0.0229 248.341);

--ring: oklch(0.7319 0.1299 74.539);

--canvas: oklch(0.1763 0.0052 248.125);

}

Installation

Start complete or add only Windows XP

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-xp.json

Skin only

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

See registry manifest