Components

Accessible, WCAG 2.1 AA compliant React components. Built on Radix UI with shadcn patterns. Every component supports keyboard navigation and screen readers.

Button

Four variants, two sizes. All with focus rings and disabled states.

Variants

Sizes

Disabled

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

<Button variant="primary">Save</Button>
<Button variant="secondary">Cancel</Button>
<Button variant="ghost">Back</Button>
<Button variant="danger" size="sm">Delete</Button>

Alert

Four variants for different feedback types.

Information

This is an informational alert.

Success

Your action was completed successfully.

Warning

Please review before continuing.

Error

Something went wrong. Please try again.

import { Alert } from '@gov-india/ui';

<Alert variant="info" title="Note">
  Your application is being processed.
</Alert>

<Alert variant="error" title="Error">
  Please fix the errors below.
</Alert>

Card

Content containers with optional links and actions.

Track a parcel

Enter your tracking number to see real-time status updates.

Find a post office

Search by PIN code or location to find your nearest branch.

Speed Post

Next-day delivery to most Indian cities. Guaranteed timelines.

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

<Card title="Card heading">
  <p>Card content goes here.</p>
</Card>

Breadcrumb

Navigation trail. Shows current page position.

import { Breadcrumb } from '@gov-india/ui';

<Breadcrumb items={[
  { label: 'Home', href: '/' },
  { label: 'Section', href: '/section' },
  { label: 'Current page', current: true },
]} />

Header

Government-branded header with service name and navigation.

IndiaPost

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

<Header
  serviceName="India"
  serviceAccent="Post"
  nav={[
    { label: 'Send', href: '/send' },
    { label: 'Track', href: '/track' },
  ]}
/>