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 |
| Divider | Separator line, with optional text |
| Kbd | Keyboard key or shortcut |
| VisuallyHidden | Screen-reader-only content |
| 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 |
| Tag | Removable label (filter, keyword) |
| Badge | Badge with variants, icons and customizable colors |
Overlays and containers
| Component | Description |
|---|---|
| ConfirmDialog | Promise-based confirmation with useConfirm() |
| Dialog | Versatile modal/drawer (center, left, right, top, bottom, full) |
| Popover | Contextual popover with smart placement |
| Tooltip | Tooltip on hover and keyboard focus |
| Alert | Informational alert with success, warning, error, info types |
| Toast | Short-lived notifications with useToast() and SuToaster |
| DataTable | Data table: sorting, selection, pagination |
| TreeView | Keyboard-navigable tree |
| 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 |
| Skeleton | Placeholder for loading content |
| EmptyState | Empty area with explanation and actions |