Chart

Charts drawn with Recharts in zeroUI's colours: quiet axes and grid, a small panel for the tooltip, slanted blocks for every swatch.

Install

terminal

# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/chart

Examples

Jobs taken in a week

chart-week.tsx

import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";import {  type ChartConfig,  ChartContainer,  ChartLegend,  ChartLegendContent,  ChartTooltip,  ChartTooltipContent,} from "@/components/zero/chart";const week = [  { day: "Mon", rush: 4, regular: 9 },  { day: "Tue", rush: 6, regular: 7 },  { day: "Wed", rush: 3, regular: 11 },  { day: "Thu", rush: 8, regular: 6 },  { day: "Fri", rush: 9, regular: 10 },  { day: "Sat", rush: 5, regular: 4 },  { day: "Sun", rush: 2, regular: 3 },];const config = {  rush: { label: "Rush", color: "var(--zero-chart-1)" },  regular: { label: "Regular", color: "var(--zero-chart-3)" },} satisfies ChartConfig;export default function ChartWeek() {  return (    <ChartContainer config={config} className="w-full max-w-lg">      <BarChart data={week} accessibilityLayer>        <CartesianGrid vertical={false} />        <XAxis dataKey="day" tickLine={false} axisLine={false} tickMargin={8} />        <ChartTooltip content={<ChartTooltipContent />} cursor />        <ChartLegend content={<ChartLegendContent />} />        <Bar dataKey="rush" fill="var(--color-rush)" stackId="jobs" />        <Bar dataKey="regular" fill="var(--color-regular)" stackId="jobs" />      </BarChart>    </ChartContainer>  );}

Behaviour

ChartContainer names the series in config and gives each its colour as --color-<key>, for the chart's parts to use. Five series colours come with it, all from the tokens: --zero-chart-1 the accent, 2 the text white, 3 the quiet grey, 4 the danger red, 5 the pressed accent.

Build the chart itself with Recharts' own parts (BarChart, LineChart, XAxis…); ChartTooltipContent and ChartLegendContent give its tooltip and legend zeroUI's look.

Props

ChartContainer

Prop	Type	Default	Description
config	ChartConfig	—	Each series: its label, colour and optional icon.

ChartTooltipContent

Prop	Type	Default	Description
indicator	"block" \| "line"	"block"	The swatch beside each row.
hideLabel / hideIndicator	boolean	false	Leave out the heading or the swatches.

ChartLegendContent

Prop	Type	Default	Description
hideIcon	boolean	false	Use the swatch even where the series has an icon.