Brand Components
First-party web components from @brandos/ui. Each wraps a Shoelace primitive with a brand-sanitised API that hides upstream vocabulary.
24 components · recommended
Reach for these first
Default path for any new UI. Each component consumes Snyder tokens directly and exposes a stable, documented API.
Alert
Branded feedback message with variants and leading icon.
brandAvatar
Circular user badge — image, initials, or icon fallback.
brandBadge
Small label or indicator, optionally pill-shaped.
brandBreadcrumb
Hierarchical navigation for deep pages.
brandButton
Primary trigger with sanitised variant API.
brandCard
Four visual variants plus interactive mode.
brandCheckbox
Toggle with indeterminate, error, disabled states.
brandDetails
Collapsible disclosure section.
brandDialog
Modal with focus trap and Escape-to-close.
brandDivider
Horizontal or vertical visual separator.
brandDrawer
Edge-anchored slide-in panel.
brandDropdown
Contextual menu opened from a trigger.
brandInput
Theme-aware text input with focus + error states.
brandProgress
Determinate or indeterminate progress bar.
brandRadio
Radio buttons grouped by brand-radio-group.
brandRange
Slider for bounded numeric values.
brandSelect
Dropdown select with multi + clearable modes.
brandSkeleton
Loading placeholder with optional sheen.
brandSpinner
Font-size-scaled loading spinner.
brandSwitch
On / off toggle with keyboard support.
brandTabs
Tab group with edge placement options.
brandTag
Chip label with optional removable state.
brandTextarea
Multi-line input with size + resize options.
brandTooltip
Contextual hint on hover or focus.
brand