Display Components
Display components present visual content: headings, images, badges, modals, progress indicators, and more.
Typography and structure
| Component | Description |
|---|---|
| Heading | Semantic headings (h1-h6) with configurable sizes and weights |
| Panel | Surface container with border and optional shadow |
| Icon | SVG icons with customizable size and color |
Media and identity
| Component | Description |
|---|---|
| Image | Image with ratios, multiple sources and lazy loading |
| Avatar | Avatar with initials, status and badges |
| AvatarGroup | Avatar group with overflow management |
| Badge | Badge with variants, icons and customizable colors |
Overlays and containers
| Component | Description |
|---|---|
| Dialog | Versatile modal/drawer (center, left, right, top, bottom, full) |
| Popover | Contextual popover with smart placement |
| Alert | Informational alert with success, warning, error, info types |
| Tabs | Tabs with underline, contained and pills variants |
| Accordion | Collapsible panels with single or multiple open mode |
| Collapse | Individual collapsible section |
Indicators
| Component | Description |
|---|---|
| Progress | Progress bar with states and indeterminate mode |
| Spinner | Loading indicator with 5 animation styles |