@hagar/ui — component preview

@hagar/ui

@hagar/ui is the shared component library for Hagar frontends. Its purpose is twofold:

Out-of-the-box components, themed per brand. Each project defines its own tokens (colors, radius, fonts, …) in its global.css. Components read those tokens and render in brand automatically. Olís gets its green + yellow look, Storkaup its blue, etc., without touching component source.
A consistency baseline for custom designs. When a design needs more than tokens can express, brands extend the components further. The components and their variants stay consistent across brands, even when the visuals diverge.

Pick a component from the sidebar to see it rendered with the default tokens shipped in @hagar/ui/tokens.css. Use the branding playground below to theme every component live — your choice follows you onto each component page.

Work in progress. We’re rolling this library out in Olís and Bananar first. Other brands (Storkaup, Veigar, Midlar) will join as their token contracts get defined and @hagar/ui is wired into their codebases.

Branding playground

Pick a brand preset or tweak individual tokens. Every component reacts live — navigate to any component page to see it in the chosen brand.

Brand presets:HagarOlísBananar

Primary chain

Brand colors used by default for emphasis.

--primary

#fbb034

--primary-dark

#b44b00

--primary-light

#ffc875

--primary-muted

#fff1d4

--primary-foreground

#1a1a1a

--primary-hover

#e89e1f

Secondary chain

Supporting colors used alongside primary.

--secondary

#efefef

--secondary-dark

#555555

--secondary-light

#f5f5f5

--secondary-muted

#fafafa

--secondary-foreground

#1a1a1a

--secondary-hover

#e0e0e0

Border radius

Controls corner roundness across all components.

10px