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.
Badge
DefaultSecondarySuccessWarningDangerOutlineGlass
SmallMediumLarge
Avatar
AB
CD
EF
GH
IJ
A1
B2
C3
D4
+2
Input & Textarea
This field is required
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>Modal
Alert
New update available
Version 2.0 is ready. Check the changelog for what's new.
Payment successful
Your subscription has been activated. Welcome to Pro!
Storage almost full
You're using 85% of your storage quota.
Connection failed
Unable to reach the server. Please check your network.
Skeleton
Spinner & Progress
Storage30%
CPU65%
Memory85%
Disk95%
Tooltip
Dropdown
Table
| User | Role | Status | Plan | |
|---|---|---|---|---|
Al | alice@example.com | Admin | Active | Pro |
Bo | bob@example.com | Editor | Active | Basic |
Ca | carol@example.com | Viewer | Inactive | Free |
Da | dan@example.com | Editor | Active | Pro |
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%