Back to Chart blocks
A reusable React Pie Chart component for Distribution Charts, Business Visualization, and Analytics Dashboards. Perfect for expense tracking, category visualization, and modern data visualization dashboards.
npm i framer-motionThis component supports Tailwind CSS dark: variants. To render this component in dark mode, add the dark className to your application's root element (for example, in app/layout.tsx).
Using <html>
<html className="dark"> ... </html>
Using <body>
<body className="dark"> ... </body>
Use Linear Reveal
Net Cashflow
Income
Expenses
$6K
$3K
$0
-$3K
-$6K
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec
A responsive React Chart component for creating Comparison Charts, Grouped Bar Charts, and Vertical Bar Charts to visualize cash flow, profit and loss, and business analytics in modern data visualization dashboards.
A reusable Budget vs Actual Chart for React dashboards, designed to compare planned and actual spending with grouped bar charts, budget analysis, and financial performance insights.
$80K
$75K
$70K
$65K
$60K
May 21
May 1
May 5
May 9
May 14
May 18
A reusable React Performance Chart designed to build Performance Trend Charts, KPI Trend Charts, Revenue Trend Charts, Dashboard Performance Charts, and interactive analytics dashboards.