Component Library
All shared UI components from @workspace/ui,
organised by atomic design principles.
Atoms
Fundamental building blocks — the smallest indivisible UI elements.
Alert
Default
Heads up
This is an informational alert using default styling.
Destructive
Something went wrong
Your session expired. Sign in again to continue.
Badge
Variants Default Secondary Outline Destructive Ghost Link
Checkbox
States
With label
Input
States
Types
Label
Standalone
Paired with input
Radio Group
Vertical
Horizontal
Separator
Horizontal
Above
Below
Vertical
Left
Skeleton
Shapes
Card skeleton
Switch
States
Small size
With label
Textarea
States
Tooltip
Positions
Molecules
Combinations of atoms that form more complex, reusable UI patterns.
Avatar
Sizes
JDJDJD
Fallback
SMJDLG
With badge
JDJD
Group
U1U2U3
+5
Card
Default
Simple
Field
Vertical (default)
This will be displayed on your profile.
With error
Please enter a valid email address.
Horizontal
FieldSet
Pagination
Default
Select
Default
Small size
Disabled
Table
Default
| Run | Environment | Status | Pages | Findings |
|---|---|---|---|---|
| run-a1 | local | | 12 | 0 |
| run-a2 | staging | | 18 | 3 |
| run-a3 | production | | 9 | 1 |
Tabs
Default
High-level summary of the selected run.
Organisms
Complex, self-contained UI sections composed of molecules and atoms.
Dialog
Default
Destructive action
Sheet
Sides
Sonner (Toast)
Toast variants