Category bar
A React component in Beamline's Dashboard category.
One bar split into labelled ranges with an optional marker that names its range.
Use it for
- Where a value sits in bands (score, health)
- A small budget split.
Not for
- Many categories or exact comparison → bar-list.
Anatomy
- marker label (value · range)
- segments
- marker
- boundary ticks
- legend (swatch, name and share of the bar)
Variants
- showBoundaries: on, off
- legend: on, off
States
- with marker
- without
- loading (`loading`: the bar, boundary row and legend line as placeholders of their real height)
Keyboard
- Presentational; role=img with a full text description.
Motion
Segments ease to new shares over --pui-duration-standard.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
segments (required) | { label, value, color? }[] | — | |
marker | { value, label? } | — | |
style / ref | CSSProperties / native Ref | — | native HTMLDivElement |
classNames | CategoryBarClassNames | — | |
loading | boolean | false | bar, boundaries and legend as placeholders of their real height while the split loads |
Import
import { CategoryBar } from "@/components/category-bar/category-bar";Get it
Category bar is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Get Beamline · Connect your agent
More in Dashboard
- App shell: The frame for every app screen: collapsible sidebar with grouped navigation, top bar and page.
- Bar list: Ranked horizontal bars with label inside and value at the end — top pages, sources, customers.
- Insight cards: Findings from an agent, one per page: the sentence, the series it is about with their change, a chart to scrub that names each point, and a follow-up…
- Metric card: A KPI: label, a value that rolls to each new number, the change with arrow, sign and tone, a trend line and context; unmeasured values are hatched, never…
- Tracker: A row of status blocks for uptime, job runs or daily checks, with tooltips and a legend.