UX4G 2.0 design system for India — many accessible React components and an 8-color theme preset for native apps.
Floating panel of reading adjustments that apply to the whole document and persist.
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.
Person or entity avatar with picture, initials, or icon fallback. Four sizes, circular or rectangular.
Compact label for status, counts, or categories. 9 themes × 3 variants × 3 sizes × 2 shapes.
Navigation trail showing the current page's hierarchy.
Versatile button with filled/outlined/tonal/text variants, primary/success/destructive themes, sm/md/lg sizes, icon support, and loading state.
Groups related buttons horizontally or vertically with shared borders.
Date grid with day, month and decade views and full keyboard support.
Composable container with header, content, footer, image, title, and description sub-parts.
Slideshow with bar indicators, keyboard navigation and an accessible pause control.
Chart.js charts with UX4G presentation defaults and a screen-reader data table.
Tri-state checkbox with checked, indeterminate, and unchecked types across five states. Built on Radix Checkbox.
Tags, filters, or selections. 7 themes × 3 variants × 3 sizes; supports icons, avatars, dismiss, and selected state.
Dismiss control for modals, toasts and panels, with a guaranteed accessible name.
Single collapsible region powered by Radix Collapsible.
Date, range, time and date-time pickers behind a field or icon trigger.
Dropdown menu with items, checkbox/radio items, sub-menus, separators, and shortcuts.
Centred placeholder for empty lists and panels, with a themable UX4G illustration.
Edge tab opening a feedback form with a five-point rating.
Government site footer with link columns, social links and a bottom bar.
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.
Notification dot, count, or short status label. UX4G's Badge component.
Text field with sizes, validation states, leading icon and clear button.
Accessible caption for a form control. Built on Radix Label.
Vertical list with optional flush, horizontal, and contextual-color variants.
Dialog with sm/md/lg/xl/fullscreen sizes and optional scrollable body.
Government website header with a utility bar, brand, navigation and actions.
Slide-in panel from any side with optional body-scroll mode.
Page navigation with default and flat variants in 3 sizes.
Anchored floating panel powered by Radix Popover.
Linear progress bar with theme colors, sizes, striped + animated stripes.
Circular and half-circular progress indicator with an optional caption.
Mutually exclusive options with a 40px state layer and AA focus ring. Built on Radix Radio Group.
Search input with icon, sizes, and optional clear button.
Horizontal or vertical divider built on Radix Separator.
Loading placeholder with rect/circle/pill/text shapes and pulse/wave animations.
Single or range slider with optional value labels.
Loading indicator with border/grow variants, theme colors, and sm/md/lg sizes.
Step indicator for multi-step flows with horizontal/vertical orientation and completed/active/warning/pending states.
On/off toggle in default and small sizes; the handle grows on check per UX4G. Built on Radix Switch.
Data table with a header, selectable rows, row headers and a footer.
Tab list with tabs, pills, and underline variants. Built on Radix Tabs.
Multi-line text field with validation states and a character counter.
Hour, minute and second columns driven as listboxes.
Notification toast with provider, hook, container, and theme variants.
Hover/focus tooltip with 8 theme variants. Built on Radix Tooltip.
21 typography components: 6 Display, 6 Headline, 3 Title, 3 Label, 3 Body. Required by every other IndiaCN component.