In context
Release feed, environment status board, capability tags on a profile, and removable filter tokens.
Release feed
Tone choice carries semantic meaning.
NewToday, 09:42
v0.14.1 · Form module
TanStack Form wrappers for every primitive — drop-in field components.
ReleasedYesterday
v0.14.0 · MiHCM scope migration
Public packages migrated to @mihcm/* with trusted publishing.
Stable3 days ago
v0.13.0 · Tracker variants
bar / blocks / dots / timeline with weighted distribution.
Advisory5 days ago
CVE-2026-41907
Moderate — only reachable through Expo demo app. Tracked, not blocking.
Environments
Status pills + auxiliary outline tags for region/branch.
productionHealthy
mainus-east-1
stagingDeploying
release/0.14us-east-1
preview-pr-127Degraded
feat/section-demosiad1
sandboxIdle
maineu-west-2
Yashi EL
People Operations Lead · 4 active permissions
Capabilities
payroll · adminnotifications · allai-ui · previewdata · exportanalytics · viewerrecruiting · contributor
Filter tokens
Each badge carries a removable affordance.
typescriptreactnextjstailwind-4tanstack-form
5 active filters128 matches
All variants
DefaultSecondaryDestructiveSuccessWarningOutline
import { Badge } from '@mihcm/ui/Badge';
<div className="flex flex-wrap gap-2">
<Badge variant="default">Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Destructive</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="outline">Outline</Badge>
</div>With icon
Online
import { Badge } from '@mihcm/ui/Badge';
import { Circle } from '@mihcm/icons';
<Badge variant="success">
<Circle className="size-2 fill-current" />
Online
</Badge>In a card header
Leave Request
Pendingimport { Badge } from '@mihcm/ui/Badge';
<div className="flex items-center justify-between">
<h3 className="text-lg font-semibold">Leave Request</h3>
<Badge variant="warning">Pending</Badge>
</div>