Your AI becomes
a design engineer.

AI-built apps often look generic. Give your AI a distinct style and real design principles.

+Enterto submit

One-click install for your favorite AI tools

Apple

light

Clean light theme with pill-shaped buttons, blue primary, SF Pro typography, and precise whitespace

Beam Lib

dark

Dark theme with rainbow border-beam accents powered by the official border-beam npm package — animated conic-gradient strokes and bloom layers

Carbon

dark

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.

Chrome Azure

dark

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

dark

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

dark

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

dark

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

dark

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

dark

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

dark

Cinematic dark theme with deep navy background, high contrast white text, and dramatic visual weight

Clicky

light

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

Column

light

Professional, trustworthy design for fintech with blue accents

Dynamic

dark

Modern dark-theme with pill-shaped components and vibrant blue primary

Editorial Warm

light

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.

Energetic

light

High-contrast light theme with charcoal buttons and bold rounded corners for marketplaces

Figma

light

Light theme with vibrant purple primary, clean white backgrounds, and design-tool precision

Folio

dark

Dark folder skeuomorphism: charcoal surfaces with crisp top-edge rim highlights, deep soft shadows, fractal grain, and a warm paper-amber accent

Frosted Glass

dark

Frosted glass with a violet accent: heavy backdrop blur, specular rim highlights, chromatic edge fringe, soft glow, large rounded pills

Glassmorphic Dark

dark

Transparent glass panels with blur, frosted surfaces on dark backgrounds for layered depth

Graphite

dark

Soft recessed dark: warm monochrome greys, gentle inset wells, sliding gradient pills, hairline white highlights, system sans typography

Halo

dark

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

dark

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.

Hyperline

dark

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

dark

Tactile dark — recessed tracks, gradient pills with hairline borders, monochrome, SF Pro typography

Linear

dark

Clean, minimal design for developer tools with dark theme and purple accents

Linear Quality

dark

Precision-crafted dark UI — purple accents, multi-layer shadows, engineering aesthetic

Lumen Dark

dark

Dark theme built on depth & surfaces principle — three-tier layered shadows, inset highlights, warm amber accent

Metal FX Chromatic

dark

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

dark

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

dark

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

dark

Midnight blue glass — prismatic gradient borders, dual indigo-teal accents, frosted pills

Monochrome Industrial

dark

Monochrome industrial — OLED black, dot-matrix Doto font, signal-light red accent, sharp corners

Pebble

light

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

light

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

dark

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

Retro LCD

light

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.

Romanesque

light

Light DS with warm cream background, deep Bordeaux pill primary, Newsreader serif headings, Inter body, 20px radii. Soft low-contrast shadows, classical manuscript feel.

Sharp Dark

dark

Dark landing-page style with orange (#F05023) accents, 10px radius, and precise layered shadows

Sharp Light

light

Light theme with charcoal near-black primary, precision multi-layer shadows with 1px outer ring, blue #335cff focus rings, Inter font, 10px radius

Skeuo Next

light

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.

Sonic Airy

light

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

dark

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

dark

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

dark

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

dark

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 Punchy

dark

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

dark

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.

Squircle

light

Frosted translucent light theme with squircle corners, backdrop-blur glass surfaces, specular highlights, and an iOS-blue accent

Stripe

light

Light professional theme with deep navy text, indigo-purple primary, and financial-grade polish

Supabase

dark

Modern dark theme for developer platforms with green accents

TV Style

dark

Split-flap terminal board, flat dark tiles, Helvetica uppercase, amber primary, mechanical seam motif

Terminal

dark

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.

Apple

light

Clean light theme with pill-shaped buttons, blue primary, SF Pro typography, and precise whitespace

Beam Lib

dark

Dark theme with rainbow border-beam accents powered by the official border-beam npm package — animated conic-gradient strokes and bloom layers

Carbon

dark

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.

Chrome Azure

dark

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

dark

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

dark

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

dark

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

dark

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

dark

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

dark

Cinematic dark theme with deep navy background, high contrast white text, and dramatic visual weight

Clicky

light

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

Column

light

Professional, trustworthy design for fintech with blue accents

Dynamic

dark

Modern dark-theme with pill-shaped components and vibrant blue primary

Editorial Warm

light

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.

Energetic

light

High-contrast light theme with charcoal buttons and bold rounded corners for marketplaces

Figma

light

Light theme with vibrant purple primary, clean white backgrounds, and design-tool precision

Folio

dark

Dark folder skeuomorphism: charcoal surfaces with crisp top-edge rim highlights, deep soft shadows, fractal grain, and a warm paper-amber accent

Frosted Glass

dark

Frosted glass with a violet accent: heavy backdrop blur, specular rim highlights, chromatic edge fringe, soft glow, large rounded pills

Glassmorphic Dark

dark

Transparent glass panels with blur, frosted surfaces on dark backgrounds for layered depth

Graphite

dark

Soft recessed dark: warm monochrome greys, gentle inset wells, sliding gradient pills, hairline white highlights, system sans typography

Halo

dark

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

dark

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.

Hyperline

dark

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

dark

Tactile dark — recessed tracks, gradient pills with hairline borders, monochrome, SF Pro typography

Linear

dark

Clean, minimal design for developer tools with dark theme and purple accents

Linear Quality

dark

Precision-crafted dark UI — purple accents, multi-layer shadows, engineering aesthetic

Lumen Dark

dark

Dark theme built on depth & surfaces principle — three-tier layered shadows, inset highlights, warm amber accent

Metal FX Chromatic

dark

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

dark

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

dark

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

dark

Midnight blue glass — prismatic gradient borders, dual indigo-teal accents, frosted pills

Monochrome Industrial

dark

Monochrome industrial — OLED black, dot-matrix Doto font, signal-light red accent, sharp corners

Pebble

light

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

light

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

dark

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

Retro LCD

light

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.

Romanesque

light

Light DS with warm cream background, deep Bordeaux pill primary, Newsreader serif headings, Inter body, 20px radii. Soft low-contrast shadows, classical manuscript feel.

Sharp Dark

dark

Dark landing-page style with orange (#F05023) accents, 10px radius, and precise layered shadows

Sharp Light

light

Light theme with charcoal near-black primary, precision multi-layer shadows with 1px outer ring, blue #335cff focus rings, Inter font, 10px radius

Skeuo Next

light

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.

Sonic Airy

light

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

dark

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

dark

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

dark

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

dark

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 Punchy

dark

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

dark

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.

Squircle

light

Frosted translucent light theme with squircle corners, backdrop-blur glass surfaces, specular highlights, and an iOS-blue accent

Stripe

light

Light professional theme with deep navy text, indigo-purple primary, and financial-grade polish

Supabase

dark

Modern dark theme for developer platforms with green accents

TV Style

dark

Split-flap terminal board, flat dark tiles, Helvetica uppercase, amber primary, mechanical seam motif

Terminal

dark

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.

Play with the templates

Discover designs adapted to any of your use cases.

Treasury

Snapshot for May 2026

Total balance

$284,931.50

+4.2%vs last 30d

Revenue (30d)

$48,200.00

+12.6%vs last 30d

Expenses (30d)

$12,140.80

-3.1%vs last 30d

Cash flow

Net inflow, last 30 days

30d
90d

Transactions

Recent activity

DateMerchantCategoryStatusAmount
May 22Stripe payoutPayout
completed
+$12,400.00
May 22AWSInfra
completed
-$842.10
May 21Mercury wireTransfer
pending
+$5,000.00
May 21FigmaSaaS
completed
-$45.00
May 20Acme Co. invoiceInvoice
completed
+$3,200.00
May 20LinearSaaS
completed
-$96.00
May 19NotionSaaS
completed
-$60.00
May 19Refund: client.ioRefund
completed
-$420.00

Want more? See every template

Install in one prompt

claude mcp add --scope user better-design --transport http https://better-design.com/api/mcp --header "Authorization: Bearer <YOUR_API_KEY>"

A complete design system

Stop building UI from scratch. 87 components, design tokens, and styles ready to scaffold into your codebase.

components/87 files
accordion.tsx
alert.tsx
alert-dialog.tsx
aspect-ratio.tsx
avatar.tsx
avatar-group.tsx
badge.tsx
breadcrumb.tsx
button.tsx
button-group.tsx
calendar.tsx
card.tsx
carousel.tsx
chart.tsx
checkbox.tsx
code-block.tsx
code-tabs.tsx
collapsible.tsx
color-swatch.tsx
combobox.tsx
command.tsx
context-menu.tsx
copy-button.tsx
cursor.tsx
data-range-picker.tsx
data-table.tsx
date-picker.tsx
dialog.tsx
drawer.tsx
dropdown-menu.tsx
empty-state.tsx
empty.tsx
field.tsx
file-input.tsx
form.tsx
hover-card.tsx
icon-button.tsx
inline-edit.tsx
input.tsx
input-group.tsx
input-otp.tsx
item.tsx
kbd.tsx
label.tsx
mega-menu.tsx
menubar.tsx
multi-select.tsx
native-select.tsx
navigation-menu.tsx
notification.tsx
number-input.tsx
pagination.tsx
password-input.tsx
phone-input.tsx
popover.tsx
progress.tsx
radio-group.tsx
rating.tsx
resizable.tsx
scroll-area.tsx
search-input.tsx
section-header.tsx
select.tsx
separator.tsx
sheet.tsx
sidebar.tsx
skeleton.tsx
slider.tsx
sonner.tsx
spinner.tsx
stat-card.tsx
status-indicator.tsx
steps.tsx
switch.tsx
table.tsx
tabs.tsx
tag-input.tsx
textarea.tsx
time-picker.tsx
timeline.tsx
toast.tsx
toaster.tsx
toggle.tsx
toggle-group.tsx
tooltip.tsx
typography.tsx
use-toast.ts
globals.css

UX/UI principles built in

Your AI loads the right design guidelines before writing any UI code.

You edit button.tsx
AI loads relevant principles
InteractionsDepth & SurfacesAnimationColor
Output follows real design guidelines

And many more principles

Spacing & LayoutTypographyVisual HierarchyFormsImagesPolish