MiHCM
data/@mihcm/ui·v0.21.0·stable

CategoryBar

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

ConfiguratorExamplesUsageAccessibilityApi

Overview

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

Use CategoryBar from @mihcm/ui with MiHCM semantic tokens and Tailwind utility classes. Keep layout, spacing, color, and state styling token-based so the component remains responsive and dark-mode compatible.

Install and import

npx @mihcm/cli add CategoryBar
import { CategoryBar } from '@mihcm/ui/CategoryBar';

Usage rules

  • Prefer the component API first, then extend with tokenized className overrides.
  • Do not use raw hex colors, inline styles, or local primitive forks.
  • Test mobile width, keyboard access, focus states, disabled states, and empty data.
  • Keep labels and descriptions visible or available through accessible names.