Waffle chart

Share of seats
Category	Value	Share	Cells
Design	38	38.0%	38
Engineering	46	46.0%	46
Operations	16	16.0%	16

When to use #

Use it for

Percentages that should feel tangible.
A friendlier alternative to a pie.

Skip it when

More than five parts.

Installation #

terminal

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

Adds its 5 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 { WaffleChart } from "@/components/ui/waffle-chart"

export function WorkspaceShare() {
  return (
    <div className="w-full max-w-sm">
      <WaffleChart
        label="Share of seats"
        data={[
          { id: "design", label: "Design", value: 38 },
          { id: "eng", label: "Engineering", value: 46 },
          { id: "ops", label: "Operations", value: 16 },
        ]}
      />
    </div>
  );
}

API reference #

WaffleChart

component

PropTypeDefault

label *string—

data *readonly ChartPart[]—

unitstring""

loadingboolean—

errorstring—

classNamestring—

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

KeyBehaviour

HomeJumps to the first item or the minimum.

EndJumps to the last item or the maximum.

↑Moves to the previous item or value.

↓Moves to the next item or value.

←Moves to the previous item or value.

→Moves to the next item or value.

PageUpMoves by a larger step, or to the previous page.

PageDownMoves by a larger step, or to the next page.

EscapeCloses or cancels, then returns focus to where it came from.

Motion #

Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.