Components
Components
Every piece of the system, live, in both themes. Each preview is the real component — never an illustration of it.
Forms & input
ButtonEvery clickable commitment. Picks the right element for the job.
Open ButtonFieldLabel, control, hint, error — wired together.
Open FieldForm controlsInput, textarea and the native select.
Open Form controlsSelectionCheckbox, radio, switch — each for its own kind of choice.
Open SelectionSlider & uploadThe checker's sliders, and the survey-plan dropzone.
Open Slider & uploadCode entryThe six-box confirmation code.
Open Code entryContent & data
CardsSix variants, a horizontal form, and the specimen card.
Open CardsActivity feedThe audit timeline: a sentence and a mono timestamp.
Open Activity feedList rowThe workhorse: one of many, scanned.
Open List rowData tableToolbar, sortable header, selection, pagination.
Open Data tableChip & badgeOne labelled fact; one count.
Open Chip & badgeCode blockSamples on the dark ground, in both themes.
Open Code blockMessaging
Alert & calloutA live condition of the data; the author's aside.
Open Alert & calloutBanner & toastA condition of the view; a confirmation that leaves.
Open Banner & toastLoading
Progress & loadingSpinner, skeleton, progress — and avatar, kbd, inline code.
Open Progress & loadingOverlays
DialogDecisions with consequences, on the native element.
Open DialogDrawerA full-height side sheet over a scrim.
Open DrawerPanelThe non-modal surface docked beside a live map.
Open PanelPopover & tooltipAnchored explanation; a name on hover and focus.
Open Popover & tooltipMenuCommands on a trigger, with the full keyboard contract.
Open MenuPlanning & map
Approval stackWho has to say yes, in icons and words.
Open Approval stackMap tools & searchThe floating chrome, the scale bar, and the omnisearch.
Open Map tools & searchBrand
LogoThe surveyed lot — one plane left empty.
Open LogoTheme toggleLight, dark or follow the system — and the head script it needs.
Open Theme toggle