Pesto UI

Rank List

A ranked list — position, a mark, a name, a figure — for top agents, top customers, top referrers. What a dashboard reaches for when a table would be four columns of chrome around two facts.

tsx
import { RankList, RankListItem } from "@pestoui/core"

With a proportional wash

bar is 0–1, normally the value over the largest value. It paints a wash behind the row as a second reading of the figure. The caller arrives already sorted.

  1. 1Guest Concierge2,540
  2. 2Niche Content Composer1,204
  3. 3Lead Researcher863
  4. 4Inbox Triage Assistant97

No numbers, small, with a second line

numbering="none" hides the ordinal and lets the media carry identity; the list is still an ordered list to a screen reader. size="sm" tightens the rows without shrinking the type.

  1. 1Support6 agents42%
  2. 2Research3 agents29%
  3. 3Content4 agents19%

Props

PropTypeDefaultDescription
numbering"ordinal" | "none""ordinal"On RankList. Whether the position is drawn. The element is an ol either way.
size"sm" | "default""default"On RankList. Row density — gaps and padding, never type.
labelReactNode—On RankListItem. Required. Names the row; truncates.
ranknumber—On RankListItem. Position in the ranking. Also feeds the li's value attribute, so a top five of a longer ranking reports true positions.
mediaReactNode—On RankListItem. Leading identity slot — a flag, an Avatar, a chart-token dot. Hidden from assistive tech; the label names the row.
sublabelReactNode—On RankListItem. Muted second line.
valueReactNode—On RankListItem. Trailing figure, in tabular numerals.
barnumber—On RankListItem. 0–1, clamped. Paints a proportional wash behind the row.
PreviousRadio GroupNext Rating

Pesto UI · 117 documented components