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

CategoryBar

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

Configurator Examples Usage Accessibility Api

Live preview

Adjust the controls on the right; the preview and code update in real time.

Compliant64%Pending24%Escalated12%

example.tsxtsx

StackBlitz

import { CategoryBar } from '@mihcm/ui/CategoryBar';

export function Example() {
  return (
    <CategoryBar
  showLegend
  legendPosition="bottom"
    ></CategoryBar>
  );
}

Install

Both paths are valid. CLI ships the source into your repo (you own it). Install pins via npm.

npx @mihcm/cli add CategoryBar

Copies the source into components/ds/CategoryBar.tsx. You own the file. Use --out to override the directory or --force to overwrite.