Charts

Bar, line, area, and pie charts built on Recharts with dark-mode OKLCH styling.

Monthly Revenue

Bar chart with OKLCH colors

Code

import { Charts } from "@/components/ui/charts"

export default function Example() {
  return <Charts />
}

Installation

$npx particleui-cli add charts

TSX

import { Charts } from "@/components/ui/charts"

export default function Example() {
  return <Charts />
}

Prop	Type	Default	Required
children	React.ReactNode	—	yes
className	string	—	no
title	string	—	no
description	string	—	no
data	Record<string, unknown>[]	—	yes
dataKeys	string[]	—	yes
xKey	string	—	no
className	string	—	no
height	number	—	no
showLegend	boolean	—	no
showGrid	boolean	—	no
colors	string[]	—	no
data	Record<string, unknown>[]	—	yes
dataKeys	string[]	—	yes
xKey	string	—	no
className	string	—	no
height	number	—	no
showLegend	boolean	—	no
showGrid	boolean	—	no
colors	string[]	—	no
curved	boolean	—	no
data	Record<string, unknown>[]	—	yes
dataKeys	string[]	—	yes
xKey	string	—	no
className	string	—	no
height	number	—	no
showLegend	boolean	—	no
showGrid	boolean	—	no
colors	string[]	—	no
curved	boolean	—	no
stacked	boolean	—	no
data	PieChartDatum[]	—	yes
className	string	—	no
height	number	—	no
innerRadius	number	—	no
outerRadius	number	—	no
showLegend	boolean	—	no
colors	string[]	—	no

Source filecomponents/ui/charts.tsx

Typeui

Categoriesdata, blocks

npm dependenciesrecharts

Registry deps

Claude skill—