Enterprise UI Kit

How to use

Charts use Recharts. AreaChartRechart, BarChartRechart, LineChartRechart, PieChartRechart, DoughnutChartRechart. Copy the examples below.

1. Import

tsx

import {
  AreaChartRechart,
  BarChartRechart,
  LineChartRechart,
  PieChartRechart,
  DoughnutChartRechart,
} from "@/app/components/ui";

2. Data shape

tsx

const data = [
  { name: "Jan", value: 40 },
  { name: "Feb", value: 65 },
  { name: "Mar", value: 50 },
  { name: "Apr", value: 80 },
  { name: "May", value: 55 },
];

3. AreaChartRechart

tsx

<AreaChartRechart data={data} height={240} />

// With custom fill
<AreaChartRechart
  data={data}
  height={180}
  fillColor="rgb(16 185 129)"
  fillOpacity={0.35}
/>
<AreaChartRechart
  data={data}
  height={180}
  fillColor="rgb(59 130 246)"
  fillOpacity={0.4}
/>

4. BarChartRechart

tsx

<BarChartRechart data={data} height={240} />

// Custom bar color
<BarChartRechart data={data} height={240} barColor="rgb(34 197 94)" />

5. LineChartRechart

tsx

<LineChartRechart data={data} height={220} />

// Custom stroke
<LineChartRechart data={data} height={220} strokeColor="rgb(59 130 246)" />

6. PieChartRechart

tsx

const pieData = [
  { name: "A", value: 40 },
  { name: "B", value: 30 },
  { name: "C", value: 30 },
];

<PieChartRechart data={pieData} height={220} />

// Custom colors
<PieChartRechart
  data={pieData}
  height={220}
  colors={["rgb(34 197 94)", "rgb(59 130 246)", "rgb(234 179 8)"]}
/>

7. DoughnutChartRechart

tsx

const doughnutData = [
  { name: "Done", value: 45 },
  { name: "Pending", value: 35 },
  { name: "Cancel", value: 20 },
];

<DoughnutChartRechart data={doughnutData} height={220} />

// Custom colors and inner radius
<DoughnutChartRechart
  data={doughnutData}
  height={220}
  colors={["rgb(34 197 94)", "rgb(234 179 8)", "rgb(239 68 68)"]}
  innerRadiusPercent={60}
/>