Data Display
Cards, badges, avatars, tables, and keyboard shortcuts.
Card
Display content in a card with header, body, and footer slots. Available in outline, soft, and subtle variants.
The outline variant adds a subtle border around the card. Ideal for content grouping with clear boundaries.
The soft variant uses a gentle background fill. Great for cards that need to stand out without heavy borders.
The subtle variant is the most understated option. Use it when cards should blend into the background.
Badge
Short text labels to represent a status or category. Supports multiple variants, colors, sizes, and icons.
Variants
Colors
Sizes
With Icons
Avatar
Profile images with fallback to initials or icons. Supports sizes from xs to 3xl and status chip indicators.
Sizes
Fallback Modes
Image
Initials
Icon
With Chip Indicator
Online
Away
Offline
Avatar Group
Stack multiple avatars together with overflow count for space-efficient team display.
Stacked Group
Max Overflow (max=3)
Keyboard Shortcut
Display keyboard keys and combinations. Special keys are rendered with platform-appropriate symbols.
Variants
Sizes
Special Keys
Key Combinations
Table
Responsive data table with columns, sorting, and row selection. Powered by TanStack Table.
| Property | Location | Price / Night | Occupancy | Status |
|---|---|---|---|---|
| Seaside Villa | Marbella, Spain | $320 | 92% | Active |
| Mountain Chalet | Chamonix, France | $275 | 78% | Active |
| City Loft | Barcelona, Spain | $180 | 95% | Active |
| Lake House | Como, Italy | $410 | 65% | Maintenance |
| Beach Bungalow | Algarve, Portugal | $150 | 88% | Active |
| Penthouse Suite | London, UK | $520 | 0% | Inactive |