# MiHCM Design System

> Agent-readable documentation map for the MiHCM Design System. Use this file as the first scan point, then fetch narrow pages by URL. Full context is available at /llms-full.txt and machine-readable metadata at /agent-map.json.

## Agent Scan Protocol
- Read /llms.txt first for routing and /agent-map.json when machine-readable metadata is easier.
- Use /llms-full.txt only when broad context is needed; prefer narrow pages first.
- Use /agent-tooling for MCP and skill installation.
- Use /components/{slug}/usage before examples, then /api and /accessibility for implementation details.
- Use MiHCM components, MiHCM icons, standard Tailwind utilities, and MiHCM semantic token classes. Do not hardcode raw visual values.
- Validate AI-generated UI descriptors with Zod through @mihcm/ai-ui or mihcm_validate_descriptor before render.

## Priority Entry Points
- [Agent scan guide](https://designsystem.mihcm.com/agent-scan): Start here when an AI agent needs to locate the right design-system context quickly.
- [Agent tooling](https://designsystem.mihcm.com/agent-tooling): MCP, skills, install links, hosted endpoint, workflow, and security boundary.
- [External developers](https://designsystem.mihcm.com/getting-started/external-developers): Consumer setup for packages, registry access, hosted MCP, and agent skills.
- [MiHCM-only Next.js](https://designsystem.mihcm.com/developing/mihcm-only-nextjs): Strict consumer-app enforcement for MiHCM components, tokens, and Tailwind classes.
- [Components](https://designsystem.mihcm.com/components): Human component catalog. Component-specific routes use /components/{slug}/{usage|examples|api|accessibility|configurator}.
- [Tokens](https://designsystem.mihcm.com/tokens): Design token overview and routes for colors, typography, spacing, grid, and motion.
- [AI-UI](https://designsystem.mihcm.com/ai-ui): Zod-validated generated UI renderer, supported components, and blocked surfaces.
- [Patterns](https://designsystem.mihcm.com/patterns): Production-grade application and marketing patterns built with MiHCM primitives.
- [Production block pattern library](https://designsystem.mihcm.com/downloads/agent/docs/patterns/production-block-patterns.md): Agent-readable rules for adapting SaaS block patterns into MiHCM components without raw visual values.
- [Templates](https://designsystem.mihcm.com/templates): Reusable page templates and implementation examples.
- [Security](https://designsystem.mihcm.com/downloads/agent/docs/SECURITY.md): Quick security reference for library, registry, MCP, and AI-UI work.
- [Architecture](https://designsystem.mihcm.com/downloads/agent/docs/ARCHITECTURE.md): System architecture, packages, data flow, and boundaries.
- [Wiki index](https://designsystem.mihcm.com/downloads/agent/docs/index.md): Full local wiki catalog. Read before drilling into specific wiki pages.

## Component Pages
- Pattern: `/components/{slug}/usage`, `/examples`, `/api`, `/accessibility`, `/configurator`.
- Start with `/components`, then fetch the specific component route.

## Core Wiki Files
- [Architecture](https://designsystem.mihcm.com/downloads/agent/docs/ARCHITECTURE.md): Architecture documentation.
- [Conventions](https://designsystem.mihcm.com/downloads/agent/docs/CONVENTIONS.md): Components: `PascalCase.tsx` · Utils/hooks: `camelCase.ts` · Tests: `[name].test.ts(x)` · Stories: `[Name].stories.tsx` · Schemas: `[Name].ts` in `schemas/`.
- [Security Quick Reference](https://designsystem.mihcm.com/downloads/agent/docs/SECURITY.md): > 32 rules. Full playbook: `docs/security-playbook.md` (100+ rules with IDs).
- [ADR-NNN —](https://designsystem.mihcm.com/downloads/agent/docs/decisions/000-template.md): **Status**: Proposed | Accepted | Deprecated · **Date**: YYYY-MM-DD
- [ADR-001 — NativeWind v4 + Tailwind 4 over Tamagui (v5 deferred — ADR-013)](https://designsystem.mihcm.com/downloads/agent/docs/decisions/001-nativewind-over-tamagui.md): **Status**: Accepted · **Date**: 2026-05-10
- [ADR-002 — Monorepo: pnpm + turborepo + changesets](https://designsystem.mihcm.com/downloads/agent/docs/decisions/002-monorepo-tooling.md): **Status**: Accepted · **Date**: 2026-05-10
- [ADR-003 — Archived GitHub Packages registry decision](https://designsystem.mihcm.com/downloads/agent/docs/decisions/003-github-packages.md): **Status**: Superseded for public consumer distribution by ADR-018 · **Date**: 2026-05-10
- [ADR-004 — Storybook with `@storybook/react-native-web-vite`](https://designsystem.mihcm.com/downloads/agent/docs/decisions/004-storybook-rnw-vite.md): **Status**: Accepted · **Date**: 2026-05-10
- [ADR-005 — Hybrid distribution: install + CLI copy-paste](https://designsystem.mihcm.com/downloads/agent/docs/decisions/005-hybrid-distribution.md): **Status**: Accepted · **Date**: 2026-05-10
- [ADR-006 — Karpathy guidelines as Priority 0 in CLAUDE.md](https://designsystem.mihcm.com/downloads/agent/docs/decisions/006-karpathy-priority-zero.md): **Status**: Accepted · **Date**: 2026-05-10
- [ADR-007 — Adopt the LLM-Wiki pattern for `docs/`](https://designsystem.mihcm.com/downloads/agent/docs/decisions/007-llm-wiki-pattern.md): **Status**: Accepted · **Date**: 2026-05-10
- [ADR-008 — License = MIT](https://designsystem.mihcm.com/downloads/agent/docs/decisions/008-mit-license.md): **Status**: Accepted · **Date**: 2026-05-10
- [ADR-009 — Private GitHub repo with public npm org packages](https://designsystem.mihcm.com/downloads/agent/docs/decisions/009-personal-account-scope.md): **Status**: Superseded by ADR-018 for registry distribution · **Date**: 2026-05-10 · **Updated**: 2026-05-22
- [ADR-010 — Isolate project monorepo inside `src/`](https://designsystem.mihcm.com/downloads/agent/docs/decisions/010-src-isolation.md): **Status**: Accepted · **Date**: 2026-05-10
- [ADR-011 — Publish gate without GitHub Environments](https://designsystem.mihcm.com/downloads/agent/docs/decisions/011-publish-gate-without-environments.md): **Status**: Accepted · **Date**: 2026-05-10
- [ADR-012 — Archived GitHub Packages PAT guidance](https://designsystem.mihcm.com/downloads/agent/docs/decisions/012-classic-pat-for-npm.md): **Status**: Superseded for consumer installs by ADR-018 · **Date**: 2026-05-10
- [ADR-013 — Version audit, 2026-05-10](https://designsystem.mihcm.com/downloads/agent/docs/decisions/013-version-audit-2026-05.md): **Status**: Accepted · **Date**: 2026-05-10
- [ADR-014 — Pin postcss via pnpm.overrides to fix CVE-2026-41305](https://designsystem.mihcm.com/downloads/agent/docs/decisions/014-postcss-override-fix.md): **Status**: Accepted · **Date**: 2026-05-10
- [ADR-015 — Major-bump cascade, 2026-05-10](https://designsystem.mihcm.com/downloads/agent/docs/decisions/015-major-bump-cascade.md): **Status**: Accepted · **Date**: 2026-05-10
- [ADR-016 — Primitives roadmap & implementation rules](https://designsystem.mihcm.com/downloads/agent/docs/decisions/016-primitives-roadmap.md): **Status**: Accepted · **Date**: 2026-05-11 · **Context**: ADR-001, ADR-005, ADR-013
- [ADR-017: External Developer Distribution Model](https://designsystem.mihcm.com/downloads/agent/docs/decisions/017-external-developer-distribution.md): Accepted. Updated by ADR-018 for public npm package distribution.
- [ADR-018 — Public npm package distribution with private source](https://designsystem.mihcm.com/downloads/agent/docs/decisions/018-public-npm-package-distribution.md): **Status**: Accepted · **Date**: 2026-05-21
- [Design Assets](https://designsystem.mihcm.com/downloads/agent/docs/getting-started/design-assets.md): Use this page to align Figma, code, docs, Storybook, MCP, and agent skills.
- [External Developer Guide](https://designsystem.mihcm.com/downloads/agent/docs/getting-started/external-developers.md): Use this guide when building an app with the MiHCM Design System from outside the core repo.
- [Registry Access](https://designsystem.mihcm.com/downloads/agent/docs/getting-started/registry-access.md): MiHCM packages are public npm packages under `@mihcm/*`. Consumers do not need a GitHub personal access token, package token, or project `.npmrc`.
- [Wiki Index](https://designsystem.mihcm.com/downloads/agent/docs/index.md): > Catalog of every page in this wiki. Always read FIRST when answering a question.
- [Add a Component](https://designsystem.mihcm.com/downloads/agent/docs/runbooks/add-component.md): > Step-by-step for adding a new universal primitive to `@mihcm/ui`.
- [Component Expandability Roadmap](https://designsystem.mihcm.com/downloads/agent/docs/runbooks/component-expandability-roadmap.md): > Status: planning. Use this roadmap before adding component props, examples, Storybook stories, MCP recipes, or AI-UI descriptors.
- [GitHub Repo Setup (After Initial Push)](https://designsystem.mihcm.com/downloads/agent/docs/runbooks/github-repo-setup.md): > One-time clicks needed in the GitHub web UI before we publish v1.
- [Install vs. Copy-Paste](https://designsystem.mihcm.com/downloads/agent/docs/runbooks/install-vs-copy-paste.md): > The MiHCM Design System ships every primitive **both ways** so a consumer can choose per-primitive. This runbook covers when to pick which and how to actually do it. Rationale: [ADR-005](../decisions/005-hybrid-distrib
- [MCP Setup](https://designsystem.mihcm.com/downloads/agent/docs/runbooks/mcp-setup.md): > First-party and external MCP servers for design-system work. Prefer the first-party `mihcm` server for repo facts, then external servers for source material or live platform state.
- [Next.js MiHCM-Only Enforcement](https://designsystem.mihcm.com/downloads/agent/docs/runbooks/nextjs-mihcm-only-enforcement.md): Use this runbook when a consumer app must build UI only from the MiHCM Design System.
- [Public Registry Setup (Consumer Side)](https://designsystem.mihcm.com/downloads/agent/docs/runbooks/private-registry-setup.md): > Historical filename kept for existing links. Current consumer installs use public npm packages, not a private registry.
- [Publish a Package](https://designsystem.mihcm.com/downloads/agent/docs/runbooks/publish-package.md): > CI-only with OIDC. We never run `npm publish` from a developer machine.
- [Remote MCP For Developers](https://designsystem.mihcm.com/downloads/agent/docs/runbooks/remote-mcp-for-developers.md): The hosted MiHCM MCP endpoint gives agents live design-system facts without cloning the repo:
- [Vercel deploy — docs site & Storybook](https://designsystem.mihcm.com/downloads/agent/docs/runbooks/vercel-deploy.md): We host **two separate Vercel projects** off the same repo with GitHub integration:
- [Security Playbook (Library & Registry Threat Model)](https://designsystem.mihcm.com/downloads/agent/docs/security-playbook.md): > Rules with IDs. Reference in reviews: "Violates DEPS-02".

## Docs Site Pages
- [Agent Scan](https://designsystem.mihcm.com/agent-scan): This page is the first stop for coding agents, documentation agents, and external AI tools that need to locate the right MiHCM Design System context quickly.
- [Agent tooling](https://designsystem.mihcm.com/agent-tooling): MiHCM ships agent tooling in two layers:
- [Generative UI, safely](https://designsystem.mihcm.com/ai-ui): `@mihcm/ai-ui` lets a language model return a UI as JSON. The renderer validates the descriptor, looks up each component in an explicit allowlist, caps recursion depth, and renders via the universal primitives. The same 
- [Contributing Agent Skills](https://designsystem.mihcm.com/contributing/agent-skills): Agent skills are workflow contracts. Keep them small, explicit, and safe.
- [Contributing Components](https://designsystem.mihcm.com/contributing/components): Use this checklist for every new or materially changed primitive.
- [Contributing Docs](https://designsystem.mihcm.com/contributing/docs): Docs are part of the product. A component is not complete until users and agents can understand it.
- [Designing](https://designsystem.mihcm.com/designing): The design language is small on purpose. Five principles, one token set, one prop surface. Everything else falls out of those.
- [Client and Server Components](https://designsystem.mihcm.com/developing/client-server-components): MiHCM UI components are browser-capable React components. In a Next.js App
- [Component Expandability Roadmap](https://designsystem.mihcm.com/developing/component-expandability): This roadmap defines how MiHCM components should become more useful without turning the API into unbounded prop sprawl.
- [MiHCM-only Next.js enforcement](https://designsystem.mihcm.com/developing/mihcm-only-nextjs): Use this setup when a Next.js app must build UI only from the MiHCM Design System.
- [Developing](https://designsystem.mihcm.com/developing): The same packages work on three runtimes. Packages are public on npm, so start with install, pick the section that matches your project, ship.
- [Design Assets](https://designsystem.mihcm.com/getting-started/design-assets): Use this page to align Figma, code, docs, Storybook, MCP, and agent skills.
- [External Developer Guide](https://designsystem.mihcm.com/getting-started/external-developers): Use this guide when building an app with the MiHCM Design System from outside the core repo.
- [Registry Access](https://designsystem.mihcm.com/getting-started/registry-access): MiHCM packages are public npm packages under `@mihcm/*`. Consumers do not need a GitHub personal access token, package token, or project `.npmrc`.
- [Changelog](https://designsystem.mihcm.com/help/changelog): Each package follows semver, driven by [changesets](https://github.com/changesets/changesets). Per-package changelogs live in the repository after the Version Packages PR runs; this page summarises the release train at a
- [FAQ](https://designsystem.mihcm.com/help/faq): No. MiHCM packages are public on npm. If you see `401` or `403` from `npm.pkg.github.com`, remove any `@mihcm:registry=https://npm.pkg.github.com` or legacy `@yashiel:registry=https://npm.pkg.github.com` override from yo
- [Must know](https://designsystem.mihcm.com/must-know): Five things that catch most people on their first build. Read this before you reach for a primitive.
- [Code Review Verification](https://designsystem.mihcm.com/verification/code-review): This page records the 2026-05-16 verification pass for the current component audit branch. It covers source review, documentation coverage, MCP, skills, AI-UI descriptor policy, security checks, functional checks, and re
- [Versioning And Stability](https://designsystem.mihcm.com/versioning): The design system uses semver through Changesets.

## Component Content Index
- [Accessibility](https://designsystem.mihcm.com/components/access-level-group/accessibility): Accessibility component documentation.
- [Examples](https://designsystem.mihcm.com/components/access-level-group/examples): 
- [Usage](https://designsystem.mihcm.com/components/access-level-group/usage): The default four levels match the MiHCM Security prototype:
- [Accessibility](https://designsystem.mihcm.com/components/accordion/accessibility): Accessibility component documentation.
- [Examples](https://designsystem.mihcm.com/components/accordion/examples): Single-open accordion with bottom borders. The classic FAQ pattern.
- [Accordion](https://designsystem.mihcm.com/components/accordion/usage): Vertically stacked collapsible sections for organizing content into expandable/collapsible panels.
- [AlertDialog accessibility](https://designsystem.mihcm.com/components/alert-dialog/accessibility): AlertDialog accessibility component documentation.
- [Examples](https://designsystem.mihcm.com/components/alert-dialog/examples): 
- [AlertDialog](https://designsystem.mihcm.com/components/alert-dialog/usage): A modal dialog that interrupts the user with important content and expects a response. Unlike Dialog, AlertDialog does NOT dismiss on backdrop click or Escape — the user must explicitly choose an action.
- [Alert accessibility](https://designsystem.mihcm.com/components/alert/accessibility): Alert must satisfy these before shipping.
- [Examples](https://designsystem.mihcm.com/components/alert/examples): 
- [Alert](https://designsystem.mihcm.com/components/alert/usage): Inline message banner for communicating status, warnings, or errors to the user.
- [AspectRatio -- Accessibility](https://designsystem.mihcm.com/components/aspect-ratio/accessibility): `AspectRatio` is a purely visual layout utility. It enforces a width-to-height
- [Examples](https://designsystem.mihcm.com/components/aspect-ratio/examples): A 16:9 wrapper for photos and hero images. The child fills the entire container.
- [Usage](https://designsystem.mihcm.com/components/aspect-ratio/usage): Usage component documentation.
- [AvatarGroup accessibility](https://designsystem.mihcm.com/components/avatar-group/accessibility): AvatarGroup accessibility component documentation.
- [Examples](https://designsystem.mihcm.com/components/avatar-group/examples): Avatars stack with a negative margin overlap. Pass `max` to cap the visible count.
- [AvatarGroup](https://designsystem.mihcm.com/components/avatar-group/usage): Stacked, overlapping row of Avatar components with an overflow "+N" count badge. Shows at most `max` avatars, then a counter for the rest.
- [Avatar accessibility](https://designsystem.mihcm.com/components/avatar/accessibility): Avatar accessibility component documentation.
- [Examples](https://designsystem.mihcm.com/components/avatar/examples): 
- [Avatar](https://designsystem.mihcm.com/components/avatar/usage): A composable user or entity portrait with automatic image-to-fallback handling.
- [Badge accessibility](https://designsystem.mihcm.com/components/badge/accessibility): Badge accessibility component documentation.
- [Examples](https://designsystem.mihcm.com/components/badge/examples): Release feed, environment status board, capability tags on a profile, and removable filter tokens.
- [Badge](https://designsystem.mihcm.com/components/badge/usage): A small status or labelling pill that composes inline with text.
- [Banner accessibility](https://designsystem.mihcm.com/components/banner/accessibility): Banner accessibility component documentation.
- [Examples](https://designsystem.mihcm.com/components/banner/examples): 
- [Banner](https://designsystem.mihcm.com/components/banner/usage): Full-width message strip at the top of a page or section. Optionally dismissible.
- [Breadcrumb accessibility](https://designsystem.mihcm.com/components/breadcrumb/accessibility): Breadcrumb accessibility component documentation.
- [Examples](https://designsystem.mihcm.com/components/breadcrumb/examples): 
- [Breadcrumb](https://designsystem.mihcm.com/components/breadcrumb/usage): A navigation trail showing the user's position in a page hierarchy. Composable sub-components let you build simple or complex breadcrumbs with separators, ellipsis for overflow, and current-page indicators.
- [Accessibility](https://designsystem.mihcm.com/components/button/accessibility): Button must satisfy these on every render before it ships.
- [Examples](https://designsystem.mihcm.com/components/button/examples): A realistic showcase — page-header CTAs, form actions, semantic tonal overrides, and a hard-edge toolbar with the loading state.
- [Usage](https://designsystem.mihcm.com/components/button/usage): Usage component documentation.
- [Accessibility](https://designsystem.mihcm.com/components/calendar/accessibility): Calendar must satisfy these on every render before it ships.
- [Examples](https://designsystem.mihcm.com/components/calendar/examples): 
- [Usage](https://designsystem.mihcm.com/components/calendar/usage): Calendar is now powered by `@daypicker/react` v10. The MiHCM wrapper does not hide DayPicker capabilities; it forwards the full v10 `DayPicker` prop surface and only adds tokenized default class names, larger targets, an
- [Card accessibility](https://designsystem.mihcm.com/components/card/accessibility): Card accessibility component documentation.
- [Examples](https://designsystem.mihcm.com/components/card/examples): 
- [Card](https://designsystem.mihcm.com/components/card/usage): A composable container surface for grouping related content and actions.
- [Accessibility](https://designsystem.mihcm.com/components/carousel/accessibility): Carousel must satisfy these on every render before it ships.
- [Examples](https://designsystem.mihcm.com/components/carousel/examples): Horizontal carousel with previous/next controls and 5 slides.
- [Carousel](https://designsystem.mihcm.com/components/carousel/usage): A slideshow component for cycling through a series of content panels with previous/next controls.
- [Accessibility](https://designsystem.mihcm.com/components/chart/accessibility): Chart must satisfy these on every render before it ships.
- [Examples](https://designsystem.mihcm.com/components/chart/examples): A grouped bar chart showing desktop vs mobile visitors by month.
- [Chart](https://designsystem.mihcm.com/components/chart/usage): A composable charting wrapper built on Recharts with themed colors, accessible tooltips, and a legend system.
- [Accessibility](https://designsystem.mihcm.com/components/checkbox-grid/accessibility): Accessibility component documentation.
- [Examples](https://designsystem.mihcm.com/components/checkbox-grid/examples): Permissions matrix, plan features comparison, supported-locale picker, and a single-column channel list.
- [Usage](https://designsystem.mihcm.com/components/checkbox-grid/usage): **Web**: multi-column grid with view tabs (All/Selected/Unselected).
- [Checkbox accessibility](https://designsystem.mihcm.com/components/checkbox/accessibility): Standard browser behaviour for `` — no custom key handling needed.
- [Examples](https://designsystem.mihcm.com/components/checkbox/examples): Four realistic surfaces — task list with strikethrough completion, terms-of-service gate, faceted filter list, and table row selection with indeterminate "select all".
- [Checkbox](https://designsystem.mihcm.com/components/checkbox/usage): A controlled checkbox supporting checked, unchecked, and indeterminate states.
- [Accessibility](https://designsystem.mihcm.com/components/collapsible/accessibility): Collapsible must satisfy these on every render before it ships.
- [Examples](https://designsystem.mihcm.com/components/collapsible/examples): 
- [Usage](https://designsystem.mihcm.com/components/collapsible/usage): 
- [Combobox -- Accessibility](https://designsystem.mihcm.com/components/combobox/accessibility): When the dropdown is closed, focus remains on the trigger so the user can tab to the next form control normally.
- [Examples](https://designsystem.mihcm.com/components/combobox/examples): Employee finder, country search across a long list, timezone picker, and a support-ticket router that adapts routing based on the chosen category.
- [Combobox](https://designsystem.mihcm.com/components/combobox/usage): Autocomplete search input that combines a text field with a filterable dropdown list.
- [Accessibility](https://designsystem.mihcm.com/components/command/accessibility): Command must satisfy these on every render before it ships.
- [Examples](https://designsystem.mihcm.com/components/command/examples): Embed a searchable, grouped list directly in the page.
- [Usage](https://designsystem.mihcm.com/components/command/usage): 
- [ContextMenu -- Accessibility](https://designsystem.mihcm.com/components/context-menu/accessibility): ContextMenu -- Accessibility component documentation.
- [Examples](https://designsystem.mihcm.com/components/context-menu/examples): 
- [ContextMenu](https://designsystem.mihcm.com/components/context-menu/usage): Right-click context menu powered by Radix. Shares visual styling with DropdownMenu for consistency.
- [DataTable accessibility](https://designsystem.mihcm.com/components/data-table/accessibility): DataTable accessibility component documentation.
- [Examples](https://designsystem.mihcm.com/components/data-table/examples): Click any column header to cycle through ascending, descending, and unsorted states.
- [DataTable](https://designsystem.mihcm.com/components/data-table/usage): Full-featured data table powered by TanStack Table v8, rendered with MiHCM Table primitives. Sorting, filtering, pagination, row selection, column visibility, expandable rows, column resizing, column/row pinning, groupin
- [Accessibility](https://designsystem.mihcm.com/components/date-picker/accessibility): DatePicker must satisfy these on every render before it ships.
- [Examples](https://designsystem.mihcm.com/components/date-picker/examples): Time-off single date, two-month reporting range, schedule sync with time-of-day, and a full-width form-field date with disabled-past constraint.
- [Usage](https://designsystem.mihcm.com/components/date-picker/usage): DatePicker now uses the same `@daypicker/react` v10 engine as `Calendar`. This keeps date, date range, date-time, and time-only UI on one dependency and one styling model.
- [Accessibility](https://designsystem.mihcm.com/components/dialog/accessibility): Accessibility component documentation.
- [Examples](https://designsystem.mihcm.com/components/dialog/examples): 
- [Dialog](https://designsystem.mihcm.com/components/dialog/usage): Accessible modal dialog for focused interactions that require user attention.
- [Drawer -- Accessibility](https://designsystem.mihcm.com/components/drawer/accessibility): When the drawer is open, focus is trapped within its content. Pressing `Tab` on the last focusable element wraps focus back to the first, and `Shift+Tab` on the first element wraps to the last. Focus never escapes to the
- [Examples](https://designsystem.mihcm.com/components/drawer/examples): 
- [Drawer](https://designsystem.mihcm.com/components/drawer/usage): A mobile-friendly bottom sheet / drawer with swipe-to-dismiss. Touch-optimised with spring physics.
- [DropdownMenu accessibility](https://designsystem.mihcm.com/components/dropdown-menu/accessibility): DropdownMenu accessibility component documentation.
- [Examples](https://designsystem.mihcm.com/components/dropdown-menu/examples): 
- [DropdownMenu](https://designsystem.mihcm.com/components/dropdown-menu/usage): A menu of actions triggered by a button click. Composable sub-components for maximum flexibility.
- [EmptyState accessibility](https://designsystem.mihcm.com/components/empty-state/accessibility): EmptyState accessibility component documentation.
- [Examples](https://designsystem.mihcm.com/components/empty-state/examples): 
- [EmptyState](https://designsystem.mihcm.com/components/empty-state/usage): Placeholder shown when a section, list, or table has no data to display. Centered layout with optional icon, title, description, and action button.
- [Accessibility](https://designsystem.mihcm.com/components/form/accessibility): Form fields satisfy these accessibility requirements out of the box.
- [Examples](https://designsystem.mihcm.com/components/form/examples): Email and password with `onChange` validation. Submit is disabled while the form is invalid using `form.Subscribe`.
- [Usage](https://designsystem.mihcm.com/components/form/usage): Form uses TanStack Form. Keep MiHCM form documentation, examples, and agent rules on this path; do not introduce React Hook Form for the design-system form layer.
- [Accessibility](https://designsystem.mihcm.com/components/hover-card/accessibility): HoverCard must satisfy these on every render before it ships.
- [Examples](https://designsystem.mihcm.com/components/hover-card/examples): 
- [Usage](https://designsystem.mihcm.com/components/hover-card/usage): 
- [Accessibility](https://designsystem.mihcm.com/components/icon-sidebar/accessibility): Accessibility component documentation.
- [Examples](https://designsystem.mihcm.com/components/icon-sidebar/examples): Five interaction models share the same `MainSidebarItem` tree. Pick the one that matches your shell — `drilldown` for classic app navigation, `floating` to keep content under the panel, `columns` for spatial drill-down p
- [Usage](https://designsystem.mihcm.com/components/icon-sidebar/usage): The same `MainSidebar` renders any of five interaction models via the `variant` prop:
- [InputOTP -- Accessibility](https://designsystem.mihcm.com/components/input-otp/accessibility): By default the component only accepts numeric digits (`0-9`). If the `pattern` prop is set to a custom regex, matching characters are accepted instead.
- [Examples](https://designsystem.mihcm.com/components/input-otp/examples): Two-factor authentication code, phone verification with expiry badge, account-recovery backup code, and a long license-key entry split across five groups.
- [InputOTP](https://designsystem.mihcm.com/components/input-otp/usage): One-time password / verification code input with individual character slots.
- [Accessibility](https://designsystem.mihcm.com/components/input/accessibility): Input must satisfy these on every render before it ships.
- [Examples](https://designsystem.mihcm.com/components/input/examples): Realistic compositions — sign-in, filter bar, profile editor with live invalid state, and a tokenized payment form.
- [Usage](https://designsystem.mihcm.com/components/input/usage): The component is a styled wrapper around the platform input. The wrapper owns the border, padding, and focus ring; the input is transparent and inherits the wrapper's text color so leading/trailing icons compose cleanly.
- [Label accessibility](https://designsystem.mihcm.com/components/label/accessibility): Label accessibility component documentation.
- [Examples](https://designsystem.mihcm.com/components/label/examples): Required + helper text, switch-style settings rows, radio choice list, and a checkbox preference grid — every control wired by `htmlFor`.
- [Label](https://designsystem.mihcm.com/components/label/usage): A form label that pairs with inputs, checkboxes, and switches for accessible field naming.
- [Accessibility](https://designsystem.mihcm.com/components/link/accessibility): Accessibility component documentation.
- [Examples](https://designsystem.mihcm.com/components/link/examples): Examples show semantic navigation links across prose, navigation, standalone actions, and external destinations.
- [Usage](https://designsystem.mihcm.com/components/link/usage): Usage component documentation.
- [Accessibility](https://designsystem.mihcm.com/components/logo/accessibility): Accessibility component documentation.
- [Examples](https://designsystem.mihcm.com/components/logo/examples): 
- [Usage](https://designsystem.mihcm.com/components/logo/usage): > **Approved-asset only.** Earlier versions shipped an inline SVG fallback that drifted from the brand-team source. `Logo` now defaults `brand` to `'mihcm'` and renders the approved `/brand/logos/mihcm-primary.svg` direc
- [Accessibility](https://designsystem.mihcm.com/components/menubar/accessibility): Menubar must satisfy these on every render before it ships.
- [Examples](https://designsystem.mihcm.com/components/menubar/examples): A full menu bar with File, Edit, and View menus including keyboard shortcuts.
- [Menubar](https://designsystem.mihcm.com/components/menubar/usage): A horizontal menu bar with dropdown menus, modeled after desktop application menu bars.
- [NavigationMenu -- Accessibility](https://designsystem.mihcm.com/components/navigation-menu/accessibility): implicit `role="navigation"` landmark.
- [Platform](https://designsystem.mihcm.com/components/navigation-menu/examples): A flat navigation bar with no dropdowns. Apply `navigationMenuTriggerStyle()` to
- [NavigationMenu](https://designsystem.mihcm.com/components/navigation-menu/usage): Top-level site navigation bar with dropdown mega-menus. Powered by Radix.
- [Accessibility](https://designsystem.mihcm.com/components/notification-badge/accessibility): The badge has no transitions; nothing to honour beyond the system default.
- [Examples](https://designsystem.mihcm.com/components/notification-badge/examples): 
- [Usage](https://designsystem.mihcm.com/components/notification-badge/usage): The badge **absolutely-positions itself** in the chosen corner of its parent. The parent **must** be `position: relative` (web) or a wrapping `` (native):
- [Accessibility](https://designsystem.mihcm.com/components/org-selector/accessibility): OrgSelector implements the [WAI-ARIA Authoring Practices TreeView pattern](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/). All trees expose the standard tree semantics regardless of variant.
- [Examples](https://designsystem.mihcm.com/components/org-selector/examples): The most common HR form-field shape — one node, popover trigger.
- [Usage](https://designsystem.mihcm.com/components/org-selector/usage): How the closed trigger renders the current selection.
- [Accessibility](https://designsystem.mihcm.com/components/page-shell/accessibility): 
- [Examples](https://designsystem.mihcm.com/components/page-shell/examples): 
- [Usage](https://designsystem.mihcm.com/components/page-shell/usage): **Web**: three-region scaffold with desktop sidebar column, mobile bottom-menu anchor, sticky title bar, internal scroll.
- [Accessibility](https://designsystem.mihcm.com/components/pagination/accessibility): Accessibility component documentation.
- [Examples](https://designsystem.mihcm.com/components/pagination/examples): A standard pagination with 10 pages, the 5th page marked as active.
- [Pagination](https://designsystem.mihcm.com/components/pagination/usage): Page navigation with numbered links and previous/next buttons. Composable sub-components let you build simple or complex page navigators.
- [Accessibility](https://designsystem.mihcm.com/components/popover/accessibility): Accessibility component documentation.
- [Examples](https://designsystem.mihcm.com/components/popover/examples): A common pattern: anchor a filter form to a toolbar button. Use `size="lg"` for multi-field layouts.
- [Usage](https://designsystem.mihcm.com/components/popover/usage): Usage component documentation.
- [Accessibility](https://designsystem.mihcm.com/components/popper/accessibility): Popper is a positioning primitive. It handles geometry, not complete widget semantics.
- [Examples](https://designsystem.mihcm.com/components/popper/examples): Use Popper when the layer needs low-level positioning control.
- [Usage](https://designsystem.mihcm.com/components/popper/usage): `Popper` uses the official Popper v2 React integration:
- [Progress accessibility](https://designsystem.mihcm.com/components/progress/accessibility): Progress accessibility component documentation.
- [Examples](https://designsystem.mihcm.com/components/progress/examples): Pass a `value` (0-100) for a fixed progress bar. The fill tracks the percentage.
- [Usage](https://designsystem.mihcm.com/components/progress/usage): Progress uses the fixed `primary` brand tone by default. Use `segmented` only when progress communicates health, risk, or completion bands. The fill transitions width and tone together so range changes fade smoothly:
- [RadioGroup accessibility](https://designsystem.mihcm.com/components/radio-group/accessibility): RadioGroup accessibility component documentation.
- [Examples](https://designsystem.mihcm.com/components/radio-group/examples): Billing cadence with card-shaped rows, sprint feedback 1–5, role tier picker with helper text, and an equipment shipping selector.
- [RadioGroup](https://designsystem.mihcm.com/components/radio-group/usage): Mutually exclusive option selection. Renders a `fieldset` with `role="radiogroup"` and individual `RadioGroupItem` buttons with `role="radio"`.
- [Resizable — Accessibility](https://designsystem.mihcm.com/components/resizable/accessibility): All arrow-key interactions respect `minSize` and `maxSize` constraints, so users
- [Examples](https://designsystem.mihcm.com/components/resizable/examples): 
- [Resizable](https://designsystem.mihcm.com/components/resizable/usage): Resizable panel layout with draggable dividers for split-pane interfaces.
- [RichTextEditor accessibility](https://designsystem.mihcm.com/components/rich-text-editor/accessibility): RichTextEditor accessibility component documentation.
- [Examples](https://designsystem.mihcm.com/components/rich-text-editor/examples): 
- [RichTextEditor](https://designsystem.mihcm.com/components/rich-text-editor/usage): Lexical-powered rich text editor with four progressive toolbar variants. Web only — native apps should use a platform-specific editor.
- [Accessibility](https://designsystem.mihcm.com/components/scroll-area/accessibility): ScrollArea must satisfy these on every render before it ships.
- [Examples](https://designsystem.mihcm.com/components/scroll-area/examples): A fixed-height list with thin scrollbar.
- [Usage](https://designsystem.mihcm.com/components/scroll-area/usage): ScrollArea accepts all standard Radix ScrollArea root props plus `className` and `children`.
- [Accessibility](https://designsystem.mihcm.com/components/search-field/accessibility): No transitions on the field itself. Animation that depends on search results (popover open/close) lives in the host.
- [Examples](https://designsystem.mihcm.com/components/search-field/examples): Large workspace search with shortcut hint, live directory filter, help-center scoped search, and a `noClear` command bar.
- [Usage](https://designsystem.mihcm.com/components/search-field/usage): `SearchField` is intentionally controlled — you own the value:
- [Accessibility](https://designsystem.mihcm.com/components/section-header/accessibility): Accessibility component documentation.
- [Examples](https://designsystem.mihcm.com/components/section-header/examples): 
- [Usage](https://designsystem.mihcm.com/components/section-header/usage): The component intentionally renders a ``, not a heading element — it doesn't know what level fits your page outline. If heading semantics matter (most cases), pass an `` / `` as the `title`:
- [Select accessibility](https://designsystem.mihcm.com/components/select/accessibility): Select accessibility component documentation.
- [Examples](https://designsystem.mihcm.com/components/select/examples): Workspace region picker, inline sort selector, role assignment with destructive tone option, and a grouped tech-stack picker with section labels and separators.
- [Select](https://designsystem.mihcm.com/components/select/usage): Select supports two APIs:
- [Separator accessibility](https://designsystem.mihcm.com/components/separator/accessibility): In most cases (card sections, menu items, toolbar groups), `decorative=true` is correct.
- [Examples](https://designsystem.mihcm.com/components/separator/examples): 
- [Separator](https://designsystem.mihcm.com/components/separator/usage): A visual divider between sections of content. Supports horizontal and vertical orientations.
- [Accessibility](https://designsystem.mihcm.com/components/sheet/accessibility): Accessibility component documentation.
- [Examples](https://designsystem.mihcm.com/components/sheet/examples): The most common pattern: a right-side panel for editing details without leaving the page.
- [Sheet](https://designsystem.mihcm.com/components/sheet/usage): A slide-out panel that appears from a screen edge, used for supplementary content that doesn't require a full page navigation.
- [Accessibility](https://designsystem.mihcm.com/components/sidebar/accessibility): Sidebar must satisfy these on every render before it ships.
- [Examples](https://designsystem.mihcm.com/components/sidebar/examples): A full shell with sidebar navigation and a main content inset.
- [Sidebar](https://designsystem.mihcm.com/components/sidebar/usage): A composable application sidebar for persistent navigation. It handles desktop collapse state, mobile sheet rendering, keyboard toggling, and the named navigation landmark.
- [Skeleton accessibility](https://designsystem.mihcm.com/components/skeleton/accessibility): 
- [Examples](https://designsystem.mihcm.com/components/skeleton/examples): Four real loading layouts — dashboard tiles, inbox list, profile pane, and a report table — all preserving the destination layout.
- [Skeleton](https://designsystem.mihcm.com/components/skeleton/usage): A pulsing placeholder block for loading states. Always prefer skeletons over spinners where possible — they preserve layout and communicate structure.
- [Accessibility](https://designsystem.mihcm.com/components/slider/accessibility): Slider must satisfy these on every render before it ships.
- [Examples](https://designsystem.mihcm.com/components/slider/examples): Notification volume with track labels, two-thumb price-range filter, anomaly-threshold with tone Badge, and a live image-filter chain.
- [Usage](https://designsystem.mihcm.com/components/slider/usage): Pass two values to get a dual-thumb range slider.
- [Accessibility](https://designsystem.mihcm.com/components/stat-card/accessibility): Accessibility component documentation.
- [Examples](https://designsystem.mihcm.com/components/stat-card/examples): Seven layout variants in real product surfaces — `default` quick-stats, `inline` summary rows, `delta` deltas, `trend` with inline SparkChart, `progress` toward goal, `distribution` segmented breakdown, and a `hero` summ
- [Usage](https://designsystem.mihcm.com/components/stat-card/usage): The card is intentionally compact (`py-4 px-3`). For higher-density dashboards, wrap multiple StatCards in a single Card and use a Separator between them.
- [Accessibility](https://designsystem.mihcm.com/components/status-badge/accessibility): Accessibility component documentation.
- [Examples](https://designsystem.mihcm.com/components/status-badge/examples): 
- [Usage](https://designsystem.mihcm.com/components/status-badge/usage): Usage component documentation.
- [Switch accessibility](https://designsystem.mihcm.com/components/switch/accessibility): Standard `` behaviour — no custom key handling needed.
- [Examples](https://designsystem.mihcm.com/components/switch/examples): Notification preferences, feature flags, third-party integrations, and a security posture checklist.
- [Switch](https://designsystem.mihcm.com/components/switch/usage): A binary on/off toggle for settings that take effect immediately.
- [Table accessibility](https://designsystem.mihcm.com/components/table/accessibility): Table accessibility component documentation.
- [Examples](https://designsystem.mihcm.com/components/table/examples): 
- [Table](https://designsystem.mihcm.com/components/table/usage): Semantic data table with 5 visual variants. Variant context flows from the root `` to all sub-components automatically — no extra props needed on children.


## Downloads
- [Agent map JSON](/agent-map.json): machine-readable route/source map.
- [Full Markdown bundle](/llms-full.txt): broad context bundle for agents with large context windows.
- [Skill pack manifest](/downloads/skills/mihcm-skill-pack.json): public agent skill and MCP config downloads.