Build modern UIs.
Make them yours.
Accessible React components. Flexible design tokens. Everything you need to build your next interface, without starting from scratch.
@g4rcez/components
Your next interface starts here.
pnpm add @g4rcez/componentsInteractive previewLive
Small pieces.
Endless possibilities.
A few components, working together.
Try the currency input, dropdown, and menu.
Start with a few componentsReact + TypeScript
import { Input, Dropdown, Menu, MenuItem }
from "@g4rcez/components";
export function CurrencyTools() {
return (
<>
<Input title="Currency" mask="currency"
currency="USD" locale="en-US" />
<Dropdown trigger="Click">
I'm a dropdown component
</Dropdown>
<Menu label="Menu">
<MenuItem title="Item 1">Item 1</MenuItem>
</Menu>
</>
);
}TypeScript nativeKeyboard accessibleCSS variable themingTree-shakeable imports
The building blocks.
Not the constraints.
From the first input to the final interaction. Start with familiar components, then shape them to fit your product.
Form controls
Inputs, selects, and validation for the details that matter.
Input · Select · Checkbox · DatePickerDisplay components
Give information a clear shape, from a single card to a full table.
Card · Table · Tabs · TimelineFloating elements
Keep actions and context close with menus, dialogs, and tooltips.
Modal · Dropdown · Menu · TooltipYour design language.
Down to the token.
Customize colors, spacing, and component styles with CSS variables. Keep the behavior. Make the design your own.