B
marvkr
/
better-design
/
styles
Files
Code
Info
Airbnb
airbnb/all
Warm, inviting design for travel and hospitality with coral accents
Apple
apple/all
Clean light theme with pill-shaped buttons, blue primary, SF Pro typography, and precise whitespace
Atelier
atelier/all
Light luxury dashboard: airy cream canvas, restrained forest-green accent, whisper-soft shadows, quiet editorial elegance
Beam Lib
beam-lib/all
Dark theme with rainbow border-beam accents powered by the official border-beam npm package — animated conic-gradient strokes and bloom layers
Bevel
bevel/all
Compact phone product: tight headlines, cards with no outline set apart by a soft shadow and a thin light edge, one deep blue accent
Brutalism
brutalism/all
High-contrast light UI with thick black borders, hard offset shadows, square geometry, safety-yellow actions, and production-grade accessibility.
Carbon
carbon/all
Dark DS with dark slate canvas, silver frosted-glass card and primary CTA pills (24px backdrop blur), chunky 24px radius. Photo-as-content automotive vibe, no chromatic accent.
Cashmere
cashmere/all
Warm friendly-fintech: cream paper ground, crisp white cards, flat near-black pill buttons, generous squircles, playful blue and orange accent pops
Cerulean
cerulean/all
Dark command palette: near-black stage, deep steel-blue accent on selected rows, monospace voice, precise 8px radii
Chrome Azure
chrome-azure/all
Dark DS with a near-black canvas and skeuomorphic brushed-chrome controls: a beveled metal rim frames a glossy specular track, and raised chrome knobs carry an inset top highlight with a soft drop shadow. Azure primary alloy; checkboxes, switches, radios and sliders fill with the same metal as the primary button. 12px radius.
Chrome Bronze
chrome-bronze/all
Dark DS with a near-black canvas and skeuomorphic brushed-chrome controls: a beveled metal rim frames a glossy specular track, and raised chrome knobs carry an inset top highlight with a soft drop shadow. Copper bronze primary alloy; checkboxes, switches, radios and sliders fill with the same metal as the primary button. 12px radius.
Chrome Crimson
chrome-crimson/all
Dark DS with a near-black canvas and skeuomorphic brushed-chrome controls: a beveled metal rim frames a glossy specular track, and raised chrome knobs carry an inset top highlight with a soft drop shadow. Crimson primary alloy; checkboxes, switches, radios and sliders fill with the same metal as the primary button. 12px radius.
Chrome Emerald
chrome-emerald/all
Dark DS with a near-black canvas and skeuomorphic brushed-chrome controls: a beveled metal rim frames a glossy specular track, and raised chrome knobs carry an inset top highlight with a soft drop shadow. Emerald primary alloy; checkboxes, switches, radios and sliders fill with the same metal as the primary button. 12px radius.
Chrome Gold
chrome-gold/all
Dark DS with a near-black canvas and skeuomorphic brushed-chrome controls: a beveled metal rim frames a glossy specular track, and raised chrome knobs carry an inset top highlight with a soft drop shadow. Gilded gold primary alloy; checkboxes, switches, radios and sliders fill with the same metal as the primary button. 12px radius.
Chrome Silver
chrome-silver/all
Dark DS with a near-black canvas and skeuomorphic brushed-chrome controls: a beveled metal rim frames a glossy specular track, and raised chrome knobs carry an inset top highlight with a soft drop shadow. Brushed-silver primary alloy; checkboxes, switches, radios and sliders fill with the same metal as the primary button. 12px radius.
Cinema
cinematic-dark/all
Cinematic dark theme with deep navy background, high contrast white text, and dramatic visual weight
Clicky
clicky/all
Light theme with raised, press-down buttons: bright-blue primary actions with a hairline rim, inset top highlight and a stacked drop shadow, plus synthesized haptic click sounds. Filled controls share the same tactile material
Cobalt
cobalt/all
Dark analytics: carved inset panels paired with soft outer lift, blue and cyan accents, medium radii, engineered depth
Cornflower
cornflower/all
Light fintech dashboard: cool gray canvas, crisp cornflower-blue primary, subtle elevation, clean data clarity
Column
corporate-fintech/all
Professional, trustworthy design for fintech with blue accents
Sharp Dark
dark-orange/all
Dark landing-page style with orange (#F05023) accents, 10px radius, and precise layered shadows
Editorial Dark
editorial-dark/all
Dark editorial theme with serif display type, flat no-shadow cards, generous radius, and content-first layout
Editorial Warm
editorial-warm/all
Light DS on warm cream canvas with frosted-glass pill buttons (backdrop blur 28px), deep terracotta primary used sparingly as link text and focus ring, 24px radius. Fraunces serif headings, Inter body, JetBrains Mono labels.
Ember
ember/all
Dark glass workspace: translucent charcoal panels, warm amber glow primary, soft material depth
Evergreen
evergreen/all
Dark analytics: deep forest-green canvas, vivid emerald primary, flat-clean depth, single-hue confidence
Figma
figma/all
Light theme with vibrant purple primary, clean white backgrounds, and design-tool precision
Firefly
firefly/all
Warm light system for consumer apps: a white page under warm paper surfaces, near-black ink and Hanken Grotesk, full-pill controls, and one glowing action, a yellow-green pill lit from within by an inner top highlight and a soft bloom that the checkbox, switch, radio and slider share. Borderless warm cards, white menus edged by a soft far shadow, an olive focus ring.
Folio
folio/all
Dark folder skeuomorphism: charcoal surfaces with crisp top-edge rim highlights, deep soft shadows, fractal grain, and a warm paper-amber accent
Frosted Glass
frosted-glass/all
Frosted glass with a violet accent: heavy backdrop blur, specular rim highlights, chromatic edge fringe, soft glow, large rounded pills
Glassmorphic Dark
glassmorphic-dark/all
Transparent glass panels with blur, frosted surfaces on dark backgrounds for layered depth
Graphite
graphite/all
Soft recessed dark: warm monochrome greys, gentle inset wells, sliding gradient pills, hairline white highlights, system sans typography
Halo
halo/all
Translucent dark panels with a soft halo glow, bright-blue raised controls and a warm amber signature accent for a polished, depth-lit feel
Haptic
haptic/all
Dark theme: cool iron-charcoal canvas with a brushed-steel primary, 8px radius, layered inset-highlight and ambient shadows. Every interactive primitive fires a Web Vibration API tap via web-haptics, so each press lands with a physical detent on supported mobile devices.
Heyclicky
heyclicky/all
Desktop-toy landing page: dotted grey paper ground, macOS window chrome with a silver title bar, glossy full-round pill buttons in system blue, liquid-glass panels with a white inside rim, lowercase wide-tracked labels
Nocturne
hyperline/all
Premium dark billing SaaS: deep purple gradient backdrop, layered soft shadows for depth, raised cyan controls with a gold signature accent, sharp-ish radii
Inset Dark
inset-dark/all
Tactile dark — recessed tracks, gradient pills with hairline borders, monochrome, SF Pro typography
Instrument
instrument/all
Dark metrics console: nested-panel shadow hierarchy, machined gold controls, dense technical data feel
Interior
interior/all
A three-material kit: a warm bezel, lifted white panels and recessed wells, warm ink shadows, square-cornered controls on a nested radii scale, and one accent blue spent only on interaction
Lane
lane/all
Light project board: off-white lanes, white lifted cards, indigo primary with multi-hue labels, friendly radii
Leather Luxe
leather-luxe/all
Skeuomorphic premium fintech: stitched leather surfaces and glass overlays, warm tobacco palette, deep drop shadows with inset top highlights
Energetic
light-marketplace/all
High-contrast light theme with charcoal buttons and bold rounded corners for marketplaces
Linear Quality
linear-quality/all
Precision-crafted dark UI — purple accents, multi-layer shadows, engineering aesthetic
Linear
linear/all
Clean, minimal design for developer tools with dark theme and purple accents
Loam
loam/all
Warm paper workspace: cream ground, crisp white cards, flat near-black pill controls on a three-tier radius scale, and a single cool blue focus ring
Lumen Dark
lumen-dark/all
Dark theme built on depth & surfaces principle — three-tier layered shadows, inset highlights, warm amber accent
Marigold
marigold/all
Light recruiting platform: white surfaces, warm orange primary, soft shadows, friendly and approachable
Metal FX Chromatic
metal-fx-chromatic/all
Dark liquid-metal DS with near-black slate background, polished silver primary, pill buttons wrapped in an animated WebGL chromatic iridescent rim from the metal-fx package. 10px radius, Geist sans.
Metal FX Gold
metal-fx-gold/all
Dark liquid-metal DS with near-black slate background and silver pill surfaces, wrapped in an animated WebGL warm-gold rim from the metal-fx package. 10px radius, identical token base to silver and chromatic siblings.
Metal FX Silver
metal-fx-silver/all
Dark liquid-metal DS with near-black slate background and silver pill surfaces, wrapped in an animated WebGL cool-steel rim from the metal-fx package. 10px radius, shared neutral palette across the three metal-fx variants.
Midnight Glass
midnight-glass/all
Midnight blue glass — prismatic gradient borders, dual indigo-teal accents, frosted pills
Luxe
minimal-light/all
Light minimal design with black primary, no shadows, border-only cards, Geist Sans font, and 12px radius — clean luxury aesthetic
Monochrome Industrial
monochrome-industrial/all
Monochrome industrial — OLED black, dot-matrix Doto font, signal-light red accent, sharp corners
Synth
neon-vault/all
Dark crypto wallet: deep surfaces with soft elevation, hot magenta primary, modern fintech confidence
Neon
neon/all
Dark futuristic AI: near-black ground, neon-green primary and charts, modern grotesk
Neutral Monochrome
neutral-monochrome/all
Neutral monochromatic dark theme: pure white primary on near-black background, dark gray panels, 8px radius, no color accent
Notion
notion/all
Clean light theme with warm off-white background, near-black text, and understated minimal styling
Pebble
pebble/all
Light DS with lavender-grey background, pure black pill primary, vivid red accent. Neumorphic pebble shadows with glossy inset highlights, soft 20px radius.
Pillow Light
pillow-light/all
Light DS with pure white background, vivid cobalt primary, Inter sans, 14px pillowed pill radius. Buttons use inset top highlight, bottom shadow lip, primary-tinted lift glow on hover.
Platine
platine/all
Brushed-metal control panel on near-black: a silver gradient pill (inset highlights, a 1px rim, soft drop shadow) as the active material, recessed dark tracks, raised neutral bezels, fully-rounded pills, spring-driven indicators
Playdesk
playdesk/all
A soft desktop-operating-system kit with a dot-grid desk, brushed window chrome, glossy sky-blue pill controls and one wide float shadow
Sharp Light
precision-light/all
Light theme with charcoal near-black primary, precision multi-layer shadows with 1px outer ring, blue #335cff focus rings, Inter font, 10px radius
Precision
precision/all
Light CRM: crisp neutral grays, restrained indigo accent, sharp 6px radii, dense and exacting
Pulse
pulse/all
Dark analytics: deep cool-charcoal ground, electric-violet glow primary, vivid data surfaces
Putty
putty/all
Light claymorphic product: warm cream ground, pillowy 3D clay material, soft blue primary, generous rounding
Retro LCD
retro-lcd/all
Vintage digital-watch LCD: greenish-grey screen field with dark-olive 7-segment ink, monospace digits, recessed glass panels, and calculator-key buttons. Ships a live RetroLCDClock readout.
Riso
riso/all
Retro poster UI: warm paper ground, chunky ink borders with hard offset shadows, bold multi-color display type
Romanesque
romanesque/all
Light DS with warm cream background, deep Bordeaux pill primary, Newsreader serif headings, Inter body, 20px radii. Soft low-contrast shadows, classical manuscript feel.
Sienna
sienna/all
A crisp interface kit with white surfaces, vivid orange controls, dark typography, and compact tactile depth
Skeuo Next
skeuo-next/all
Light DS embodying Skeuomorphism 2.0: cool porcelain glass canvas, glossy graphite plastic primary, aqua glass accent. Squircle 22px radius, layered depth shadows, reactive plasticity (bendy press, depth-lift hover). Inter typeface.
Slate
slate/all
Light developer ops: pure-white panels on light gray, graphite-black controls, emerald status, sans plus mono type
Sonic Airy
sonic-airy/all
Light theme: pure white canvas with near-black primary, 12px radius, ultra-subtle shadows. Buttons fire an ethereal high-sine click via the wired sound provider.
Sonic Bright
sonic-bright/all
Dark theme: deep blue-leaning canvas with saturated electric-blue primary, 10px radius, multi-layer color-bloom shadows. Interactive primitives play sound via the wired sound provider.
Sonic Glassy
sonic-glassy/all
Dark theme: indigo canvas with translucent card and popover surfaces, cyan-leaning primary, 12px radius, inset-highlight shadows with cool glow. Sound provider wired into buttons.
Sonic Lofi
sonic-lofi/all
Dark theme: warm sepia-tinted canvas with muted tan primary, tight 8px radius, flat drop shadows with no inset highlights. Sound provider wired into buttons.
Sonic Metallic
sonic-metallic/all
Dark theme: cool charcoal canvas with high-lightness silver-steel primary, 8px radius, layered inset-highlight and ambient shadows that simulate brushed metal. Sound provider wired into buttons.
Sonic Organic
sonic-organic/all
Light cream canvas with muted sage green primary, 14px radius, soft brown-tinted shadows. Interactive elements trigger a brown-noise bandpass wood-tap knock.
Sonic Punchy
sonic-punchy/all
Dark near-black canvas with electric red-orange primary, sharp 6px radius, layered inset highlight shadows. Presses snap with a square-wave click.
Sonic Retro
sonic-retro/all
Dark CRT-style canvas with amber-yellow text and primary, sharp 4px radius, hard offset shadows mimicking pixel drop. 8-bit square-wave beeps with detune jitter on every interaction.
Sonic Warm
sonic-warm/all
Light cream canvas with soft coral primary, 14px radius, warm brown-tinted shadows. Interactions emit a gentle triangle-wave thump with soft attack.
Sorbet
sorbet/all
Light playful calendar: soft off-white ground, pastel multicolor palette, rounded-full controls, gentle shadows
Squircle
squircle/all
Frosted translucent light theme with squircle corners, backdrop-blur glass surfaces, specular highlights, and an iOS-blue accent
Stripe
stripe/all
Compact fintech dashboard with deep navy text, focused violet actions, and quiet layered surfaces
Supabase
supabase/all
Modern dark theme for developer platforms with green accents
Telemetry
telemetry/all
Industrial monitoring console: near-black panels, neon green, amber and red signal accents, glow-based elevation, monospace data type
Terminal
terminal/all
1987 CRT phosphor terminal: cyan text on a deep-blue screen, hairline scanlines with a corner vignette, monospace type, sharp 2px corners, and a glowing primary that reads like live phosphor.
TV Style
tv-style/all
Split-flap terminal board, flat dark tiles, Helvetica uppercase, amber primary, mechanical seam motif
Velour
velour/all
Luxury dark UI: opaque velvet gradient surfaces, champagne-ivory accents, inset highlights with deep ambient drops
Vercel
vercel/all
Stark dark theme with black background, white primary, and minimal monochrome aesthetic
Voltage
voltage/all
Dark fintech: near-black navy ground, high-contrast electric-yellow primary, bold money-forward cards
Select a component to view its code
Click on any item in the sidebar to get started
Select a component to view its information
Airbnb
airbnb/all
Warm, inviting design for travel and hospitality with coral accents
Apple
apple/all
Clean light theme with pill-shaped buttons, blue primary, SF Pro typography, and precise whitespace
Atelier
atelier/all
Light luxury dashboard: airy cream canvas, restrained forest-green accent, whisper-soft shadows, quiet editorial elegance
Beam Lib
beam-lib/all
Dark theme with rainbow border-beam accents powered by the official border-beam npm package — animated conic-gradient strokes and bloom layers
Bevel
bevel/all
Compact phone product: tight headlines, cards with no outline set apart by a soft shadow and a thin light edge, one deep blue accent
Brutalism
brutalism/all
High-contrast light UI with thick black borders, hard offset shadows, square geometry, safety-yellow actions, and production-grade accessibility.
Carbon
carbon/all
Dark DS with dark slate canvas, silver frosted-glass card and primary CTA pills (24px backdrop blur), chunky 24px radius. Photo-as-content automotive vibe, no chromatic accent.
Cashmere
cashmere/all
Warm friendly-fintech: cream paper ground, crisp white cards, flat near-black pill buttons, generous squircles, playful blue and orange accent pops
Cerulean
cerulean/all
Dark command palette: near-black stage, deep steel-blue accent on selected rows, monospace voice, precise 8px radii
Chrome Azure
chrome-azure/all
Dark DS with a near-black canvas and skeuomorphic brushed-chrome controls: a beveled metal rim frames a glossy specular track, and raised chrome knobs carry an inset top highlight with a soft drop shadow. Azure primary alloy; checkboxes, switches, radios and sliders fill with the same metal as the primary button. 12px radius.
Chrome Bronze
chrome-bronze/all
Dark DS with a near-black canvas and skeuomorphic brushed-chrome controls: a beveled metal rim frames a glossy specular track, and raised chrome knobs carry an inset top highlight with a soft drop shadow. Copper bronze primary alloy; checkboxes, switches, radios and sliders fill with the same metal as the primary button. 12px radius.
Chrome Crimson
chrome-crimson/all
Dark DS with a near-black canvas and skeuomorphic brushed-chrome controls: a beveled metal rim frames a glossy specular track, and raised chrome knobs carry an inset top highlight with a soft drop shadow. Crimson primary alloy; checkboxes, switches, radios and sliders fill with the same metal as the primary button. 12px radius.
Chrome Emerald
chrome-emerald/all
Dark DS with a near-black canvas and skeuomorphic brushed-chrome controls: a beveled metal rim frames a glossy specular track, and raised chrome knobs carry an inset top highlight with a soft drop shadow. Emerald primary alloy; checkboxes, switches, radios and sliders fill with the same metal as the primary button. 12px radius.
Chrome Gold
chrome-gold/all
Dark DS with a near-black canvas and skeuomorphic brushed-chrome controls: a beveled metal rim frames a glossy specular track, and raised chrome knobs carry an inset top highlight with a soft drop shadow. Gilded gold primary alloy; checkboxes, switches, radios and sliders fill with the same metal as the primary button. 12px radius.
Chrome Silver
chrome-silver/all
Dark DS with a near-black canvas and skeuomorphic brushed-chrome controls: a beveled metal rim frames a glossy specular track, and raised chrome knobs carry an inset top highlight with a soft drop shadow. Brushed-silver primary alloy; checkboxes, switches, radios and sliders fill with the same metal as the primary button. 12px radius.
Cinema
cinematic-dark/all
Cinematic dark theme with deep navy background, high contrast white text, and dramatic visual weight
Clicky
clicky/all
Light theme with raised, press-down buttons: bright-blue primary actions with a hairline rim, inset top highlight and a stacked drop shadow, plus synthesized haptic click sounds. Filled controls share the same tactile material
Cobalt
cobalt/all
Dark analytics: carved inset panels paired with soft outer lift, blue and cyan accents, medium radii, engineered depth
Cornflower
cornflower/all
Light fintech dashboard: cool gray canvas, crisp cornflower-blue primary, subtle elevation, clean data clarity
Column
corporate-fintech/all
Professional, trustworthy design for fintech with blue accents
Sharp Dark
dark-orange/all
Dark landing-page style with orange (#F05023) accents, 10px radius, and precise layered shadows
Editorial Dark
editorial-dark/all
Dark editorial theme with serif display type, flat no-shadow cards, generous radius, and content-first layout
Editorial Warm
editorial-warm/all
Light DS on warm cream canvas with frosted-glass pill buttons (backdrop blur 28px), deep terracotta primary used sparingly as link text and focus ring, 24px radius. Fraunces serif headings, Inter body, JetBrains Mono labels.
Ember
ember/all
Dark glass workspace: translucent charcoal panels, warm amber glow primary, soft material depth
Evergreen
evergreen/all
Dark analytics: deep forest-green canvas, vivid emerald primary, flat-clean depth, single-hue confidence
Figma
figma/all
Light theme with vibrant purple primary, clean white backgrounds, and design-tool precision
Firefly
firefly/all
Warm light system for consumer apps: a white page under warm paper surfaces, near-black ink and Hanken Grotesk, full-pill controls, and one glowing action, a yellow-green pill lit from within by an inner top highlight and a soft bloom that the checkbox, switch, radio and slider share. Borderless warm cards, white menus edged by a soft far shadow, an olive focus ring.
Folio
folio/all
Dark folder skeuomorphism: charcoal surfaces with crisp top-edge rim highlights, deep soft shadows, fractal grain, and a warm paper-amber accent
Frosted Glass
frosted-glass/all
Frosted glass with a violet accent: heavy backdrop blur, specular rim highlights, chromatic edge fringe, soft glow, large rounded pills
Glassmorphic Dark
glassmorphic-dark/all
Transparent glass panels with blur, frosted surfaces on dark backgrounds for layered depth
Graphite
graphite/all
Soft recessed dark: warm monochrome greys, gentle inset wells, sliding gradient pills, hairline white highlights, system sans typography
Halo
halo/all
Translucent dark panels with a soft halo glow, bright-blue raised controls and a warm amber signature accent for a polished, depth-lit feel
Haptic
haptic/all
Dark theme: cool iron-charcoal canvas with a brushed-steel primary, 8px radius, layered inset-highlight and ambient shadows. Every interactive primitive fires a Web Vibration API tap via web-haptics, so each press lands with a physical detent on supported mobile devices.
Heyclicky
heyclicky/all
Desktop-toy landing page: dotted grey paper ground, macOS window chrome with a silver title bar, glossy full-round pill buttons in system blue, liquid-glass panels with a white inside rim, lowercase wide-tracked labels
Nocturne
hyperline/all
Premium dark billing SaaS: deep purple gradient backdrop, layered soft shadows for depth, raised cyan controls with a gold signature accent, sharp-ish radii
Inset Dark
inset-dark/all
Tactile dark — recessed tracks, gradient pills with hairline borders, monochrome, SF Pro typography
Instrument
instrument/all
Dark metrics console: nested-panel shadow hierarchy, machined gold controls, dense technical data feel
Interior
interior/all
A three-material kit: a warm bezel, lifted white panels and recessed wells, warm ink shadows, square-cornered controls on a nested radii scale, and one accent blue spent only on interaction
Lane
lane/all
Light project board: off-white lanes, white lifted cards, indigo primary with multi-hue labels, friendly radii
Leather Luxe
leather-luxe/all
Skeuomorphic premium fintech: stitched leather surfaces and glass overlays, warm tobacco palette, deep drop shadows with inset top highlights
Energetic
light-marketplace/all
High-contrast light theme with charcoal buttons and bold rounded corners for marketplaces
Linear Quality
linear-quality/all
Precision-crafted dark UI — purple accents, multi-layer shadows, engineering aesthetic
Linear
linear/all
Clean, minimal design for developer tools with dark theme and purple accents
Loam
loam/all
Warm paper workspace: cream ground, crisp white cards, flat near-black pill controls on a three-tier radius scale, and a single cool blue focus ring
Lumen Dark
lumen-dark/all
Dark theme built on depth & surfaces principle — three-tier layered shadows, inset highlights, warm amber accent
Marigold
marigold/all
Light recruiting platform: white surfaces, warm orange primary, soft shadows, friendly and approachable
Metal FX Chromatic
metal-fx-chromatic/all
Dark liquid-metal DS with near-black slate background, polished silver primary, pill buttons wrapped in an animated WebGL chromatic iridescent rim from the metal-fx package. 10px radius, Geist sans.
Metal FX Gold
metal-fx-gold/all
Dark liquid-metal DS with near-black slate background and silver pill surfaces, wrapped in an animated WebGL warm-gold rim from the metal-fx package. 10px radius, identical token base to silver and chromatic siblings.
Metal FX Silver
metal-fx-silver/all
Dark liquid-metal DS with near-black slate background and silver pill surfaces, wrapped in an animated WebGL cool-steel rim from the metal-fx package. 10px radius, shared neutral palette across the three metal-fx variants.
Midnight Glass
midnight-glass/all
Midnight blue glass — prismatic gradient borders, dual indigo-teal accents, frosted pills
Luxe
minimal-light/all
Light minimal design with black primary, no shadows, border-only cards, Geist Sans font, and 12px radius — clean luxury aesthetic
Monochrome Industrial
monochrome-industrial/all
Monochrome industrial — OLED black, dot-matrix Doto font, signal-light red accent, sharp corners
Synth
neon-vault/all
Dark crypto wallet: deep surfaces with soft elevation, hot magenta primary, modern fintech confidence
Neon
neon/all
Dark futuristic AI: near-black ground, neon-green primary and charts, modern grotesk
Neutral Monochrome
neutral-monochrome/all
Neutral monochromatic dark theme: pure white primary on near-black background, dark gray panels, 8px radius, no color accent
Notion
notion/all
Clean light theme with warm off-white background, near-black text, and understated minimal styling
Pebble
pebble/all
Light DS with lavender-grey background, pure black pill primary, vivid red accent. Neumorphic pebble shadows with glossy inset highlights, soft 20px radius.
Pillow Light
pillow-light/all
Light DS with pure white background, vivid cobalt primary, Inter sans, 14px pillowed pill radius. Buttons use inset top highlight, bottom shadow lip, primary-tinted lift glow on hover.
Platine
platine/all
Brushed-metal control panel on near-black: a silver gradient pill (inset highlights, a 1px rim, soft drop shadow) as the active material, recessed dark tracks, raised neutral bezels, fully-rounded pills, spring-driven indicators
Playdesk
playdesk/all
A soft desktop-operating-system kit with a dot-grid desk, brushed window chrome, glossy sky-blue pill controls and one wide float shadow
Sharp Light
precision-light/all
Light theme with charcoal near-black primary, precision multi-layer shadows with 1px outer ring, blue #335cff focus rings, Inter font, 10px radius
Precision
precision/all
Light CRM: crisp neutral grays, restrained indigo accent, sharp 6px radii, dense and exacting
Pulse
pulse/all
Dark analytics: deep cool-charcoal ground, electric-violet glow primary, vivid data surfaces
Putty
putty/all
Light claymorphic product: warm cream ground, pillowy 3D clay material, soft blue primary, generous rounding
Retro LCD
retro-lcd/all
Vintage digital-watch LCD: greenish-grey screen field with dark-olive 7-segment ink, monospace digits, recessed glass panels, and calculator-key buttons. Ships a live RetroLCDClock readout.
Riso
riso/all
Retro poster UI: warm paper ground, chunky ink borders with hard offset shadows, bold multi-color display type
Romanesque
romanesque/all
Light DS with warm cream background, deep Bordeaux pill primary, Newsreader serif headings, Inter body, 20px radii. Soft low-contrast shadows, classical manuscript feel.
Sienna
sienna/all
A crisp interface kit with white surfaces, vivid orange controls, dark typography, and compact tactile depth
Skeuo Next
skeuo-next/all
Light DS embodying Skeuomorphism 2.0: cool porcelain glass canvas, glossy graphite plastic primary, aqua glass accent. Squircle 22px radius, layered depth shadows, reactive plasticity (bendy press, depth-lift hover). Inter typeface.
Slate
slate/all
Light developer ops: pure-white panels on light gray, graphite-black controls, emerald status, sans plus mono type
Sonic Airy
sonic-airy/all
Light theme: pure white canvas with near-black primary, 12px radius, ultra-subtle shadows. Buttons fire an ethereal high-sine click via the wired sound provider.
Sonic Bright
sonic-bright/all
Dark theme: deep blue-leaning canvas with saturated electric-blue primary, 10px radius, multi-layer color-bloom shadows. Interactive primitives play sound via the wired sound provider.
Sonic Glassy
sonic-glassy/all
Dark theme: indigo canvas with translucent card and popover surfaces, cyan-leaning primary, 12px radius, inset-highlight shadows with cool glow. Sound provider wired into buttons.
Sonic Lofi
sonic-lofi/all
Dark theme: warm sepia-tinted canvas with muted tan primary, tight 8px radius, flat drop shadows with no inset highlights. Sound provider wired into buttons.
Sonic Metallic
sonic-metallic/all
Dark theme: cool charcoal canvas with high-lightness silver-steel primary, 8px radius, layered inset-highlight and ambient shadows that simulate brushed metal. Sound provider wired into buttons.
Sonic Organic
sonic-organic/all
Light cream canvas with muted sage green primary, 14px radius, soft brown-tinted shadows. Interactive elements trigger a brown-noise bandpass wood-tap knock.
Sonic Punchy
sonic-punchy/all
Dark near-black canvas with electric red-orange primary, sharp 6px radius, layered inset highlight shadows. Presses snap with a square-wave click.
Sonic Retro
sonic-retro/all
Dark CRT-style canvas with amber-yellow text and primary, sharp 4px radius, hard offset shadows mimicking pixel drop. 8-bit square-wave beeps with detune jitter on every interaction.
Sonic Warm
sonic-warm/all
Light cream canvas with soft coral primary, 14px radius, warm brown-tinted shadows. Interactions emit a gentle triangle-wave thump with soft attack.
Sorbet
sorbet/all
Light playful calendar: soft off-white ground, pastel multicolor palette, rounded-full controls, gentle shadows
Squircle
squircle/all
Frosted translucent light theme with squircle corners, backdrop-blur glass surfaces, specular highlights, and an iOS-blue accent
Stripe
stripe/all
Compact fintech dashboard with deep navy text, focused violet actions, and quiet layered surfaces
Supabase
supabase/all
Modern dark theme for developer platforms with green accents
Telemetry
telemetry/all
Industrial monitoring console: near-black panels, neon green, amber and red signal accents, glow-based elevation, monospace data type
Terminal
terminal/all
1987 CRT phosphor terminal: cyan text on a deep-blue screen, hairline scanlines with a corner vignette, monospace type, sharp 2px corners, and a glowing primary that reads like live phosphor.
TV Style
tv-style/all
Split-flap terminal board, flat dark tiles, Helvetica uppercase, amber primary, mechanical seam motif
Velour
velour/all
Luxury dark UI: opaque velvet gradient surfaces, champagne-ivory accents, inset highlights with deep ambient drops
Vercel
vercel/all
Stark dark theme with black background, white primary, and minimal monochrome aesthetic
Voltage
voltage/all
Dark fintech: near-black navy ground, high-contrast electric-yellow primary, bold money-forward cards
Select a component to view its code
Click on any item in the sidebar to get started
Select a component to view its information