Typography

Headings

H1 / Display

H2 / Page Title

H3 / Section Title

H4 / Subsection

H5 / Heading
H6 / Eyebrow
Text Styles

Body / Default text size and leading.

Muted / Secondary text, captions, helper copy.

Links: Example link

Code: const x = 'token'

Colors

Background
background
Text
foreground
Foreground
foreground
Text
background
Card
card
Text
card-foreground
Popover
popover
Text
popover-foreground
Primary
primary
Text
primary-foreground
Secondary
secondary
Text
secondary-foreground
Muted
muted
Text
muted-foreground
Accent
accent
Text
accent-foreground
Destructive
destructive
Text
destructive-foreground
Border
border
Text
foreground
Ring
ring
Text
background

Spacing

Scale
Token Example Class
0
p-0
1
p-1
2
p-2
3
p-3
4
p-4
6
p-6
8
p-8
10
p-10
12
p-12
16
p-16
20
p-20
24
p-24
32
p-32

Buttons

Variants
Link Button
Sizes & States

Forms

Inputs

We’ll never share your email.

States

Please enter a valid value.

Cards

Simple Card

Use cards to group related content and actions.

Card with Actions
Quarterly Report
Updated 2 days ago

Badges & Alerts

Badges
Default
Secondary
Outline
Destructive
Alerts

Accordion & Dialog

Accordion

Zapless streams your Stripe data into your email platform so you can trigger and personalize campaigns.
Dialog

Toasts

Examples