Introduction

What is IndiaCN?

IndiaCN is an open-source component library built for India's digital ecosystem. It provides production-ready React components based on the UX4G 2.0 Design System — the official design guidelines for Indian government and public-service applications.

Think of it as shadcn/ui but themed and tailored for Indian government digital services.

Why IndiaCN?

• UX4G 2.0 Compliant — Components follow the official design system used across Indian government websites.
• Copy & Paste — No npm package. Copy the component source directly into your project and own it.
• Accessible — Built on Radix UI primitives with proper ARIA attributes, keyboard navigation, and screen reader support.
• Tailwind CSS — Styled with Tailwind CSS 4 using CSS custom properties for easy theming.
• Dark Mode — All components support light and dark modes out of the box.

Tech Stack

• Next.js 16 — React framework with App Router
• React 19 — Latest React with server components
• Tailwind CSS 4 — Utility-first CSS with @theme inline
• Radix UI — Accessible headless primitives
• CVA — Class Variance Authority for component variants
• TypeScript — Full type safety

Getting Started

IndiaCN ships as a shadcn-compatible registry — no npm package to install. Components land as source code directly in your project, with npm dependencies and registry dependencies auto-resolved by the CLI.

Requires Tailwind CSS v4. The theme uses @theme inline syntax which does not work on Tailwind v3.

1. Initialize shadcn in your project

If you don't have shadcn set up yet:

npx shadcn@latest init

2. Add the IndiaCN theme

The theme preset brings every design token: 8 semantic color scales, focus rings, dark mode variables, radius ladder, and keyframe animations.

npx shadcn@latest add https://indiacn.in/r/theme.json

3. Add components

Pick any component — its dependencies (theme, typography, etc.) are pulled in automatically.

# Foundation
npx shadcn@latest add https://indiacn.in/r/typography.json
npx shadcn@latest add https://indiacn.in/r/button.json

# Any component — deps auto-resolve

npx shadcn@latest add https://indiacn.in/r/badge.json
npx shadcn@latest add https://indiacn.in/r/card.json
npx shadcn@latest add https://indiacn.in/r/modal.json

Shorthand with @indiacn namespace

Add the IndiaCN registry to your components.json for a cleaner install syntax:

{
"registries": {
  "@indiacn": "https://indiacn.in/r/{name}.json"
  }
}

Then install components with the @indiacn/ prefix:

npx shadcn@latest add @indiacn/button
npx shadcn@latest add @indiacn/badge @indiacn/card @indiacn/dropdown

What ships with theme

The theme item is a registry:theme preset that writes into your globals.css:

• 8 semantic color scales (50–900): primary, secondary, neutral, success, danger, warning, info
• Light and dark variants of every scale
• --shadow-focus-* ring utilities (4 px primary-tinted focus halo)
• --radius-* ladder derived from a single --radius variable
• Keyframes: accordion-up/down, collapsible-up/down, spinner-grow, shimmer

Components

IndiaCN includes 23+ components covering all common UI patterns: