Theme Showcase

Back to Home

Base Colors

Background

bg-background

Foreground

text-foreground

Component Colors

Card

bg-card

Popover

bg-popover

Primary Colors

Primary

bg-primary

Primary Foreground

text-primary-foreground

Secondary Colors

Secondary

bg-secondary

Secondary Foreground

text-secondary-foreground

Accent Colors

Accent

bg-accent

Accent Foreground

text-accent-foreground

Muted Colors

Muted

bg-muted

Muted Foreground

text-muted-foreground

Destructive Colors

Destructive

bg-destructive

Destructive Foreground

text-destructive-foreground

Border & Input

Border

border-border

Ring Color

Ring

ring-ring

Component Examples

Buttons

Cards

Standard Card
Primary Card
Muted Card

Text Styles

Default text uses text-foreground

Secondary text uses text-muted-foreground

Primary text uses text-primary

Secondary colored text uses text-secondary

Accent text uses text-accent

Warning text uses text-destructive

Text on primary background uses text-primary-foreground

Text on secondary background uses text-secondary-foreground

Form Elements