Components
Building blocks of the HealthMetrics Design System. Each page shows live examples; Storybook holds the full set of variants and controls.
Browse by group
Buttons
Actions and calls-to-action, with variants, sizes and toggles.
Forms
Inputs, labels, checkboxes, switches, selection and date pickers.
Navigation
Tabs, accordion, breadcrumb, pagination, stepper and collapsibles.
Overlays
Dialogs, sheets, popovers, dropdown menus, tooltips and command palettes.
Data display
Tables, data grids, charts, timelines, badges, avatars and description lists.
Feedback
Alerts, toasts, system banners and spinners.
Layout
Application shell — sidebar, topbar and footer.
Widgets
Composed HealthMetrics surfaces: stat cards, claims lists and activity feeds.
Patterns
Multi-component recipes — form validation and AI surfaces.
Every component
The groups above are the curated reading order. This is the full inventory — every component the design system ships, with its documentation maturity and a deep link into Storybook.
69 components ship in Storybook, and every one has a page here — the status column says how far that page has got. Every row also links to its Storybook entry, so a component is never unreachable while its page is being written.
Buttons
| Component | Status | Docs | Storybook |
|---|---|---|---|
| Button | Stable | /components/buttons/button | UI/Button |
| Toggle | Planned | /components/buttons/toggle | UI/Toggle |
Forms
| Component | Status | Docs | Storybook |
|---|---|---|---|
| Calendar | Planned | /components/forms/calendar | UI/Calendar |
| Checkbox | Draft | /components/forms/checkbox | UI/Checkbox |
| Combobox | Draft | /components/forms/combobox | UI/Combobox |
| DatePicker | Draft | /components/forms/date-picker | UI/DatePicker |
| DateRangePicker | Planned | /components/forms/date-range-picker | UI/DateRangePicker |
| Field | Draft | /components/forms/field | UI/Field |
| FileUpload | Planned | /components/forms/file-upload | UI/FileUpload |
| Input | Stable | /components/forms/input | UI/Input |
| Label | Draft | /components/forms/label | UI/Label |
| MultiSelect | Planned | /components/forms/multi-select | UI/MultiSelect |
| QuantityToggle | Draft | /components/forms/quantity-toggle | UI/QuantityToggle |
| RadioGroup | Draft | /components/forms/radio-group | UI/RadioGroup |
| Select | Stable | /components/forms/select | UI/Select |
| Slider | Planned | /components/forms/slider | UI/Slider |
| Switch | Draft | /components/forms/switch | UI/Switch |
| TagsInput | Planned | /components/forms/tags-input | UI/TagsInput |
| Textarea | Draft | /components/forms/textarea | UI/Textarea |
Navigation
| Component | Status | Docs | Storybook |
|---|---|---|---|
| Accordion | Draft | /components/navigation/accordion | UI/Accordion |
| Breadcrumb | Draft | /components/navigation/breadcrumb | UI/Breadcrumb |
| Collapsible | Planned | /components/navigation/collapsible | UI/Collapsible |
| Menubar | Planned | /components/navigation/menubar | UI/Menubar |
| Pagination | Draft | /components/navigation/pagination | UI/Pagination |
| Stepper | Draft | /components/navigation/stepper | UI/Stepper |
| Tabs | Draft | /components/navigation/tabs | UI/Tabs |
Overlays
| Component | Status | Docs | Storybook |
|---|---|---|---|
| AlertDialog | Stable | /components/overlays/alert-dialog | UI/AlertDialog |
| Command | Draft | /components/overlays/command | UI/Command |
| ContextMenu | Planned | /components/overlays/context-menu | UI/ContextMenu |
| CookieBanner | Draft | /components/overlays/cookie-banner | UI/CookieBanner |
| Dialog | Stable | /components/overlays/dialog | UI/Dialog |
| DropdownMenu | Draft | /components/overlays/dropdown-menu | UI/DropdownMenu |
| HoverCard | Planned | /components/overlays/hover-card | UI/HoverCard |
| Popover | Draft | /components/overlays/popover | UI/Popover |
| Sheet | Draft | /components/overlays/sheet | UI/Sheet |
| Tooltip | Draft | /components/overlays/tooltip | UI/Tooltip |
Data display
| Component | Status | Docs | Storybook |
|---|---|---|---|
| Avatar | Draft | /components/data-display/avatar | UI/Avatar |
| AvatarGroup | Planned | /components/data-display/avatar-group | UI/AvatarGroup |
| Badge | Draft | /components/data-display/badge | UI/Badge |
| Card | Draft | /components/data-display/card | UI/Card |
| Chart | Planned | /components/data-display/chart | UI/Chart |
| DataGrid | Planned | /components/data-display/data-grid | UI/DataGrid |
| DescriptionList | Planned | /components/data-display/description-list | UI/DescriptionList |
| Progress | Draft | /components/data-display/progress | UI/Progress |
| ScrollArea | Draft | /components/data-display/scroll-area | UI/ScrollArea |
| Separator | Draft | /components/data-display/separator | UI/Separator |
| Skeleton | Draft | /components/data-display/skeleton | UI/Skeleton |
| Table | Stable | /components/data-display/table | UI/Table |
| Timeline | Planned | /components/data-display/timeline | UI/Timeline |
Feedback
| Component | Status | Docs | Storybook |
|---|---|---|---|
| Alert | Draft | /components/feedback/alert | UI/Alert |
| Sonner | Draft | /components/feedback/toast | UI/Sonner |
| Spinner | Planned | /components/feedback/spinner | UI/Spinner |
| SystemBanner | Draft | /components/feedback/system-banner | UI/SystemBanner |
Layout
| Component | Status | Docs | Storybook |
|---|---|---|---|
| AppLayout | Planned | /components/layout/app-layout | Layout/AppLayout |
| AppSidebar | Planned | /components/layout/app-sidebar | Layout/AppSidebar |
| Footer | Planned | /components/layout/footer | Layout/Footer |
| Topbar | Planned | /components/layout/topbar | Layout/Topbar |
Widgets
| Component | Status | Docs | Storybook |
|---|---|---|---|
| ActivityFeed | Planned | /components/widgets/activity-feed | Widgets/ActivityFeed |
| ChartCard | Planned | /components/widgets/chart-card | Widgets/ChartCard |
| ClaimsList | Planned | /components/widgets/claims-list | Widgets/ClaimsList |
| EntitlementProgress | Planned | /components/widgets/entitlement-progress | Widgets/EntitlementProgress |
| StatCard | Planned | /components/widgets/stat-card | Widgets/StatCard |
Patterns
| Component | Status | Docs | Storybook |
|---|---|---|---|
| AI | Planned | /components/patterns/ai | UI/AI |
| Form Validation | Planned | /components/patterns/form-validation | Patterns/Form Validation |
Foundations
| Component | Status | Docs | Storybook |
|---|---|---|---|
| Background Color | Documented | /foundations/background | Foundations/Background Color |
| Design Tokens | Documented | /foundations | Foundations/Design Tokens |
| IconGallery | Documented | /icons | Foundations/IconGallery |
| Icons | Documented | /icons | Foundations/Icons |
| Logo | Documented | /brand | Foundations/Logo |