Design language
Native platforms
How every component maps to SwiftUI and Jetpack Compose, and when to use Liquid Glass.
Component mapping
The same inventory, each platform's own controls.
| Component | Web | iOS (SwiftUI) | Android (Compose) |
|---|---|---|---|
| Stage timeline | stage-timeline.tsx | Custom SwiftUI view (never glass) | Custom Compose Column + Canvas connectors |
| Wait estimate block | estimate-block.tsx | SwiftUI VStack, numericMd monospaced digits | Compose Column with Text styles from the type scale |
| Test tracker | test-tracker.tsx | SwiftUI List rows with a custom stepper | Compose LazyColumn rows with a custom stepper |
| Care-team row | care-team-row.tsx | SwiftUI LabeledContent row | Compose ListItem |
| Request tile | request-tile.tsx | SwiftUI LazyVGrid of buttons | Compose LazyVerticalGrid of Cards |
| Request row | request-row.tsx | SwiftUI List row | Compose ListItem |
| Task card | task-card.tsx | SwiftUI card on a solid surface | Compose OutlinedCard |
| Status pill | status-pill.tsx | SwiftUI capsule Label | Compose AssistChip styled from tokens |
| Badge | badge.tsx | SwiftUI .badge() | Compose Badge |
| Banner | banner.tsx | SwiftUI inline banner | Compose Surface strip |
| Code delay notice | code-notice.tsx | SwiftUI alert | Compose AlertDialog |
| Machine-translation badge | mt-badge.tsx | SwiftUI bar | Compose Surface bar |
| Live dot | live-dot.tsx | SwiftUI Circle with phaseAnimator | Compose Canvas circle |
| Button | button.tsx | SwiftUI Button (.borderedProminent) | Compose Button / FilledTonalButton |
| Icon button | icon-button.tsx | SwiftUI Button with Image(systemName:) | Compose IconButton |
| Link | text-link.tsx | SwiftUI Link | Compose TextButton |
| Toggle and button group | toggle.tsx | SwiftUI Toggle(.button) | Compose FilterChip / SegmentedButton |
| Text field | input.tsx | SwiftUI TextField in a Form | Compose OutlinedTextField |
| Form | form.tsx | SwiftUI Form | Compose Column of fields |
| Textarea | textarea.tsx | — | — |
| Select | select.tsx | SwiftUI Picker(.menu) | Compose ExposedDropdownMenuBox |
| Combobox | combobox.tsx | SwiftUI searchable list | Compose ExposedDropdownMenu with a text field |
| Native select | native-select.tsx | System wheel | System spinner |
| Input group | input-group.tsx | TextField with an HStack | OutlinedTextField with leading/trailing icons |
| Date of birth | dob-input.tsx | Three TextFields (.numberPad) | Three OutlinedTextFields (number keyboard) |
| Visit-code input | visit-code-input.tsx | SwiftUI TextField with cells | Compose BasicTextField with cells |
| Date range picker | date-range-picker.tsx | SwiftUI DatePicker pair | Compose DateRangePicker |
| Calendar | calendar.tsx | SwiftUI DatePicker(.graphical) | Compose DatePicker |
| Slider | slider.tsx | SwiftUI Slider | Compose Slider |
| Checkbox | checkbox.tsx | SwiftUI Toggle(.checkbox) / custom | Compose Checkbox |
| Radio group | radio-group.tsx | SwiftUI Picker(.inline) | Compose RadioButton rows |
| Switch | switch.tsx | SwiftUI Toggle | Compose Switch |
| Segmented control | segmented-control.tsx | SwiftUI Picker(.segmented) | Compose SingleChoiceSegmentedButtonRow |
| Language selector | language-selector.tsx | SwiftUI Picker | Compose ListItem radio rows |
| Toast | sonner.tsx | Custom capsule above the tab bar | Custom capsule above the navigation bar |
| Empty state | states.tsx | SwiftUI ContentUnavailableView | Compose Column |
| Error state | states.tsx | SwiftUI ContentUnavailableView | Compose Column |
| Skeleton | skeleton.tsx | SwiftUI .redacted(reason: .placeholder) | Compose placeholder shapes |
| Progress and spinner | progress.tsx | SwiftUI ProgressView | Compose LinearProgressIndicator |
| Alert | alert.tsx | SwiftUI GroupBox | Compose Card with an icon |
| Stepper and progress dots | stepper.tsx | Custom SwiftUI HStack | Custom Compose Row |
| Dialog | dialog.tsx | SwiftUI .sheet / .alert | Compose AlertDialog |
| Alert dialog | alert-dialog.tsx | SwiftUI .confirmationDialog | Compose AlertDialog |
| Sheet | sheet.tsx | SwiftUI .sheet with detents | Compose ModalBottomSheet |
| Drawer | drawer.tsx | SwiftUI .presentationDetents | Compose ModalBottomSheet |
| Popover | popover.tsx | SwiftUI .popover | Compose Popup |
| Menu | dropdown-menu.tsx | SwiftUI Menu | Compose DropdownMenu |
| Context menu | context-menu.tsx | SwiftUI .contextMenu | Long-press DropdownMenu |
| Tooltip | tooltip.tsx | SwiftUI .help | Compose PlainTooltip |
| Hover card | hover-card.tsx | — | — |
| Command palette | command-palette.tsx | — | — |
| Tabs | tabs.tsx | SwiftUI Picker(.segmented) or TabView | Compose PrimaryTabRow |
| Breadcrumb | breadcrumb.tsx | — | — |
| Pagination | pagination.tsx | — | — |
| Accordion | accordion.tsx | SwiftUI DisclosureGroup | Compose expandable rows |
| Data table | data-table.tsx | SwiftUI Table / List | Compose LazyColumn |
| Table | table.tsx | SwiftUI Grid | — |
| Stat tile | stat-tile.tsx | SwiftUI GroupBox | Compose Card |
| Trend chart | charts.tsx | Swift Charts LineMark | Vico line chart |
| Bar chart | charts.tsx | Swift Charts BarMark | Vico column chart |
| Heatmap | charts.tsx | Swift Charts RectangleMark | Compose grid |
| Benchmark bar | charts.tsx | SwiftUI Canvas | Compose Canvas |
| Filter bar | filter-bar.tsx | SwiftUI .searchable + Menu | Compose FilterChips |
| Card | card.tsx | SwiftUI GroupBox | Compose Card |
| Avatar | person-avatar.tsx | SwiftUI Circle with initials | Compose Box with initials |
| QR and share card | share-card.tsx | SwiftUI ShareLink | Compose card + ShareSheet |
| Family link row | share-card.tsx | SwiftUI List row | Compose ListItem |
| Print card | print-card.tsx | — | — |
| Sidebar | sidebar.tsx | SwiftUI NavigationSplitView | Compose NavigationRail |
| Resizable panels | resizable.tsx | — | — |
| Scroll area | scroll-area.tsx | ScrollView | LazyColumn |
| Secret reveal | Web only (no native developer portal) | Web only (no native developer portal) | |
| Copy field | Web only (no native developer portal) | Web only (no native developer portal) | |
| Environment badge | Web only (no native developer portal) | Web only (no native developer portal) | |
| Status chip | Web only (no native developer portal) | Web only (no native developer portal) | |
| Problem view | Web only (no native developer portal) | Web only (no native developer portal) | |
| JSON viewer | Web only (no native developer portal) | Web only (no native developer portal) | |
| HL7 viewer | Web only (no native developer portal) | Web only (no native developer portal) | |
| URL filter bar | Web only (no native developer portal) | Web only (no native developer portal) | |
| Mapping trace | Web only (no native developer portal) | Web only (no native developer portal) | |
| Delivery timeline | Web only (no native developer portal) | Web only (no native developer portal) | |
| JWKS tester | Web only (no native developer portal) | Web only (no native developer portal) | |
| Key pair generator | Web only (no native developer portal) | Web only (no native developer portal) | |
| Scope picker | Web only (no native developer portal) | Web only (no native developer portal) | |
| Event type picker | Web only (no native developer portal) | Web only (no native developer portal) | |
| Fault panel | Web only (no native developer portal) | Web only (no native developer portal) | |
| Code editor | Web only (no native developer portal) | Web only (no native developer portal) | |
| Typed confirmation | Web only (no native developer portal) | Web only (no native developer portal) |
Liquid Glass and Material 3 Expressive
- Glass only on floating controls, bars and sheets (the tab bar, a floating action cluster, the system sheet). Content is always on solid cards.
- Never put text over glass without a solid backing; Reduce Transparency switches every glass surface to solid.
- Android uses Material 3 Expressive navigation, shape morph on press and the expressive spring only for moments like "You're next".
- Dynamic Type up to AX5 and font scale up to 200 %: layouts reflow, pills wrap, patient sentences never truncate.