Present information with structure and clarity.
Data display primitives shape hierarchy, communicate state, and improve scan speed. Combine them to build dashboards, profiles, tables, and rich content regions that remain consistent across breakpoints.
Avatar
identityIcon
signalsTable
structured dataScroll
large contentAvatar
Avatars represent users with image, initials, or fallback icon. They support shape, size, status badges, and group stacking.
Sizes + Shapes
Image + Group
Badge
Badges overlay counts and status dots on avatars and icons for quick attention cues.
Counts + Dot
Placement + Visibility
Chip
Chips are concise status and metadata tokens for tags, filters, and category markers.
Variants + Size
Color + Icon
Icon
Icons reinforce intent and improve scanning. Use size, color, and context to keep them clear.
Gallery
Sizing + Color
Image
Image wraps `next/image` with ergonomic defaults for sizing, fit modes, radius, and decorative use.
Fixed Dimensions
Fill + Object Fit
Divider
Dividers create visual boundaries between related content blocks with horizontal and vertical modes.
Horizontal
Vertical + Semantics
Home
About
Contact
decorative false
Progress
Progress communicates task status with linear and circular variants, determinate and loading states.
Linear
Circular + Color
Skeleton
Skeleton placeholders preserve structure during loading and reduce content shift.
Shapes
Animation + Composition
Tooltip
Tooltips provide supplemental hints on hover/focus without changing primary layout flow.
Basic + Position
Rich Variant
Popover
Popover opens contextual panels for actions, forms, and richer inline interaction flows.
Content Panel
Positions
HoverCard
HoverCard surfaces richer contextual previews for people, links, and content snippets.
Flat API
@alice_chen
v0.1.4Compound API
Hover for preview
Text
Text provides semantic typography variants, weight controls, alignment, truncation, and color token mapping.
Scale
Heading 3
Heading 4
Heading 5
Subtitle 1
Subtitle 2
Body 1 for longer readable content blocks.
Body 2 for supporting content and metadata.
Color + Clamp
Primary
Secondary
Accent
Success
Warning
Error
This is a long line that truncates with ellipsis when it exceeds available width.
Multi-line clamping helps keep cards and list previews aligned. It limits text overflow while preserving a clean and consistent rhythm across dense layouts.
Table
Tables present structured datasets with semantic cells, density modes, striping, and sticky headers.
Basic + Striped
| Name | Role | Status |
|---|---|---|
| Alice Chen | Engineer | Active |
| Bob Smith | Designer | Active |
| Carol Davis | PM | On Leave |
| Dan Lee | Engineer | Active |
| Quarter | Units | Revenue |
|---|---|---|
| Q1 | 1,200 | $48,000 |
| Q2 | 1,450 | $58,000 |
| Q3 | 1,380 | $55,200 |
| Q4 | 1,610 | $64,400 |
Bordered + Sticky
| Feature | Free | Pro |
|---|---|---|
| Pages | 5 | Unlimited |
| Storage | 1 GB | 100 GB |
| # | Product | Category |
|---|---|---|
| 1 | Item 1 | Core |
| 2 | Item 2 | Extension |
| 3 | Item 3 | Core |
| 4 | Item 4 | Extension |
| 5 | Item 5 | Core |
| 6 | Item 6 | Extension |
| 7 | Item 7 | Core |
| 8 | Item 8 | Extension |
| 9 | Item 9 | Core |
| 10 | Item 10 | Extension |
List
Lists provide compact, scan-friendly row layouts for tasks, settings, and navigational sets.
Basic + Divided
- Inbox
- Drafts
- Sent
- Inbox3 unread messages
- Drafts2 drafts saved
Actions + Ordered
- NotificationsPush and email alertsOn
- Locked taskComplete previous step
- Create accountSign up with email
- Choose templatePick a starter
- PublishGo live
ScrollArea
ScrollArea provides themed scroll containers for tall and wide content with configurable orientation.
Vertical + Horizontal
Item 1 — Scroll to see more
Item 2 — Scroll to see more
Item 3 — Scroll to see more
Item 4 — Scroll to see more
Item 5 — Scroll to see more
Item 6 — Scroll to see more
Item 7 — Scroll to see more
Item 8 — Scroll to see more
Item 9 — Scroll to see more
Item 10 — Scroll to see more
Item 11 — Scroll to see more
Item 12 — Scroll to see more
Item 13 — Scroll to see more
Item 14 — Scroll to see more
Item 15 — Scroll to see more
Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
Card 7
Card 8
Card 9
Card 10
Both Directions
| ID | Name | Department | Location | Status |
|---|---|---|---|---|
| 1 | Alice Chen | Engineering | New York | Active |
| 2 | Bob Smith | Design | San Francisco | Active |
| 3 | Carol Davis | Marketing | London | On Leave |
| 4 | Dan Lee | Engineering | Tokyo | Active |
| 5 | Eve Torres | Sales | Sydney | Active |
| 6 | Frank Wu | Design | Berlin | Inactive |