Hopline Studio & open workshop
Start a project
Bishwajeet ParhiBishwajeet Parhi · · 3 min read

We repackaged India's government design system for React

UX4G is India's official government design system, shipped as a Bootstrap and jQuery bundle. We rebuilt it for modern React: 41 zero-dependency components, CSS-variable tokens, and a shadcn registry.

open sourcedesign systemsreact

Today we’re putting something in the open we’ve wanted for a while: UX4G for React. It’s a community repackaging of India’s official government design system, built for the way frontend teams actually work today.

If you’ve ever shipped a government or public-sector site in India, you’ve run into UX4G (“User Experience for Good Governance”). It’s a genuinely thoughtful system. There’s a careful violet-on-white palette, real accessibility rules baked in, and a full vocabulary of components to draw from.

The catch was never the design. It was the delivery. The official build ships as a Bootstrap-based CSS and JavaScript bundle, handed to you over a CDN or as a ZIP sitting next to a Figma kit. That’s perfect for server-rendered and jQuery-era pages. It’s a lot less perfect when your stack is React. There’s no component library to import, and nothing that plays nicely with shadcn.

We kept hitting that wall on our own work, so we did the obvious thing: kept the design, rebuilt the delivery.

What’s in it

UX4G for React is a small monorepo with two published packages and a copy-paste registry:

  • 41 React components. Everything from buttons and form fields to a data-driven IndiaMap choropleth and a full accessibility widget (the GIGW and RPwD universal-access launcher). No Bootstrap, no jQuery, no runtime dependency beyond React itself.
  • Design tokens as CSS variables. One import gives you the whole system: colours, type, spacing, radius, shadow. There’s a typed theme object too, for when you need the values in JavaScript.
  • A shadcn registry. Prefer to own a component outright, with zero dependency? Pull its source straight into your project and it’s yours to change.
  • WCAG 2.2 AA throughout. Visible focus rings, 44px touch targets, real labels on every field. The things the original system cares about, carried all the way through.

Using it

Install the two packages:

pnpm add @hopline/ux4g-react @hopline/ux4g-tokens
import "@hopline/ux4g-tokens/styles.css"; // once, at the app root
import { Button } from "@hopline/ux4g-react";

export const Apply = () => <Button variant="primary">Apply now</Button>;

Or, if you’d rather own the source, copy a single component from the registry:

npx shadcn add https://ux4g.pages.dev/r/button.json

Swap button for any component you need. The whole set is themeable, so re-skin the primary and everything follows along.

Why we built it, and the honest part

We do a fair amount of India-facing and public-sector work, and we kept rewriting the same UX4G primitives in React from scratch, project after project. At some point the reusable answer clearly belonged in the open rather than buried in our own repos. So here it is.

One thing we want to be straight about: this is unofficial and community-maintained. UX4G is © NeGD and MeitY, Government of India. We built this from the published UX4G 2.0 web kit and we’re maintaining it in good faith, but it isn’t an official release and we don’t speak for the government.

Next up is React Native, then Flutter, each one rebuilt against the same tokens and contracts so a button behaves like a button everywhere you use it.

It’s MIT-licensed and live right now. The code is on GitHub, you can poke at every component on the live showcase, and if you’re building something for citizens and want a hand, say hello. A real person replies, usually within a day.

Bishwajeet, co-founder of Hopline