Components
Components
All TessinaUI components organised by tier — Essentials, Blocks, and Surfaces.
TessinaUI components are organised into three tiers based on complexity and composition.
Single-responsibility, pure-render components with no dependencies on other library components. Reach for these first.
| Component | Description |
|---|
| Button | Primary action trigger — 4 variants, 5 intents, loading state |
| IconButton | Compact icon-only button for toolbars and inline controls |
| Spinner | Loading indicator — ring, dots, pulse variants |
| Badge | Small label or numeric count indicator |
| Avatar | User profile image with text fallback and group stacking |
| Status | Colored dot for online/offline and semantic state |
| Chip | Dismissable tag or filter pill |
| Shortcut | Keyboard shortcut display (⌘K, Ctrl+S) |
| Skeleton | Placeholder loading shimmer |
| Progress | Linear progress bar |
Functional components with interactivity or that compose Essentials.
| Component | Description |
|---|
| Field | Text input wrapper — label, error/success state, icons |
| Checkbox | Checkbox with card variant and group management |
| Radio | Radio button with card variant |
| Switch | Boolean toggle |
| Slider | Numeric range input |
| Select | Dropdown select with groups |
| Combobox | Searchable autocomplete — single or multi-select |
| Search | Search input with clear button and shortcut |
| Textarea | Multi-line text input |
| DatePicker | Date and range picker |
| Calendar | Standalone calendar widget |
| Component | Description |
|---|
| Alert | Inline message banner — error, warning, success, info |
| Toast | Floating notification (requires ToastProvider in layout) |
| Tooltip | Hover/focus popover for labels and hints |
| Component | Description |
|---|
| Card | Content container — elevated, outlined, filled, ghost |
Viewport-level components with focus traps and scroll locks. Used once per feature.
