Mini Segment Bar React component
Compact rows of small blocks, one per item, filled by status: progress for several teams at once, with a filter to light up one status.
About the Mini Segment Bar component
Mini Segment Bar shows progress for several groups in very little space. Each block is one item, coloured by its status, so you can count the work as well as see the proportions.
Every row uses the same block size, so a smaller team simply has a shorter bar. Point at a row for its exact counts, or pick a status in the legend to light it up across every row.
When to use it
Use it for sprint boards, onboarding checklists, review queues and any set of groups that move items through a few steps.
If a row can hold hundreds of items, a percentage bar reads better than single blocks.
Installation
Add the Mini Segment Bar component to your project with the shadcn CLI. It lands in components/mini-segment-bar.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/mini-segment-barOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<MiniSegmentBar /> accepts 10 props, all optional. It also accepts the usual <section> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| title | string | "Sprint progress" |
| subtitle | string | "One block per issue, filled in as work moves." |
| statuses In the order the cells fill. The last one usually has no colour. | { id: string; label: string; color?: string }[] | STATUSES |
| rows | { label: string; counts: Record<string, number>[] }[] | ROWS |
| periods | string[] | PERIODS |
| defaultPeriod Index of the period shown first. Defaults to the latest. | number | — |
| doneId The status counted as finished in the stats. | string | "done" |
| stuckId The status counted as stuck in the stats. | string | "blocked" |
| onPeriodChange | (period: string) => void | — |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "Sprint progress"
- subtitlestringDefault: "One block per issue, filled in as work moves."
- statuses
In the order the cells fill. The last one usually has no colour.
{ id: string; label: string; color?: string }[]Default: STATUSES - rows{ label: string; counts: Record<string, number>[] }[]Default: ROWS
- periodsstring[]Default: PERIODS
- defaultPeriod
Index of the period shown first. Defaults to the latest.
number - doneId
The status counted as finished in the stats.
stringDefault: "done" - stuckId
The status counted as stuck in the stats.
stringDefault: "blocked" - onPeriodChange(period: string) => void
npm dependencies
Installed for you by the shadcn CLI.
Mini Segment Bar FAQ
- What if a row has more items than fit?
- Above 48 items the blocks scale down together, so every row keeps the same proportions.
- Can I rename the statuses?
- Yes. Pass your own statuses in fill order, and set doneId and stuckId for the stats.
- Why do some rows look shorter?
- They have fewer items. Blocks keep one size across rows so counts compare fairly.
- Does the height change between sprints?
- No. Only the blocks change colour.
