Data Display
Present information with glass-styled tables, badges, avatars, and progress indicators.
Data table with glass container, translucent header row, and hover-highlighted rows. Built on TanStack Table — supports sorting, selection, and pagination. Wrap your node fleet, transaction history, or any tabular data.
| Name | Status | CPU | RAM | Earnings |
|---|---|---|---|---|
| Node Alpha | online | 4 cores | 16 GB | $42.50 |
| Node Beta | online | 8 cores | 32 GB | $87.20 |
| Node Gamma | offline | 2 cores | 8 GB | $0.00 |
| Node Delta | online | 16 cores | 64 GB | $156.80 |
Inline status labels with backdrop blur. Use semantic colors to communicate state: success for active, warning for pending, error for failures.
Semantic Colors
Variants
User identity indicators with glass ring borders. Use for team members, node operators, or contributor lists. Group them to show collaboration.
Avatar Group
Visual completion indicators. Show deployment progress, resource utilization, or earnings milestones with semantic color coding.
Loading placeholders with glass shimmer animation. Use while fetching node data, loading dashboards, or waiting for API responses.
Compact status bar for real-time metrics. Shows online/offline state with a pulsing indicator, plus key stats in a horizontal layout. Built for dashboards and monitoring views.