Design it once.
Ship it anywhere.
Keep it consistent.

Primary action affordance. Seven variants, six sizes, icon slots, rounded or hard-edge shapes, and tokenized Tailwind class overrides. Universal across web and native.

Semantic navigation and reference primitive. Seven variants, safe external-link defaults, and tokenized Tailwind overrides. Universal across web and native.

Single-line text entry. Default + destructive variants, three sizes, optional leading/trailing icons. WCAG 2.1 AA out of the box (`aria-invalid`, `aria-required`, focus ring).

Type primitive. Type scale, weight, and tone — semantic tokens only.

Inline message banner with `Alert`, `AlertTitle`, `AlertDescription` pieces. `role="alert"` for screen-reader announcements.

User portrait. Compose `Avatar` + `AvatarImage` + `AvatarFallback` — fallback shows on image error and during load.

Small status / labelling pill. Six variants spanning informational, semantic, and outline.

Composable container surface. Six pieces (`Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, `CardFooter`) for predictable layout.

Controlled checkbox with three states — `true`, `false`, `"indeterminate"`. `aria-checked="mixed"` for indeterminate.

Form field label. Pairs with `Input`/`Switch`/`Checkbox` via `htmlFor`. Optional `required` suffix.

Visual divider. `decorative` (default) is hidden from screen readers; pass `decorative={false}` for semantic boundaries.

Pulsing placeholder for loading states. Always prefer skeletons over spinners to preserve layout.

Controlled on/off toggle. `role="switch"` with `aria-checked` driven by `checked`.

Small inline icon + label chip used to mark something as "Module enabled" / "No permission" / "Active". Five built-in tones plus an optional leading icon.

Tiny counter dot that overlays a parent (the bell icon, an inbox icon, etc.). Renders inside any `position: relative` container; absolutely-positions in the chosen corner.

Form-field-shaped picker for hierarchical org structures (departments, teams, business units, locations). Five variants (popover/inline/columns/drawer/command) and four selection modes (single/multi/cascade/include-descendants) compose freely. Full WAI-ARIA TreeView keyboard model, lazy loading, optional virtualization for large trees.

Two-line header (title + optional muted description) with an optional trailing action slot. Used inside cards and editors.

Centered icon tile + big number + caption. The "Quick stats" row primitive — six tones to match the metric meaning.

Sticky page heading shown under the TopBar. `icon` + `supertitle` + `title` + optional `action` slot.

Figma-style main app sidebar. Compact 46px desktop rail, mobile bottom menu, expandable drilldown panel with icon, title, description, badges, nested levels, and custom panel slots. `IconSidebar` remains as a compatibility alias.

Segmented app header with `Logo`, home/back parallelogram segments, notifications, profile, dividers, and utility actions. Universal across web and native with a simplified native bar.

Reusable MiHCM logo primitive. Built-in tokenized mark plus approved brand assets that scale through the shared size prop. Universal across web and native.

Application layout scaffold: TopBar on top, Main Sidebar on desktop, mobile bottom-menu anchor, TitleBar + scrollable content on the right. Web only.

Sugar wrapper around `Input` that ships the magnifier glyph, a clear button, and `role="search"`. Universal across web and native.

4-state segmented button: None / View / Edit / Full Access. Each option has its own brand color when active.

Multi-select grid with summary, view tabs (All / Selected / Unselected), bulk select-all/clear, filter, and responsive grid. Web only.

Dual-pane shuttle: unassigned on the left, assigned on the right, four move buttons in the middle. Per-side filter and multi-select. Web only.

Semantic data table with 5 visual variants (default, bordered, striped, minimal, card). Variant context flows to all sub-components automatically.

Accessible modal dialog built on native `<dialog>`. Composable: Dialog, DialogContent, DialogHeader, DialogBody, DialogFooter, DialogTitle, DialogDescription, DialogClose.

Controlled tabbed interface with full keyboard navigation. Composable: Tabs, TabsList, TabsTrigger, TabsContent.

Pressable toggle between on/off states. Also exports ToggleGroup for single/multi-select groups.

Hover/focus tooltip (web) or long-press tooltip (native). Configurable side and delay.

Click-triggered floating panel anchored to a trigger. Composable: Popover, PopoverTrigger, PopoverContent.

Low-level Popper.js v2 positioning primitive for custom floating panels, virtual anchors, arrows, portals, and modifiers.

Lexical-powered rich text editor with 4 progressive toolbar variants. Web only.

Multi-line text entry. Shares the `variant` + `invalid` model with Input.

Mutually exclusive option selection. Fieldset with RadioGroupItem children sharing state via React Context.

Custom dropdown for single-value selection. Composable: Select, SelectTrigger, SelectContent, SelectItem, SelectGroup, SelectLabel, SelectSeparator.

Non-dismissable modal requiring a user response. No backdrop dismiss, no Escape close. Composable sub-components mirror Dialog.

Horizontal bar showing completion against a max value. Determinate, indeterminate, fixed-tone, or threshold-segmented.

Navigation trail showing page hierarchy. Composable: Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis.

Slide-out panel from a screen edge. Composable: Sheet, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, SheetClose. Dismisses on backdrop click and Escape.

Brief non-blocking notification that auto-dismisses. Imperative `toast()` API with semantic variants, appearance styles, and configurable duration.

Action menu triggered by a button click. Composable: DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut.

Page navigation with numbered links and previous/next buttons. Composable: Pagination, PaginationContent, PaginationItem, PaginationLink, PaginationPrevious, PaginationNext, PaginationEllipsis.

Vertically stacked collapsible sections. Supports single (one open) and multiple (any number open) modes with animated height transitions.

Label chip with optional remove action. Like Badge but interactive — can be removed.

Full-width message strip at top of page or section. Optionally dismissible.

Centered placeholder for empty sections — optional icon, title, description, and action button.

Stacked, overlapping row of Avatar components with an overflow "+N" count. The `size` prop forwards to children. `max` controls the visible limit.

Full-featured data table powered by TanStack Table v8. Sorting, filtering, pagination, selection, column visibility, expandable rows, column resize, column/row pinning, grouping, and faceted filtering — all via boolean props. 5 visual variants.

Compact ranked-value list with tokenized bars, optional row links, icons, value formatting, and motion-backed width animation.

Segmented distribution bar for allocation, status, and risk summaries with optional legend and tokenized segment classes.

File drop and browse area powered by react-dropzone. Exposes accepted and rejected files without reading file contents.

Circular progress indicator for KPI cards and compact status summaries with semantic tones and value formatting.

Card-style single-selection control built on RadioGroup semantics for plans, permissions, and setup choices.

Reorderable list powered by dnd-kit sortable primitives with pointer and keyboard sensors plus a renderItem slot for rich rows.

Small D3-backed trend chart for dense KPI rows, table cells, and dashboard cards.

Link-based tab navigation for routed sections. Use Tabs for local state and TabNavigation when each item is a URL.

Dense sequence of status segments for uptime, workflow coverage, and timeline availability.

Full-featured form system integrated with TanStack React Form v1. Field wrappers include input, search, textarea, checkbox, switch, select, combobox, radio, radio cards, date, date range, checkbox grid, dropzone, field arrays, subscriptions, effects, and actions.

Date grid powered by @daypicker/react v10. Forwards the full DayPicker prop surface with MiHCM tokenized geometry, focus, and selection styles.

Simple expand/collapse panel powered by Radix. Single toggle — no item/group semantics like Accordion.

Command palette (⌘K) powered by cmdk. Composable search + item groups + keyboard navigation.

DayPicker v10-backed trigger + popover for single dates, ranges, date-time, and time-only fields. Calendar and DatePicker share one date engine.

Preview card that appears on hover. Ideal for user profile previews and link details. Powered by Radix.

Custom-styled scrollable container with thin translucent scrollbars. Powered by Radix.

Range input with single or dual thumbs. Three sizes. Powered by Radix Slider.

Locks a container to a given width-to-height ratio. Uses CSS aspect-ratio on web and RN aspectRatio style on native.

Right-click context menu powered by Radix. Sub-menus, checkboxes, radio items, keyboard shortcuts.

One-time password / verification code input with individual character slots. Powered by input-otp.

Mobile-friendly bottom sheet / drawer with swipe-to-dismiss. Touch-optimised with spring physics via vaul.

Autocomplete search input combining a text field with a filterable dropdown list. Ideal for large option sets.

Resizable panel layout with draggable dividers. Horizontal/vertical split panes for editors, dashboards, admin layouts.

Top-level site navigation bar with dropdown mega-menus. Animated viewport and indicator via Radix.

Composable carousel powered by Embla. Supports horizontal/vertical orientation, loop, and prev/next controls.

Theme-aware Recharts wrapper. ChartContainer injects CSS custom properties from a ChartConfig while preserving the full Recharts composition and prop surface.

Horizontal menu bar with dropdown menus, powered by Radix. Supports density, surfaces, alignment, dropdown sizing, portal behavior, animation, item tones, shortcuts, checkbox/radio items, and submenus.

Composable, collapsible sidebar with mobile sheet support, keyboard shortcuts (Ctrl/Cmd+B), and cookie persistence.