Design System

Complete UI component library and design tokens

Color Palette

Semantic color tokens following shadcn/ui design system

background

Main background color

bg-background

foreground

Main text color

bg-foreground

card

Card background

bg-card

card foreground

Card text color

bg-card-foreground

popover

Popover background

bg-popover

popover foreground

Popover text

bg-popover-foreground

primary

Primary brand color

bg-primary

primary foreground

Primary text

bg-primary-foreground

secondary

Secondary color

bg-secondary

secondary foreground

Secondary text

bg-secondary-foreground

muted

Muted background

bg-muted

muted foreground

Muted text

bg-muted-foreground

accent

Accent color

bg-accent

accent foreground

Accent text

bg-accent-foreground

destructive

Error/danger color

bg-destructive

destructive foreground

Error text

bg-destructive-foreground

border

Border color

bg-border

input

Input background

bg-input

ring

Focus ring color

bg-ring

Typography

Text styles and hierarchy using global CSS definitions

H1text-4xl font-extrabold tracking-tight

The quick brown fox jumps over the lazy dog

H2text-3xl font-semibold tracking-tight

The quick brown fox jumps over the lazy dog

H3text-2xl font-semibold tracking-tight

The quick brown fox jumps over the lazy dog

H4text-xl font-semibold tracking-tight

The quick brown fox jumps over the lazy dog

H5text-lg font-semibold tracking-tight
The quick brown fox jumps over the lazy dog
H6text-base font-semibold tracking-tight
The quick brown fox jumps over the lazy dog
Ptext-base leading-7

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis accusamus mollitia fuga alias nemo, tenetur minima totam eaque quas culpa praesentium explicabo tempora eos. Animi voluptatum nemo sed reprehenderit repellendus? Dolorem facere quod inventore.

SMALLtext-muted-foreground text-sm leading-none
Small text for captions and fine print details

Lists

List styles using global CSS definitions

Unordered List

ULmy-6 ml-6 list-disc [>li]:mt-2
  • First item with longer description that wraps to multiple lines to show proper spacing
  • Second item in the list
  • Third item to complete the set

Ordered List

OLSimilar styling to ul
  1. First step in the process
  2. Second step to follow
  3. Final step to complete

Buttons

All available button variants and states from shadcn/ui

Default

Destructive

Outline

Secondary

Ghost

Link

Muted

Inputs

Input field variants with icons, loading states, and default styling.

Default

Left Icon

Right Icon

Loading

Left + Right Icons

Disabled

Select

Dropdown menu using the Select component from shadcn/ui

Default Select

Tabs

Tabbed interface using shadcn/ui Tabs component

Make changes to your account here.
Make changes to your account here.

Modals

Dialog and AlertDialog components from shadcn/ui

Dialog

AlertDialog

Dropdown Menu

Dropdown menu component from shadcn/ui with different item types.

Sheet

Sheet component with different opening directions.