Skin / Advanced pack

Sketch

Hand-drawn pencil outlines, Excalifont handwriting, and neutral paper surfaces. A clean sketchbook for prototypes and everyday interfaces.

Preview Sketch 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/sketch/theme.css

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

--font-sans: "Excalifont", "Segoe Print", "Bradley Hand", cursive;

--text-micro: 0.6875rem;

--text-caption: 0.8125rem;

--text-label: 0.9375rem;

--text-body: 1rem;

--text-body-lg: 1.125rem;

--text-heading-4: 1.125rem;

--text-heading-4--font-weight: 400;

--text-heading-3: 1.375rem;

--text-heading-3--line-height: 1.4;

--text-heading-3--font-weight: 400;

--text-heading-2: 1.625rem;

--text-heading-2--line-height: 1.35;

--text-heading-2--font-weight: 400;

--text-heading-1: 2rem;

--text-heading-1--line-height: 1.25;

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

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

--text-display: 2.5rem;

--text-display--line-height: 1.2;

--text-display--font-weight: 400;

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

--background: oklch(0.99 0 0);

--foreground: oklch(0.29 0 0);

--card: oklch(1 0 0);

--card-foreground: var(--foreground);

--popover: var(--card);

--popover-foreground: var(--foreground);

--primary: oklch(0.29 0 0);

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

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

--secondary: oklch(0.96 0 0);

--secondary-foreground: var(--foreground);

--muted: oklch(0.96 0 0);

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

--accent: oklch(0.945 0 0);

--accent-foreground: var(--foreground);

--destructive: oklch(0.5 0.18 25);

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

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

--input: var(--border);

--ring: var(--primary);

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

--control-rim: var(--input);

--control-rim-width: 1.5px;

--control-fill: var(--card);

--canvas: oklch(0.98 0 0);

--radius: 5px;

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

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

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

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

--radius-popup-item: var(--radius);

--shadow-color: var(--foreground);

--shadow-highlight: transparent;

--shadow-opacity: 0;

--scroll-fade-size: 1.5rem;

--popover-padding: 0.375rem;

--padding-x: 1rem;

--padding-y: 0.625rem;

--control-h: 2.5rem;

--duration-fast: 100ms;

--duration-base: 160ms;

--duration-slow: 240ms;

}

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

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

--background: oklch(0.205 0 0);

--foreground: oklch(0.94 0 0);

--card: oklch(0.23 0 0);

--primary: oklch(0.94 0 0);

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

--secondary: oklch(0.29 0 0);

--muted: oklch(0.28 0 0);

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

--accent: oklch(0.32 0 0);

--destructive: oklch(0.76 0.13 25);

--destructive-foreground: var(--background);

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

--canvas: oklch(0.19 0 0);

--overlay-opacity: 0.5;

}

Installation

Start complete or add only Sketch

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

Skin only

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

See registry manifest