Saasflare UI · Component Catalog

Every export, every variant — ultra compact, grouped by family.

palette
surface
radius
icon weight
mode

Component overrides · prop > provider default

surface · Button · Badge · Card · Input
inherit (flat)
BadgeSoft
Card (inherits flat)
surface=flat
BadgeSoft
Card surface=flat
surface=glass
BadgeSoft
Card surface=glass
surface=clay
BadgeSoft
Card surface=clay
radius · Button · Badge · Card · Input · Avatar
inherit (soft)
BadgeSoft
Card
CM
radius=sharp
BadgeSoft
Card
CM
radius=soft
BadgeSoft
Card
CM
radius=rounded
BadgeSoft
Card
CM
radius=pill
BadgeSoft
Card
CM
animated · hover/tap to feel the difference
inherit (true)
Badge
Card
animated=true
Badge
Card
animated=false
Badge
Card
iconWeight · raw glyphs + Button propagation
inherit (duotone)
iconWeight=regular
iconWeight=bold
iconWeight=fill
iconWeight=duotone

Buttons · variants × intents

variant=solid
variant=soft
variant=outline
variant=ghost
variant=link
variant=shadow

Buttons · sizes & icon sizes

size
icon sizes
states
StatefulButton

ButtonGroup

horizontal
with text + separator
https://

Badges · variants × intents

variant=solid
primaryneutralsuccesswarningdangerinfo
variant=soft
primaryneutralsuccesswarningdangerinfo
variant=outline
primaryneutralsuccesswarningdangerinfo

Alerts · intents

Avatar · sizes, group, badge, UserAvatar

sizes
CMCMCM
badge + fallback
JDABYZ
AvatarGroup
ABC
+4
UserAvatar sizes
CMCMCM

Inputs · text, textarea, search, group

Input
Input · invalid
Input · disabled
Textarea
SearchField
SearchField · loading
InputGroup
NativeSelect

Toggles · checkbox, switch, radio, toggle

Checkbox
Switch
RadioGroup
Toggle / ToggleGroup

Progress · spinner · slider · skeleton

Progress
Slider
Spinner
Skeleton

Select · DropdownMenu · Combobox

Select
DropdownMenu
Combobox

Overlays · Dialog · AlertDialog · Sheet · Popover · HoverCard · Tooltip

Dialog
AlertDialog
Sheet
Popover
HoverCard
Tooltip

Navigation · Tabs · Breadcrumb · Pagination

Tabs
Overview pane.
Breadcrumb
Pagination

Accordion · Item · Field · Form

Accordion

Body of item one.

Item
Two-factor auth

Enabled via authenticator app.

Field group

We never share your email.

Kbd
⌘⇧K
Ctrl+S

Data · Table · ScrollArea · Separator

Table
Recent invoices.
InvoiceStatusAmount
INV-001Paid$120.00
INV-002Pending$240.00
INV-003Failed$60.00
ScrollArea
Row 1 — lorem ipsum dolor sit amet.
Row 2 — lorem ipsum dolor sit amet.
Row 3 — lorem ipsum dolor sit amet.
Row 4 — lorem ipsum dolor sit amet.
Row 5 — lorem ipsum dolor sit amet.
Row 6 — lorem ipsum dolor sit amet.
Row 7 — lorem ipsum dolor sit amet.
Row 8 — lorem ipsum dolor sit amet.
Row 9 — lorem ipsum dolor sit amet.
Row 10 — lorem ipsum dolor sit amet.
Row 11 — lorem ipsum dolor sit amet.
Row 12 — lorem ipsum dolor sit amet.
Separator
A
B
C

Composed · MetricCard · PricingCard · SectionCard · Card

Revenue
$48,200↑ 8.2%
Churn
1.4%↓ 0.3%
Active users
12,304→ 0%
Plan
Your current subscription.
Active
Pro tier · billed monthly.

Notifications

Choose where you receive updates.

Email
SMS
Recommended

Pro

For growing teams

$29/month
  • Unlimited projects
  • Priority support
  • Advanced analytics

Empty states · Empty · EmptyState

EmptyState

No projects

Create your first project to begin.

Empty (composable)
Inbox is clear

Nothing to see here right now.

DataToolbar

search + filters + actions

Social Auth · brand-locked icons

Clay surface · pillow finish across palette + light/dark

Card · surface=clay
Pro AI chat

You stop rebuilding the same UI decisions over and over. Clay gives you a soft 3D pillow finish without the glass-blur cost.

Card + Badge + Input · surface=clay
Shopping experienceNew
$1350 · Knitted sneakers
Intent variants · surface=clay
Pillow shadow stack

Toggle palette + theme in header → shadow tint follows --accent.

Theme toggles

ThemeModeToggle
ThemeModeMultiToggle · appearance × radius
icon
icon-inherit
button