Component library · @brandos/ui
Brand Components
First-party web components from @brandos/ui. Each wraps a Shoelace primitive with a brand-sanitised API that hides upstream vocabulary, consumes Snyder tokens directly, and renders correctly under every tenant brand and theme.
Usage and adapters
Start with Brand components, then compare the Shoelace, DaisyUI, and MUI paths when a product stack requires one.
01 · Actions
Actions
The pieces a user reaches for first: primary triggers, contextual menus, and the floating page controls.
Primary trigger with sanitised variant API.
brandContextual menu opened from a trigger.
brandSingle-click light, dark, system, or custom theme cycling.
brandScroll-to-top with progress ring and a floating phone call CTA.
brand02 · Forms
Forms
Theme-aware form fields with consistent focus, error, and disabled treatments across every input type.
Theme-aware text input with focus + error states.
brandMulti-line input with size + resize options.
brandDropdown select with multi + clearable modes.
brandToggle with indeterminate, error, disabled states.
brandRadio buttons grouped by brand-radio-group.
brandOn / off toggle with keyboard support.
brandSlider for bounded numeric values.
brand03 · Feedback
Feedback
How the interface talks back: alerts, progress, loading placeholders, and contextual hints.
04 · Display
Display
Surfaces and labels that structure content: cards, badges, avatars, and disclosure sections.
Four visual variants plus interactive mode.
brandCircular user badge, image, initials, or icon fallback.
brandSmall label or indicator, optionally pill-shaped.
brandChip label with optional removable state.
brandCollapsible disclosure section.
brandHorizontal or vertical visual separator.
brand