components / bar-list

bar-list.

ranked horizontal bar list — each row's proportional bar is the row's own background, with the label on the left and the value right-aligned. rows can link out or fire a click handler; per-item colors are opt-in and tinted back so labels stay legible.

hours this year

  1. machine learning412.5 h
  2. cybersecurity186.0 h
  3. working out94.0 h
  4. reading61.5 h
  5. korean28.0 h
installation
bunx @justin06lee/chrome@latest add bar-list
props
nametypedefaultdescription
items *BarListItem[]-rows in render order. BarListItem is { id?, label, value, color?, href? }. sort before passing — limit keeps the first N, not the largest N.
maxnumber-bar scale ceiling; defaults to the largest value present.
formatValue(value: number) => stringStringvalue formatter for the right column.
showValuebooleantrueshow the value column; when false it stays available to screen readers.
limitnumber-render at most this many rows.
onItemClick(item: BarListItem) => void-makes rows buttons; ignored on rows that carry an href.
linkComponentReact.ElementType'a'anchor element/component for rows with an href — pass your router's Link.
classNamestring-