Components
Pie Chart
A hand-drawn pie or donut chart with hachure-filled slices and d3-shape arc math.
Installation
package manager
npx shadcn add https://bydefaulthuman.fun/r/pie-chart.jsonProps
PropTypeDefaultDescription
animateOnMountbooleantrueAnimates the component when it first renders.
data*PieChartSlice[]—
Data used to render the component.
donutbooleanfalseRenders the pie chart as a donut.
formatValue(v: number, total: number) => string(vFormats the displayed numeric value.
heightnumber260Sets the rendered height in pixels.
idstring—
Optional stable id used for sketch seeding and accessibility.
showLabelsbooleantrueShows labels directly on the chart.
showLegendbooleantrueShows the chart legend.
themeCrumbleTheme—
Overrides the global Crumble theme for this instance.
Donut variant
Custom colors
Custom value format
formatValue must come from a client component — it cannot be an inline arrow function in MDX.
Accessibility
PieChart conveys proportion visually, so provide supporting labels or summaries in text when the slice breakdown is important. Avoid relying on color alone to distinguish categories.
Examples
import { PieChart } from "@/components/crumble/ui/pie-chart";
<PieChart
data={[
{ label: "Design", value: 40 },
{ label: "Engineering", value: 35 },
{ label: "Marketing", value: 25 },
]}
/>;