Pair with brand

Docs/

Drop a hex. See the controls wear it. Garage ships named colours (accent, blue, …) — this page is how they look when you pin a brand tone.

Brand color

Whole kit

Button · accent

Custom solid

Input · accent

accentblueredamberblack

Snippet

Named colours ship with the package. For a one-off hex, paint the solid yourself or map it onto the closest named token.

import { GarageButton, GarageInput } from "@jatin_ux/garage";

<GarageButton color="accent" variant="solid">
  Save
</GarageButton>

{/* Or pin a hex on a wrapper and let text inherit where you paint with currentColor */}
<div style={{ color: "#02BCEA" }}>
  <GarageButton variant="ghost" color="black">Ghost</GarageButton>
</div>