Design-system catalog

Design-system themes

Explore and customize every shads.app catalog theme. The three Free-tagged themes install without an account; save other themes to your library before installing.

Catalog

Each entry is a theme in a design system. All 122 themes are open to explore and customize. The three Free-tagged themes have public registry commands; sign in and save any other theme to your library before installing it.

Modern

Professional product UI: calm neutral canvas, one brand accent, restrained elevation.

A crisp professional system: deep wine-berry accents on cool porcelain neutrals, ambient surfaces and a complete set of density, type and motion presets.

Herbarium

Calm botanical field-guide aesthetic: aged paper, serif type, a single leaf-green (or alternate ink) accent and faint illustrated backgrounds.

A pressed-botanical field guide: aged paper, specimen frames, ink-green accents and quiet leaf and fern illustration behind the page.

Aqua Gel

Mac OS X 2001: pinstripes, glossy gel pills, traffic lights, barber-pole progress.

Mac OS X 2001: pinstripes, glossy gel pills, traffic lights, barber-pole progress.

Art Deco

gold on black, double frames, cut corners, sunburst.

gold on black, double frames, cut corners, sunburst.

ASCII

the UI drawn as plain text: +---+ boxes, [ buttons ], [x] marks, ==== headings on a character-grid canvas.

the UI drawn as plain text: +---+ boxes, [ buttons ], [x] marks, ==== headings on a character-grid canvas. Light = paper .txt, dark = black console.

Atelier

quiet luxury: ivory and charcoal, display serif, tracked caps, hairlines, generous space.

quiet luxury: ivory and charcoal, display serif, tracked caps, hairlines, generous space.

Aurora

premium AI product: aurora glows, gradient CTAs, spinning gradient borders, gradient headlines.

premium AI product: aurora glows, gradient CTAs, spinning gradient borders, gradient headlines.

Bauhaus

primary colors, circle/square/triangle geometry.

primary colors, circle/square/triangle geometry.

Blueprint

technical drawing: grid paper, dashed lines, mono caps, crop marks.

technical drawing: grid paper, dashed lines, mono caps, crop marks.

Claymorphism

soft puffy clay: big radii, inner + outer soft shadows, pastel, bouncy.

soft puffy clay: big radii, inner + outer soft shadows, pastel, bouncy.

Clinical

calm, accessible healthcare UI: hyperlegible type, 44px targets, tinted status, visible focus.

calm, accessible healthcare UI: hyperlegible type, 44px targets, tinted status, visible focus.

Cyberpunk HUD

neon heads-up display: cut corners, corner brackets, glitch hover.

neon heads-up display: cut corners, corner brackets, glitch hover. Light = daylight HUD.

90s Desktop

Windows 95/98: teal desktop, pixel-exact bevels, title bars.

Windows 95/98: teal desktop, pixel-exact bevels, title bars. Dark = High Contrast Black.

Editorial

broadsheet newspaper: serif headlines, rules, small caps, drop caps.

broadsheet newspaper: serif headlines, rules, small caps, drop caps.

8-bit

NES game UI: notched pixel frames, pixel fonts, "▶" menu cursor, choppy motion.

NES game UI: notched pixel frames, pixel fonts, "▶" menu cursor, choppy motion.

Fintech

payments-platform polish (Stripe-style): gradient mesh, layered elevation, pill CTAs, tabular numbers.

payments-platform polish (Stripe-style): gradient mesh, layered elevation, pill CTAs, tabular numbers.

Frost

spatial glass (visionOS-style): translucent blurred surfaces, specular edges, big radii, iOS controls.

spatial glass (visionOS-style): translucent blurred surfaces, specular edges, big radii, iOS controls.

Kids' Sketchbook

a child's spiral sketchbook: waxy crayon boxes drawn twice, scribbled-in fills, corner doodles.

a child's spiral sketchbook: waxy crayon boxes drawn twice, scribbled-in fills, corner doodles. Light = cartridge paper, dark = black construction paper.

1-bit Mac

System 6: pure black and white, dither, striped title bars.

System 6: pure black and white, dither, striped title bars. Dark = inverted.

Memphis

80s clashing pastels, confetti patterns, tilted shapes.

80s clashing pastels, confetti patterns, tilted shapes.

Midnight

precision dark SaaS (Linear-style): hairline gradient borders, indigo accent, status-dot pills.

precision dark SaaS (Linear-style): hairline gradient borders, indigo accent, status-dot pills.

Mono

developer-platform monochrome (Vercel-style): pure contrast, Geist + Geist Mono, blue focus.

developer-platform monochrome (Vercel-style): pure contrast, Geist + Geist Mono, blue focus.

Neobrutalism

thick borders, hard offset shadows, press-down clicks, flat bold color.

thick borders, hard offset shadows, press-down clicks, flat bold color.

Quant

data-dense trading desk: compact spacing, mono tabular numbers, panel headers, green/red ticks.

data-dense trading desk: compact spacing, mono tabular numbers, panel headers, green/red ticks.

Receipt

thermal till receipts: mono caps, dashed tear lines, zigzag edges, barcodes.

thermal till receipts: mono caps, dashed tear lines, zigzag edges, barcodes.

Risograph

two-ink print, misregistration, halftone, paper grain.

two-ink print, misregistration, halftone, paper grain.

Sci-fi Console

starship bridge console: elbow frames, pill buttons, condensed caps.

starship bridge console: elbow frames, pill buttons, condensed caps. Dark-only (no .dark block).

Paper Sketch

hand-drawn on notebook paper (light) or chalkboard (dark).

hand-drawn on notebook paper (light) or chalkboard (dark).

Skeuomorphic

iOS 6 era: linen (light) or stitched leather (dark), glossy controls, embossed text.

iOS 6 era: linen (light) or stitched leather (dark), glossy controls, embossed text.

Swiss Grid

International Typographic Style.

International Typographic Style.

Systematic

Structured enterprise UI: neutral surfaces, square corners, clear hierarchy, and density-scaled controls.

Structured enterprise UI: neutral surfaces, square corners, clear hierarchy, and density-scaled controls.

Terminal CRT

phosphor terminal.

phosphor terminal. "Light" = amber monitor, dark = green; both are dark screens.

Tonal

Material 3 style: tonal surfaces, state layers, pill buttons, filled text fields, shape scale.

Material 3 style: tonal surfaces, state layers, pill buttons, filled text fields, shape scale.

Web 1.0

1996 unstyled HTML: gray page, Times, native bevels.

1996 unstyled HTML: gray page, Times, native bevels. Dark = GeoCities starfield.

Free-tagged themes install without an account. Other themes open in the builder, where you can customize and save them before installing from Get theme.