DigiYatra, reimagined
A QR-first redesign of India's face-recognition airport app: a calmer home, on-device privacy and consent, and an accessible 15-screen flow.
UX4G is India's government design system; its official build is a Bootstrap-based CSS/JS kit. This is an unofficial React re-packaging: 41 zero-dependency components and CSS-variable design tokens you can drop into any project, as an npm install or a shadcn registry you own outright.
The same UX4G look and feel, made calm to install and reason about.
The React package ships no runtime dependencies. Components are plain markup styled with CSS variables, so they stay small and predictable.
Everything reads from design tokens. Change the primary colour, radius or spacing once and the whole system follows.
Built to WCAG 2.2 AA: real labels, a visible 4px focus halo, 44px touch targets and sensible keyboard behaviour.
A machine-readable llms.txt index, typed contracts and per-component usage notes make the system easy for coding agents to use correctly.
Install the package and import components, or copy the source for a single component into your repo and own it.
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-tokens npm setup 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 https://ux4g.pages.dev/r/button.json Registry setup Real Indian government services, redesigned end-to-end on the UX4G packaging — each with a live, interactive prototype you can click through.
A QR-first redesign of India's face-recognition airport app: a calmer home, on-device privacy and consent, and an accessible 15-screen flow.
Rebuilding the Government of India e-Visa portal on @hopline/ux4g-react: a clearer apply flow, real labels and validation, and AA contrast throughout.