Data Display
Components for presenting data in lists, tables, cards, and more.
Table
Data Table
A responsive table component for displaying tabular data.
| User | Role | Status | Last Active |
|---|---|---|---|
| Alice Johnson | Admin | Active | 2 mins ago |
| Bob Smith | Editor | Away | 1 hour ago |
| Carol Williams | Viewer | Offline | 2 days ago |
Cards
Stat Card
Displays a metric with a label and trend.
+20.1% from last month
+180.1% from last month
Avatar
Avatar
An image element with a fallback for representing the user.
Lists & Timelines
User List
A list of users with details.
Olivia Martin
olivia.martin@email.com
Jackson Lee
jackson.lee@email.com
Isabella Nguyen
isabella.nguyen@email.com
Timeline
A visual representation of events in chronological order.
Deployment Successful
The latest version v2.4.0 has been deployed to production.
10:42 AM
Build Started
Triggered by commit a1b2c3d
10:38 AM
Pull Request Merged
PR #42 merged by @johndoe
10:30 AM
Code Block
Code Block
Displays code snippets with syntax highlighting.
console.log(greeting);
Data Detail Card
Structured detail views with collapsible sections, copyable fields, and multi-column layouts.
User Profile Detail
Detailed record view with collapsible sections
Jean Martin
Beneficiary · Active
Personal Info
Full name
Phone
Location
Employment
Company
Role
Start date
Salary
Collapsed Section
Section collapsed by default
Platform Configuration
API Settings
Base URL
API Key
Rate limit
Advanced
Photo Gallery
Responsive image grid with lightbox viewer, keyboard navigation, and zoom support.
Gallery with Lightbox
Click any image to open the full-screen viewer
Generic Widget
Container widget with title, actions, fullscreen expand, and download capabilities.
Widget with Actions
Expandable widget wrapper with built-in controls
Revenue Overview
Last 30 days
Widget Ghost Variant
Minimal widget without border