Component reference
Every component with its data contract: what render(data) accepts, the markup it produces, states, behaviour, events and accessibility rules. Generated from packages/ui/components/*.js; machine-readable in components.json.
Actions
Forms
- Checkbox / radio group9 fields
- Error summary3 fieldsJS
- Form field17 fields
- Scale input8 fields
- Search field6 fields
- Segmented control7 fields
- Switch6 fieldsJS
Data display
- Avatar6 fields
- Card9 fields
- Chip group4 fieldsJS
- Count bubble4 fields
- Empty state6 fields
- Key-value list1 field
- List5 fieldsJS
- Progress bar6 fields
- Progress ring3 fields
- Progress segments4 fields
- Skeleton4 fields
- Stat tile7 fields
- Status badge3 fields
- Table8 fields
Feedback
- Alert / banner7 fieldsJS
- Offline banner2 fieldsJS
- Save status4 fieldsJS
- Spinner3 fields
- Toast4 fieldsJS
Overlays
- Bottom sheet9 fieldsJS
- Confirm dialog7 fieldsJS
- Dialog9 fieldsJS
- Menu6 fieldsJS
Navigation
- App shell10 fields
- Club switcher3 fieldsJS
- Page header5 fields
- Stepper4 fields
- Tabs5 fieldsJS
Club
- Action tile6 fields
- Belt badge6 fields
- Coach note4 fields
- Proposal card16 fieldsJS
- Streak strip4 fields
- Stripe chips3 fieldsJS