Installation

Install and configure Mario Charts in your React project.

Quick Start

The easiest way to get started is using the Mario Charts CLI. It automatically handles dependencies, configuration, and file setup.

Initialize your project

bash

npx mario-charts@latest init

Add components

bash

npx mario-charts@latest add bar-chart

Start using in your code

tsx

import { BarChart } from "@/components/charts/bar-chart";

const data = [
  { month: "Jan", revenue: 4500 },
  { month: "Feb", revenue: 5200 },
  { month: "Mar", revenue: 4800 }
];

export function Dashboard() {
  return (
    <BarChart 
      data={data}
      x="month"
      y="revenue"
    />
  );
}

You're all set!

That's it! The CLI automatically installed dependencies, configured your project, and added the component files. You can now use Mario Charts components in your React application.

Manual Installation

If you prefer to configure everything manually, follow these steps.

Install dependencies

Install the required peer dependencies for Mario Charts components.

bash

npm install recharts framer-motion \
  @radix-ui/react-tooltip \
  class-variance-authority clsx tailwind-merge

Configure Tailwind CSS

Add chart colors to your tailwind.config.ts file.

import type { Config } from "tailwindcss";

const config: Config = {
  content: [
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      colors: {
        chart: {
          "1": "hsl(239 84% 67%)",
          "2": "hsl(262 83% 58%)",
          "3": "hsl(180 98% 31%)",
          "4": "hsl(47 96% 53%)",
          "5": "hsl(339 82% 67%)",
        },
      },
    },
  },
  plugins: [],
};

export default config;

Add global CSS

Add chart color variables to your global CSS file.

css

@import "tailwindcss";

:root {
  --chart-1: 239 84% 67%;
  --chart-2: 262 83% 58%;
  --chart-3: 180 98% 31%;
  --chart-4: 47 96% 53%;
  --chart-5: 339 82% 67%;
}

Create utils file

Create lib/utils.ts for the utility function.

import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Next Steps

You're ready to go! 🎉

That's it! You can now start using Mario Charts components in your project.

Start with Bar Chart Browse Components

Need help? Explore the component library in the sidebar or check back soon for more documentation.