UX4G community packaging

UX4G ("User Experience for Good Governance") is India's official government design system. Its official build is a Bootstrap-based CSS/JS bundle, shipped over a CDN or as a ZIP alongside a Figma kit. That fits server-rendered and jQuery-era sites, but it is not a React component library and not shadcn-compatible.

This repo re-packages UX4G for modern React: zero-dependency components (no Bootstrap, no jQuery), CSS-variable tokens you install from npm, and a shadcn registry you can copy component by component. 41 components, themeable, built to WCAG 2.2 AA.

Unofficial and community-maintained. UX4G is © NeGD · MeitY, Government of India. This is not an official release.

Install

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>;

• @hopline/ux4g-react: 41 React components (React 18+ peer, no other dependencies).
• @hopline/ux4g-tokens: the design tokens as one CSS import plus a typed theme object.

Copy the source instead (shadcn)

Prefer to own a component outright, with no dependency? Pull it from the hosted registry:

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

Swap button for any component name. From a local checkout: npx shadcn add ./registry/r/button.json.

Develop

pnpm install
pnpm build      # tokens + react
pnpm test
pnpm --filter playground dev   # live demo

Layout: packages/tokens and packages/react are the published packages, registry/ is the shadcn registry, apps/docs is the site, and examples/playground is a Vite demo.

Roadmap

Web (this repo), then React Native, then Flutter. Each platform reimplements against the same tokens and contracts/*.d.ts.

Credits

Modelled on UX4G (NeGD · MeitY, ux4g.gov.in) and built from the UX4G Design System 2.0 Web Kit (Community) Figma. Icons use Lucide geometry (ISC). MIT licensed.