⚠️ Mobile is not supported yet.

indiacn

UX4G 2.0 design system for India — many accessible React components and an 8-color theme preset for native apps.

Vertically-stacked collapsible sections. Built on Radix Accordion primitive.

Contextual feedback message. 8 themes (primary, secondary, success, danger, warning, info, light, dark) with optional dismiss button.

@indiacn/badge

Compact label for status, counts, or categories. 9 themes × 3 variants × 3 sizes × 2 shapes.

@indiacn/breadcrumb

Navigation trail showing the current page's hierarchy.

@indiacn/button

Versatile button with filled/outlined/tonal/text variants, primary/success/destructive themes, sm/md/lg sizes, icon support, and loading state.

@indiacn/button-group

Groups related buttons horizontally or vertically with shared borders.

@indiacn/card

Composable container with header, content, footer, image, title, and description sub-parts.

@indiacn/chip

Tags, filters, or selections. 7 themes × 3 variants × 3 sizes; supports icons, avatars, dismiss, and selected state.

@indiacn/collapse

Single collapsible region powered by Radix Collapsible.

@indiacn/dropdown

Dropdown menu with items, checkbox/radio items, sub-menus, separators, and shortcuts.

@indiacn/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 IndiaCN component.

theme

@indiacn/list-group

Vertical list with optional flush, horizontal, and contextual-color variants.

@indiacn/modal

Dialog with sm/md/lg/xl/fullscreen sizes and optional scrollable body.

@indiacn/offcanvas

Slide-in panel from any side with optional body-scroll mode.

@indiacn/pagination

Page navigation with default and flat variants in 3 sizes.

@indiacn/popover

Anchored floating panel powered by Radix Popover.

@indiacn/progress

Linear progress bar with theme colors, sizes, striped + animated stripes.

@indiacn/search

Search input with icon, sizes, and optional clear button.

@indiacn/separator

Horizontal or vertical divider built on Radix Separator.

@indiacn/skeleton

Loading placeholder with rect/circle/pill/text shapes and pulse/wave animations.

@indiacn/spinner

Loading indicator with border/grow variants, theme colors, and sm/md/lg sizes.

@indiacn/stepper

Step indicator for multi-step flows with horizontal/vertical orientation and completed/active/warning/pending states.

@indiacn/tabs

Tab list with tabs, pills, and underline variants. Built on Radix Tabs.

@indiacn/toast

Notification toast with provider, hook, container, and theme variants.

@indiacn/tooltip

Hover/focus tooltip with 8 theme variants. Built on Radix Tooltip.

@indiacn/typography

21 typography components: 6 Display, 6 Headline, 3 Title, 3 Label, 3 Body. Required by every other IndiaCN component.