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
Usage
TSX
import { Charts } from "@/components/ui/charts"
export default function Example() {
return <Charts />
}Props
| 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 |
Details
Source filecomponents/ui/charts.tsx
Typeui
Categoriesdata, blocks
npm dependenciesrecharts
Registry deps
Claude skill—