Skip to main content
GOVIndia
HomeTokensComponentsDocs

Documentation

Everything you need to use the GOV.India design system. Mobile-first, accessible, and free.

Quick Start

1. Install packages

pnpm add @gov-india/ui @gov-india/styles @gov-india/utils

2. Import styles

// app/layout.tsx
import '@gov-india/styles/globals.css';

3. Use components

import { Button, Card, Header } from '@gov-india/ui';

export default function Page() {
  return (
    <>
      <Header serviceName="India" serviceAccent="Post" />
      <Card title="Welcome">
        <p>Hello, citizen.</p>
        <Button variant="primary">Get started</Button>
      </Card>
    </>
  );
}

4. Use tokens directly

import { colors, typography, spacing } from '@gov-india/tokens';

// Use in styled-components, CSS-in-JS, or Tailwind
const styles = {
  color: colors.accent,
  fontSize: typography.bodyDesktop.size,
  padding: spacing[5], // 25px
};

Architecture

gov-india/
├── apps/
│   ├── hub/                    # This showcase site
│   ├── india-post/             # India Post rebuild
│   ├── passport-seva/          # Passport Seva rebuild
│   ├── income-tax/             # Income Tax rebuild
│   └── indian-railways/        # Indian Railways rebuild
├── packages/
│   ├── tokens/                 # Design tokens
│   ├── styles/                 # Global CSS + Tailwind
│   ├── ui/                     # React components
│   ├── utils/                  # Shared utilities
│   ├── tsconfig/               # TypeScript configs
│   ├── eslint-config/          # ESLint rules
│   └── prettier-config/        # Prettier rules

Packages

@gov-india/tokens

Design tokens — colours, typography, spacing, radius, shadows, breakpoints. Import as TypeScript objects.

pnpm add @gov-india/tokens

@gov-india/styles

Global CSS custom properties, reset, and component classes. Ships a Tailwind preset.

pnpm add @gov-india/styles

@gov-india/ui

React components — Button, Header, Card, Footer, Alert, Breadcrumb. Radix + shadcn pattern.

pnpm add @gov-india/ui

@gov-india/utils

cn() class-merge helper, INR currency formatter, Indian-locale date/number formatters.

pnpm add @gov-india/utils

Design Principles

Citizen-first

Organised by what citizens want to do, not government org charts.

Accessible

WCAG 2.1 AA compliant. Keyboard navigable. Screen reader tested.

Mobile-first

Designed for ₹4,000 phones on 2G. Scales up to desktop.

Plain language

No jargon. No bureaucratic terms. Written for a 12-year-old.

No minister photos

Services, not politicians. Citizens come first.

Open source

MIT licensed. Free for any Indian government project.

Contributing

This is an internal project. External contributions are not accepted. The design system is built from scratch to ensure consistency and quality across all four government service rebuilds.