Components
All components
Each component is a stable, cross-platform contract—not a screenshot. Search the complete 67-contract system or filter it by domain.
No matching componentsTry a broader name or remove a filter.
Actions4 contracts
Forms11 contracts
Text field
Capture a short free-text value.
HE 06 · Phase 2Text area
Capture multi-line notes or descriptions.
HE 07 · Phase 2Select
Choose one option from a bounded list.
HE 08 · Phase 2Multi-select
Choose multiple items with removable selections.
HE 09 · Phase 2Checkbox
Toggle an independent option.
HE 10 · Phase 2Radio
Choose exactly one option from a visible group.
HE 11 · Phase 2Switch
Apply an immediate binary setting.
HE 12 · Phase 2Slider
Choose an approximate number or range.
HE 13 · Phase 2Date and time field
Choose a local or absolute date and time.
HE 14 · Phase 2File upload
Upload evidence, calibration files, or farm documents.
HE 15 · Phase 2Search field
Filter or query a known data scope.
Layout5 contracts
Card
Group related content and actions.
HE 24 · Phase 2Page header
Orient the user and contain page-level actions.
HE 25 · Phase 2Section header
Introduce a content section and optional action.
HE 26 · Phase 2Divider
Separate nearby content groups.
HE 27 · Phase 2Accordion
Progressively disclose secondary detail.
Overlays4 contracts
Feedback5 contracts
Alert banner
Communicate a persistent page- or system-level condition.
HE 33 · Phase 3Toast
Confirm a background or completed action.
HE 34 · Phase 3Progress
Show determinate or indeterminate task progress.
HE 35 · Phase 3Skeleton
Preserve layout while content loads.
HE 36 · Phase 3Empty state
Explain why content is absent and offer a next action.
Data display7 contracts
Status badge
Label categorical operational status.
HE 38 · Phase 3Tag
Show a compact attribute, filter, or removable value.
HE 39 · Phase 3Avatar
Represent a user, cow, farm, or device identity.
HE 40 · Phase 3Metric card
Summarize a key value, state and comparison.
HE 41 · Phase 3Data table
Compare and operate on structured records.
HE 42 · Phase 3Description list
Show labeled entity attributes.
HE 43 · Phase 3Timeline
Show ordered events, alerts, interventions, or model decisions.
Data visualization3 contracts
Operations7 contracts
Fleet health summary
Summarize availability and alert distribution across the fleet hierarchy.
HE 48 · Phase 4Device card
Show identity, connection, workload and recent device health.
HE 49 · Phase 4Heartbeat indicator
Communicate device recency against a heartbeat expectation.
HE 50 · Phase 4Service health row
Show one device service state and diagnostic detail.
HE 51 · Phase 4Alert card
Present an actionable anomaly with context, ownership and lifecycle.
HE 52 · Phase 4Live session control
Request and govern temporary high-frequency telemetry or video access.
HE 53 · Phase 4Telemetry quality
Explain sampling, aggregation, staleness and gaps for a metric.
Herd health4 contracts
Cow card
Summarize one cow's identity, status and leading indicators.
HE 55 · Phase 4Cow profile header
Orient users within an individual cow record.
HE 56 · Phase 4Health signal row
Show one observed or inferred animal-health signal against baseline.
HE 57 · Phase 4Herd distribution
Compare health or lifecycle categories across a herd.
Edge AI6 contracts
Calibration panel
Guide a trusted reference-pose or sensor-baseline calibration.
HE 59 · Phase 4Camera viewer
View live or recorded RGB, infrared and depth channels.
HE 60 · Phase 4Pose overlay
Render tracked anatomy, keypoints and regions of interest over imagery.
HE 61 · Phase 4Model insight card
Present an AI-assisted finding with evidence and uncertainty.
HE 62 · Phase 4Confidence indicator
Communicate model confidence without implying clinical certainty.
HE 63 · Phase 4Data provenance
Explain where a value or insight came from.