Bar chart

Free

A compact bar series with an accessible label.

Installs components/ui/bar-chart.tsxDepends on none beyond ReactMotion none in component source

pnpm dlx shadcn@latest add https://caliperui.site/r/bar-chart.json

When to use #

Use it for

Showing a handful of values at a glance.
Inside cards and tables as a quick distribution.

Skip it when

Exact reading or many series; use a full chart.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/bar-chart.json

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx

import { BarChart } from "@/components/ui/bar-chart"

export function WeeklyVolume() {
  return (
    <div className="w-full max-w-xs">
      <BarChart label="Weekly volume" values={[12, 18, 9, 22, 15, 26, 20]} />
    </div>
  );
}

API reference #

BarChart

component

Also accepts the native props of its root element and a ref.

PropTypeDefault

values *readonly number[]—

label *string—

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.