India's government design system, ready for your React app.
UX4G is the User Experience for Good Governance design system. This is an unofficial, ultra-light packaging of it: 41 zero-dependency React components and CSS-variable design tokens you can drop into any project, as an npm package or a shadcn-style registry you own outright.
Why this packaging
The same UX4G look and feel, made calm to install and reason about.
Zero dependency
The React package ships no runtime dependencies. Components are plain markup styled with CSS variables, so they stay small and predictable.
Themeable
Everything reads from design tokens. Change the primary colour, radius or spacing once and the whole system follows.
Accessible
Built to WCAG 2.2 AA: real labels, a visible 4px focus halo, 44px touch targets and sensible keyboard behaviour.
LLM friendly
A machine-readable llms.txt index, typed contracts and per-component usage notes make the system easy for coding agents to use correctly.
Two ways to use it
Install the package and import components, or copy the source for a single component into your repo and own it.
As an npm package
Add the two packages, import the tokens CSS once at your app root, then import components anywhere. Updates arrive through your package manager.
pnpm add @hopline/ux4g-react @hopline/ux4g-tokensAs a shadcn registry
Pull a single component's source into your project with the shadcn CLI. You own the file and can change anything; tokens keep it on-brand.
npx shadcn add ./registry/r/button.json