Data Display Components
Cards, badges, avatars, tables, and data visualization
Card
Container with header, content, and footer sections
Simple Card
With header and content
This is a basic card with just content. Cards provide a flexible container for grouping related information.
Card with Footer
All sections included
This card includes a footer section for actions or metadata.
Badge
Labels and tags in various styles
Variants
Default
Secondary
Destructive
Outline
Use Cases
New
Beta
v2.0.1
Deprecated
Avatar
User profile images with fallback support
With Images
CNVCNX
Fallback Initials
JDABMK
Progress
Visual indicator for loading and progress states
Uploading file...13%
Storage used75%
Completed100%
Skeleton
Loading placeholders for content
Table
Data tables with headers and rows
| Invoice | Status | Method | Amount |
|---|---|---|---|
| INV001 | Paid | Credit Card | $250.00 |
| INV002 | Pending | PayPal | $150.00 |
| INV003 | Paid | Bank Transfer | $350.00 |
| INV004 | Overdue | Credit Card | $450.00 |
Stat Card
Display metrics and statistics with trends
Total Users
2,345
+12.5% from last monthActive subscribers
New Signups
+573
+8.2%This month
Revenue
$45,231
-4.3%Last 30 days
Uptime
89.5%
0%This week
Status Badge
Status indicators with color-coded states
All Statuses
ActiveInactivePendingErrorWarningInfo
Without Dots
OnlineOfflineMaintenance
Use Cases
Server StatusRunning
DatabaseHigh Load
APIDown
Separator
Visual dividers for content sections
Horizontal Separator
Content above
Content below
Vertical Separator
Section 1
Section 2
Section 3
In Context
Introduction
This is the introduction paragraph.
Main Content
This is the main content section.
Conclusion
This is the conclusion section.