caliper uidocs
DemoSign inGet Pro

Race bars

Pro

Ranked bars that reorder as values change over time.

Installs components/ui/race-bars.tsxDepends on @radix-ui/react-slot, d3-shape, lucide-reactMotion none in component source
pnpm dlx shadcn@latest add @caliper/race-bars
Weekly downloadsQ1 2024
  1. react-kit92,000
  2. chart-core41,000
  3. form-lab38,000
  4. motion-kit22,000
  5. icon-set60,000
  6. tokens30,000
  7. data-table18,000

Q1 2024: react-kit, icon-set, chart-core lead

Weekly downloads
Timereact-kitchart-coreform-labmotion-kiticon-settokensdata-table
Q1 202492000410003800022000600003000018000
Q2 202498000520004400031000630003600027000
Q3 2024101000660004700045000640004400039000
Q4 2024104000810005200058000660004900055000
Q1 2025107000990005700074000670005800072000
Q2 20251090001180006100092000680006600091000
Q3 2025111000140000660001090006900071000118000
Q4 2025113000166000700001310007000079000149000

When to use #

Use it for

  • Telling a story about rank changes across periods.
  • Playing back a leaderboard.

Skip it when

  • Readers need to inspect one moment closely.
  • The ranking rarely changes.

Installation #

terminal
pnpm dlx shadcn@latest add @caliper/race-bars

Adds its 4 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx
import { RaceBars } from "@/components/ui/race-bars"

The worked example comes with Pro

The 35-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

RaceBars

component
PropTypeDefaultDescription
label *string—
items *readonly RaceItem[]—
frames *readonly RaceFrame[]—
topnumber8How many places to show.
intervalnumber900Milliseconds per frame while playing.
unitstring""
formatValue((value: number) => string)numberText
loadingboolean—
errorstring—
classNamestring—

Accessibility #

It exposes status semantics, with aria-label, aria-busy, aria-hidden and aria-valuetext kept in step with state. Changes that matter are announced through a live region.

No custom key handling; Tab and the native activation keys do the work.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.