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 ChatInput (skin.config fills the chat-input:send-layer anchor).

One command installs the pack's theme.css, skin.css and skin.config.tsx over the refined library — tokens, skin.css and slot classes together, plus any runtime the pack mounts. Reinstalling refined resets the theme and skin targets back to the baseline look.

Skin pack

npx shadcn@latest add http://127.0.0.1:3000/r/cuicui/skin.json

See registry manifest

Pack source

The 3 files this pack ships, read straight from the registry. Each is yours to own and edit after install.

theme.css — token block scoped to [data-skin]; a theme skin's entire brand

src/registry/skin-packs/cuicui/theme.css

/* refined UI "cuicui" skin pack theme tokens — CuiCui-inspired neutral surfaces, DM Sans rhythm, rounded copy-paste cards, violet-led gradient accent (texture/gradient/glass details live in skin.css)

 * raw token re-values ONLY — @theme bindings live in refined baseline theme.css (merge globally across skins in one Tailwind build, so a pack can never own them)

* scale intent (radius ratios, type rungs) authored as raw tokens below */

[data-skin="cuicui"] {

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

/* type scale — small chrome bumped one rung (11/12/13px micro/meta/label); body stays 14px */

--text-micro: 0.6875rem;

--text-meta: 0.75rem;

--text-label: 0.8125rem;

--primary: oklch(0.6131 0.2067 283.833);

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

--destructive: oklch(0.6851 0.1761 14.132);

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

--ring-opacity: 1;

--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-y: 1;

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

--corner-shape: round;

--corner-shape-control: var(--corner-shape);

--corner-shape-popover: var(--corner-shape);

--corner-shape-panel: var(--corner-shape);

--popover-padding: 0.375rem;

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

--nest-safe: 1px;

--nest-corner-ratio: 3.41421356;

--radius-popup-item-fit: min(var(--radius-popup-item), calc(var(--control-h-xs) / 2));

  --radius-popover: calc(var(--radius-popup-item-fit) + clamp(0px, var(--radius-popup-item-fit) * 1000, var(--popover-padding) - 1px));

--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-md: var(--control-h);

--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-fast: 150ms;

--duration-base: 240ms;

--duration-slow: 420ms;

}

:root:not(.dark)[data-skin="cuicui"],

:where(:not(.dark)) [data-skin="cuicui"] {

--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.556 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 / 0.22);

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

--ring: oklch(from oklch(0.6131 0.2067 283.833) l c h / 0.38);

--canvas: oklch(0.985 0 0);

}

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

:where(.dark) [data-skin="cuicui"] {

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

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

--ring: oklch(from oklch(0.6131 0.2067 283.833) l c h / 0.52);

--canvas: oklch(0.145 0 0);

--popover-opacity: 0.82;

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

--shadow-opacity: 1;

}

@media (prefers-reduced-motion: reduce) {

[data-skin="cuicui"] {

--duration-fast: 0ms;

--duration-base: 0ms;

--duration-slow: 0ms;

}

Refined UI

Cuicui

Pack source