Sassify
Phase 222 Components

Component Library

Production-ready UI components built with CVA, Framer Motion, and Tailwind CSS. Dark/light mode, fully accessible, and designed for modern SaaS products.

Button

Badge

DefaultSecondarySuccessWarningDangerOutlineGlass
SmallMediumLarge

Avatar

AB
CD
EF
GH
IJ
User avatar
A1
B2
C3
D4
+2

Input & Textarea

Must be at least 8 characters

Max 500 characters

Checkbox & Switch

Card

Default Card

Standard card with border

Content goes here with any elements you need.

Glass Card

Frosted glass effect

Perfect for hero sections and overlays.

Elevated Card

With drop shadow

Completion72%

Tabs

Overview content — metrics, summaries, quick actions.

<Tabs defaultValue="tab1" variant="underline">
  <TabsList>
    <TabsTrigger value="tab1">Tab 1</TabsTrigger>
  </TabsList>
  <TabsContent value="tab1">Content</TabsContent>
</Tabs>

Alert

Skeleton

Spinner & Progress

Storage30%
CPU65%
Memory85%
Disk95%

Tooltip

Table

UserEmailRoleStatusPlan
Al
Alice Johnson
alice@example.comAdminActivePro
Bo
Bob Smith
bob@example.comEditorActiveBasic
Ca
Carol White
carol@example.comViewerInactiveFree
Da
Dan Brown
dan@example.comEditorActivePro

Charts

Revenue

Monthly revenue growth

4200
Jan
5800
Feb
5100
Mar
7400
Apr
8900
May
11200
Jun

Active Users

Daily active users trend

MonTueWedThuFriSatSun

Traffic Sources

Where your users come from

12.4kTotal
Organic45%
Social28%
Direct18%
Referral9%

Command Palette