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.
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
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
Active Sessions
Avatars
Sizes & shapes
Initial labels, icons, and images at preset or custom sizes.
Status badges
Optional indicator dot in any corner.
AvatarGroup with overflow
Stack avatars; overflow shows +N.
+2Media
Galleria
Main image with thumbnail strip and caption overlay.
Mountains
Sunrise over the Alps.
Image preview lightbox
Click the image to open a zoomable lightbox; downloadable variant included.
Carousel
Generic carousel with autoplay and circular looping.
Aurora
Cool blue
Lavender
Soft purple
Mint
Fresh green
Amber
Warm yellow
Coral
Bright pink
Sky
Pale teal
Advanced data
DataTable — full features
Pagination, global filter, sortable columns, and checkbox selection.
| 1 | Amelia Watson | Engineer | active | $30,000 | |
| 2 | Noor Devi | Designer | invited | $31,373 | |
| 3 | Kai Ali | PM | suspended | $32,746 | |
| 4 | Priya Park | Analyst | active | $34,119 | |
| 5 | Sven Mendes | Manager | invited | $35,492 | |
| 6 | Mateo Garcia | Engineer | suspended | $36,865 | |
| 7 | Yara Lopez | Designer | active | $38,238 | |
| 8 | Idris Adjoa | PM | invited | $39,611 | |
| 9 | Lia Holm | Analyst | suspended | $40,984 | |
| 10 | Eli Khan | Manager | active | $42,357 |
0 selected
DataView — Grid + List
Switch between grid and list layouts with one toggle.
Amelia Watson
Engineer
$30,000
Noor Devi
Designer
$31,373
Kai Ali
PM
$32,746
Priya Park
Analyst
$34,119
Sven Mendes
Manager
$35,492
Mateo Garcia
Engineer
$36,865
Tree
Expandable hierarchy with optional checkbox selection and search.
- Documents
- Photos
Timeline
Vertical event list with custom icons and colours.
Ordered
15/10/2026 10:30
Processing
15/10/2026 14:00
Shipped
15/10/2026 16:15
Delivered
16/10/2026 09:00
OrderList
Reorder items with up / down / top / bottom controls.
- React
- Vue
- Svelte
- Solid
- Angular
PickList
Move items between two lists.
- Apples
- Bananas
- Cherries
- Dates
- Eggplant
VirtualScroller
Renders only the visible slice of a large list (1,000 rows here).
OrganizationChart
Hierarchical org chart
Recursive node tree with horizontal/vertical layout, custom node template, expand/collapse, and selection.
TreeTable
Tree structure with table columns
Combines a Tree and a DataTable: rows expand/collapse and each row has typed columnar data.
| Name | Type | Size |
|---|---|---|
| Documents | Folder | 32 MB |
| Pictures | Folder | 186 MB |