Skin / Advanced pack

Windows 98

Classic Windows 98 with bitmap system typography, raised gray controls, recessed fields, navy title bars, and Explorer tree navigation. Fixed to its original light palette.

Preview Windows 98 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/windows-98/theme.css

[data-skin="windows-98"][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.252 0 0);

--card: oklch(0.8078 0 0);

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

--popover: oklch(0.8078 0 0);

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

--primary: oklch(0.2711 0.1879 264.052);

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

--muted: oklch(0.9037 0 0);

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

--secondary: oklch(0.8078 0 0);

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

--accent: oklch(0.2711 0.1879 264.052);

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

--destructive: oklch(0.3767 0.1546 29.234);

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

--border: oklch(0.5999 0 0);

--input: oklch(0.5999 0 0);

--ring: oklch(0 0 0);

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

--focus-ring-style: dotted;

--focus-ring-width: 1px;

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

--canvas: oklch(0.8078 0 0);

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

--primary-text: var(--primary);

--destructive-text: var(--destructive);

--badge-red-foreground: oklch(from var(--color-red-800) 0.34 c h);

--badge-orange-foreground: oklch(from var(--color-orange-800) 0.34 c h);

--badge-yellow-foreground: oklch(from var(--color-yellow-800) 0.34 c h);

--badge-green-foreground: oklch(from var(--color-green-800) 0.34 c h);

--badge-blue-foreground: oklch(from var(--color-blue-800) 0.34 c h);

--badge-purple-foreground: oklch(from var(--color-purple-800) 0.34 c h);

--badge-pink-foreground: oklch(from var(--color-pink-800) 0.34 c h);

--success-text: var(--badge-green-foreground);

--warning-text: var(--badge-yellow-foreground);

--info-text: var(--badge-blue-foreground);

}

Installation

Start complete or add only Windows 98

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-windows-98.json

Skin only

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

See registry manifest