Skin / Advanced pack

Cuicui

Cuicui-inspired shell skin with fixed grain, a docked w-80 sidebar, a neutral main container, and the send-aurora anchored extension on ChatComposer (skin.config fills the chat-composer:send-layer anchor).

Preview Cuicui 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/cuicui/theme.css

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

--sidebar-width: 20rem;

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

--font-mono: "Geist Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

--text-micro: 0.6875rem;

--text-label: 0.8125rem;

--primary: oklch(0.574 0.2067 283.833);

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

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

--destructive: oklch(0.576 0.1761 14.132);

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

--popover-opacity: 0.9;

--backdrop-blur-popover: 16px;

--overlay-opacity: 0.36;

--backdrop-blur-overlay: 8px;

--scroll-fade-size: 2.25rem;

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

--shadow-size: 0.7;

--shadow-opacity: 0.9;

--shadow-control-multiplier: 0.8;

--shadow-panel-multiplier: 1.8;

--shadow-popover-multiplier: 3.2;

--shadow-modal-multiplier: 4.2;

--shadow-ambient-multiplier: 6;

--radius: 10px;

--radius-control: var(--radius);

  /* radius divergences — copy-paste cards: panels at base radius, 1.85× field, 2× scene; other rungs keep Refined ratios */

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

--radius-panel: var(--radius);

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

--popover-padding: 0.375rem;

--radius-popup-item: calc(var(--radius-control) * 0.72);

--padding-x: 1rem;

--padding-y: 0.625rem;

--control-h: 2rem;

--control-h-xs: round(var(--control-h) * 0.7, 1px);

--control-h-sm: round(var(--control-h) * 0.85, 1px);

--control-h-lg: round(var(--control-h) * 1.12, 1px);

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

--ease-emphasized: cubic-bezier(0.22, 1, 0.36, 1);

--duration-base: 240ms;

--duration-slow: 420ms;

--control-fill: oklch(1 0 0 / 0.9);

--background: oklch(0.985 0 0);

--foreground: oklch(0.269 0 0);

--card: oklch(1 0 0);

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

--popover: oklch(1 0 0);

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

--muted: oklch(0.97 0 0);

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

--secondary: oklch(0.922 0 0);

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

--accent: oklch(0.8659 0.1539 86.484);

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

--border: oklch(from oklch(0.708 0 0) l c h / calc(0.22 * var(--ring-opacity)));

--input: oklch(from oklch(0.708 0 0) l c h / 0.28);

--ring: oklch(from var(--primary) l c h / 0.38);

--canvas: oklch(0.985 0 0);

--control-rim: oklch(from var(--foreground) l c h / 0.16);

}

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

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

--control-fill: oklch(0.173 0 0 / 0.76);

--background: oklch(0.145 0 0);

--foreground: oklch(0.985 0 0);

--card: oklch(0.205 0 0);

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

--popover: oklch(0.205 0 0);

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

--muted: oklch(0.269 0 0);

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

--secondary: oklch(0.269 0 0);

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

--accent: oklch(0.7259 0.1609 48.691);

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

--border: oklch(from oklch(0.708 0 0) l c h / calc(0.16 * var(--ring-opacity)));

--input: oklch(from oklch(0.708 0 0) l c h / 0.18);

--ring: oklch(from var(--primary) l c h / 0.52);

--canvas: oklch(0.145 0 0);

--control-rim: oklch(1 0 0 / 0.13);

--popover-opacity: 0.82;

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

--shadow-opacity: 1;

}

Installation

Start complete or add only Cuicui

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

Skin only

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

See registry manifest