---
name: "@indiacn"
slug: "indiacn"
description: "An open-source community design system for India's digital ecosystem, compliant with the UX4G 2.0 government design specification and WCAG 2.1 AA. Ships 25+ components (Button, Badge, Card, Modal, Tabs, Toast, Dropdown, Typography, and more) with an 8-semantic-color-scale theme (primary, secondary, neutral, success, danger, warning, info), dark mode, focus rings, and radius/keyframe tokens. Built on Radix UI, Tailwind CSS v4, CVA, React 19/Next.js 16. Distributed via shadcn registry; MIT-licensed. Use for: building accessible Indian government-style or public-service web applications that must follow UX4G 2.0 design principles."
category: "Design system"
tags: ["accessibility", "buttons", "cards", "charts", "components", "design-system", "loaders", "navigation", "overlays", "theming"]
framework: "react"
license: "MIT"
author: "krishnaagarwal1506"
website: "https://indiacn.in"
github: "https://github.com/krishnaagarwal1506/Indiacn-ui"
registry: "https://indiacn.in/r/registry.json"
pro: false
pro_url: null
github_stars: 4
component_count: 26
generated_at: "2026-07-28T08:59:05.895Z"
---

# @indiacn

An open-source community design system for India's digital ecosystem, compliant with the UX4G 2.0 government design specification and WCAG 2.1 AA. Ships 25+ components (Button, Badge, Card, Modal, Tabs, Toast, Dropdown, Typography, and more) with an 8-semantic-color-scale theme (primary, secondary, neutral, success, danger, warning, info), dark mode, focus rings, and radius/keyframe tokens. Built on Radix UI, Tailwind CSS v4, CVA, React 19/Next.js 16. Distributed via shadcn registry; MIT-licensed. Use for: building accessible Indian government-style or public-service web applications that must follow UX4G 2.0 design principles.

## Links

- Website: https://indiacn.in
- GitHub: https://github.com/krishnaagarwal1506/Indiacn-ui
- Registry JSON: https://indiacn.in/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/indiacn
- This file: https://sh4dcn.vercel.app/md/indiacn.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://indiacn.in/r/registry.json
pnpm dlx shadcn@latest add https://indiacn.in/r/registry.json
bunx shadcn@latest add https://indiacn.in/r/registry.json
# clone the source repo
git clone https://github.com/krishnaagarwal1506/Indiacn-ui.git
# fetch the raw registry index
curl -s https://indiacn.in/r/registry.json
```

## Components (26)

| name | type | description | install |
| --- | --- | --- | --- |
| theme | registry:theme | UX4G 2.0 design tokens — 8 semantic colors with 50–900 scales, focus-shadow utilities, radius ladder, and accordion/collapsible keyframes. Required by every In… | `npx shadcn@latest add https://indiacn.in/r/theme.json` |
| typography | registry:ui | 21 typography components: 6 Display, 6 Headline, 3 Title, 3 Label, 3 Body. Required by every other IndiaCN component. | `npx shadcn@latest add https://indiacn.in/r/typography.json` |
| button | registry:ui | Versatile button with filled/outlined/tonal/text variants, primary/success/destructive themes, sm/md/lg sizes, icon support, and loading state. | `npx shadcn@latest add https://indiacn.in/r/button.json` |
| button-group | registry:ui | Groups related buttons horizontally or vertically with shared borders. | `npx shadcn@latest add https://indiacn.in/r/button-group.json` |
| badge | registry:ui | Compact label for status, counts, or categories. 9 themes × 3 variants × 3 sizes × 2 shapes. | `npx shadcn@latest add https://indiacn.in/r/badge.json` |
| alert | registry:ui | Contextual feedback message. 8 themes (primary, secondary, success, danger, warning, info, light, dark) with optional dismiss button. | `npx shadcn@latest add https://indiacn.in/r/alert.json` |
| accordion | registry:ui | Vertically-stacked collapsible sections. Built on Radix Accordion primitive. | `npx shadcn@latest add https://indiacn.in/r/accordion.json` |
| breadcrumb | registry:ui | Navigation trail showing the current page's hierarchy. | `npx shadcn@latest add https://indiacn.in/r/breadcrumb.json` |
| card | registry:ui | Composable container with header, content, footer, image, title, and description sub-parts. | `npx shadcn@latest add https://indiacn.in/r/card.json` |
| chip | registry:ui | Tags, filters, or selections. 7 themes × 3 variants × 3 sizes; supports icons, avatars, dismiss, and selected state. | `npx shadcn@latest add https://indiacn.in/r/chip.json` |
| collapse | registry:ui | Single collapsible region powered by Radix Collapsible. | `npx shadcn@latest add https://indiacn.in/r/collapse.json` |
| dropdown | registry:ui | Dropdown menu with items, checkbox/radio items, sub-menus, separators, and shortcuts. | `npx shadcn@latest add https://indiacn.in/r/dropdown.json` |
| list-group | registry:ui | Vertical list with optional flush, horizontal, and contextual-color variants. | `npx shadcn@latest add https://indiacn.in/r/list-group.json` |
| modal | registry:ui | Dialog with sm/md/lg/xl/fullscreen sizes and optional scrollable body. | `npx shadcn@latest add https://indiacn.in/r/modal.json` |
| offcanvas | registry:ui | Slide-in panel from any side with optional body-scroll mode. | `npx shadcn@latest add https://indiacn.in/r/offcanvas.json` |
| pagination | registry:ui | Page navigation with default and flat variants in 3 sizes. | `npx shadcn@latest add https://indiacn.in/r/pagination.json` |
| popover | registry:ui | Anchored floating panel powered by Radix Popover. | `npx shadcn@latest add https://indiacn.in/r/popover.json` |
| progress | registry:ui | Linear progress bar with theme colors, sizes, striped + animated stripes. | `npx shadcn@latest add https://indiacn.in/r/progress.json` |
| search | registry:ui | Search input with icon, sizes, and optional clear button. | `npx shadcn@latest add https://indiacn.in/r/search.json` |
| separator | registry:ui | Horizontal or vertical divider built on Radix Separator. | `npx shadcn@latest add https://indiacn.in/r/separator.json` |
| skeleton | registry:ui | Loading placeholder with rect/circle/pill/text shapes and pulse/wave animations. | `npx shadcn@latest add https://indiacn.in/r/skeleton.json` |
| spinner | registry:ui | Loading indicator with border/grow variants, theme colors, and sm/md/lg sizes. | `npx shadcn@latest add https://indiacn.in/r/spinner.json` |
| stepper | registry:ui | Step indicator for multi-step flows with horizontal/vertical orientation and completed/active/warning/pending states. | `npx shadcn@latest add https://indiacn.in/r/stepper.json` |
| tabs | registry:ui | Tab list with tabs, pills, and underline variants. Built on Radix Tabs. | `npx shadcn@latest add https://indiacn.in/r/tabs.json` |
| toast | registry:ui | Notification toast with provider, hook, container, and theme variants. | `npx shadcn@latest add https://indiacn.in/r/toast.json` |
| tooltip | registry:ui | Hover/focus tooltip with 8 theme variants. Built on Radix Tooltip. | `npx shadcn@latest add https://indiacn.in/r/tooltip.json` |

## For AI agents

```text
You are adding components from @indiacn to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/indiacn.md) for the component list.
2. Fetch the machine-readable index: https://indiacn.in/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: indiacn).
```