Arihant jain

Bar Chart

Dashboards 21

About

An animated recharts-based bar chart with vertical/horizontal layouts and hatch, duotone, gradient, stripe, stack, percent and glow fill variants for dashboards.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Bar Chart to your project and fits it to your theme.

Code

How Bar Chart is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import BarChart from "@/components/ui/bar-chart";

export default function BarChartDemo() {
  return (
    <div className="w-full max-w-2xl">
      <BarChart />
    </div>
  );
}

Dependencies

More by Arihant jain

View all
  • Footer section

    Footer section

    1.9K
  • Multistep Form

    Multistep Form

    714
  • Animated Drawer

    Animated Drawer

    695
  • Status Badge

    Status Badge

    521
  • Stacked Circular Footer

    Stacked Circular Footer

    429
  • Input Modal

    Input Modal

    335
  • Large Name Footer

    Large Name Footer

    200
  • Profile Dropdown

    Profile Dropdown

    197

More in Dashboards

View all
  • Dashboard with Collapsible Sidebar

    Dashboard with Collapsible Sidebar

    2.5K
  • Sidebar

    Sidebar

    296
  • Bar Chart

    Bar Chart

    3
  • SaaS Template

    SaaS Template

    2.5K
  • Rate Limit Meter

    Rate Limit Meter

    26
  • System Status Block

    System Status Block

    317
  • Chat template

    Chat template

    620
  • Course Design Cards

    Course Design Cards

    1.1K