# Category bar

A React component in [Beamline](https://beamline.io/)'s [Dashboard](https://beamline.io/components/dashboard) category. Live demo: https://beamline.io/components/category-bar

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](https://beamline.io/components/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

```tsx
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](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect)

## More in Dashboard

- [App shell](https://beamline.io/components/app-shell): The frame for every app screen: collapsible sidebar with grouped navigation, top bar and page.
- [Bar list](https://beamline.io/components/bar-list): Ranked horizontal bars with label inside and value at the end — top pages, sources, customers.
- [Insight cards](https://beamline.io/components/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](https://beamline.io/components/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](https://beamline.io/components/tracker): A row of status blocks for uptime, job runs or daily checks, with tooltips and a legend.