Design system · CSS-first
CSS-first React components for modern product interfaces.
Stable gz-* classes, theme tokens, and thin React wrappers — one visual contract for HTML, React, and Tailwind.
Playground
Live `@gzodo/ui` controls. Change variant, size, and width — the preview and the generated snippet stay in sync.
Theme
Variant
Size
Label
Role
Role selected: editor · Theme: light
<Button
variant="primary"
size="md"
>
Save changes
</Button>Install
Copy each snippet and you’re ready to compose controls.
Step 1
pnpm add @gzodo/uiStep 2
import '@gzodo/ui/styles.css'Step 3
<Button variant="primary">Save</Button>One contract
A stable CSS contract that survives frameworks. Pick the surface that fits your stack.
<button
class="gz-button gz-control"
data-variant="primary"
data-size="md"
>
Save
</button>Components
Mini live previews that jump straight into the docs.
Action control with variants, semantic colors, sizes, and a loading state.
Open docs →
Segmented buttons that share a size and join into one control.
A sliding segmented control for mutually exclusive choices.
Open docs →
Square icon-only control with the same surface tokens as Button.
Single-line text field on the shared control surface.
Open docs →
Multiline field. Size changes the font, not a fixed height.
Open docs →
A control-surface trigger with a popover list, matching the CRM Select.
Open docs →
Custom calendar popover matching CRM DateSelect.
Animated checkbox with an optional label and the control surface.
Open docs →
Single and multi choice controls with optional ChoiceBox cards.
Open docs →
Accessible tablist with a sliding indicator and lazy panels.
Open docs →
Highly configurable react-hook-form layout with a11y and field arrays.
FAQ
No. Tailwind is optional. The library ships plain CSS. Use the preset only if you already run Tailwind and want token-mapped utilities.