Primitives
The building blocks of our user interface.
pnpm add @gateflow/uiLive State Coverage Matrix (8 Canonical States)
Every interactive primitive explicitly implements and validates each interaction state according to WCAG 2.2 AA.
| Component | Default | Hover / Active | Focus-Visible | Disabled | Loading | Selected / Toggle | Error / Danger |
|---|---|---|---|---|---|---|---|
| Button | |||||||
| FormField | Numeric pass ID | Non-editable | |||||
| Badge / Tag | Solid | Soft | Outline | Muted | Live Sync | Active | Breach |
| Card | Interactive Card Hover for rim-light glow | Selected State Active perimeter profile | Sunken Canvas Background gutter layer | ||||
Button
Interactive buttons for triggers and actions. Supports multiple variants and sizes.
| Property | Type | Default | Description |
|---|---|---|---|
| variant | 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link' | default | Visual style of the button. |
| size | 'default' | 'sm' | 'lg' | 'icon' | 'icon-sm' | default | Padding and font-size variant. |
| loading | boolean | false | Shows a loading spinner. |
| asChild | boolean | false | Change the default rendered element for the one passed as a child. |
Input
A standard text input field for form data. Optimized for high contrast and accessibility.
Badge
Small status indicators and tags. Used for labels, counts, and statuses.
| Property | Type | Default | Description |
|---|---|---|---|
| variant | 'default' | 'secondary' | 'outline' | 'destructive' | 'success' | 'warning' | 'info' | default | Visual status variant. |
Card
Containers for related content and actions. Flexible layout with header, content, and footer.
Create Project
Deploy your new gate monitor project in one-click. Automated environment setup.
Avatar
Visual representation of users or entities. Supports images and automatic fallback initials.
Tabs
Segmented navigation within a view. Used to organize related content into distinguishable groups.
Select
A form control for picking one option from a list. Supports scrolling, grouping, and label management.
Skeleton
Loading state visuals for content that is not yet ready. Used to reduce perceived latency.
Switch
A toggle control for binary operations (on/off). Ideal for settings and feature flags.