Modern React component library focused on charts and dashboards with beautiful visuals out-of-the-box
Mario Charts prioritizes ease of use, excellent developer experience, and zero lock-in through copy-and-paste components.
- 📈 Beautiful Charts Out-of-the-Box - Stunning visuals with minimal configuration
- 🎨 Multiple Variants & Orientations - Filled/outline styles with vertical/horizontal layouts
- 📱 Responsive by Default - Works perfectly on all screen sizes
- ♿ Accessibility First - Built with Radix UI primitives for full accessibility
- 🎭 Smooth Animations - Powered by Framer Motion for delightful interactions
- 📦 Zero Lock-in - Copy-and-paste components directly to your project
- 🔧 TypeScript Native - Full type safety and excellent IntelliSense
- ⚡ Performance Optimized - Virtualization, memoization, and tree-shaking
# Initialize Mario Charts in your project
npx mario-charts@latest init
# Add individual components
npx mario-charts@latest add bar-chart kpi-card
# Install peer dependencies
npm install recharts date-fns framer-motion @radix-ui/react-tooltipimport { BarChart, KPICard } from '@/components/charts';
const data = [
{ name: 'Jan', revenue: 1000 },
{ name: 'Feb', revenue: 1500 },
{ name: 'Mar', revenue: 1200 },
] as const;
export function Dashboard() {
return (
<div className="p-6 space-y-6">
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<KPICard
title="Total Revenue"
value={3700}
change={{ value: 12.5, type: "increase", period: "last month" }}
/>
<KPICard
title="Active Users"
value="2.4K"
change={{ value: 8.2, type: "increase", period: "last week" }}
/>
<KPICard
title="Conversion Rate"
value="3.2%"
change={{ value: 2.1, type: "decrease", period: "yesterday" }}
/>
</div>
<BarChart
data={data}
x="name"
y="revenue"
variant="filled"
orientation="vertical"
onBarClick={(data, index) => {
console.log('Clicked:', data, index);
}}
/>
</div>
);
}// Outline variant with horizontal orientation
<BarChart
data={data}
x="product"
y="sales"
variant="outline"
orientation="horizontal"
height={400}
colors={['#3b82f6', '#10b981', '#f59e0b', '#ef4444']}
/>
// Vertical filled bars with custom styling
<BarChart
data={data}
x="month"
y="revenue"
variant="filled"
orientation="vertical"
animation={true}
onBarClick={(data, index) => {
// Handle bar interactions
console.log(`Selected: ${data.month} - $${data.revenue}`);
}}
/>- ✅ BarChart - Responsive bar charts with filled/outline variants, vertical/horizontal orientations, and smooth animations
- ✅ LineChart - Time series line charts
- ⏳ KPICard - Metric cards with sparklines
- ⏳ AreaChart - Area charts for cumulative data
- ⏳ PieChart/DonutChart - Pie and donut charts
- ⏳ DataTable - Data tables with filters and sorting
- ✅ StackedBarChart - Multi-series bar charts
- ⏳ GaugeChart - Progress and goal indicators
- ⏳ ScatterPlot - Correlation analysis charts
- ⏳ Heatmap - Pattern recognition charts
- ⏳ ProgressBar - Custom progress indicators
const chartColors = {
primary: 'hsl(210 100% 50%)', // Blue
secondary: 'hsl(340 100% 50%)', // Pink
success: 'hsl(120 100% 40%)', // Green
warning: 'hsl(45 100% 50%)', // Orange
danger: 'hsl(0 84% 60%)', // Red
};{
"style": "default",
"rsc": false,
"tsx": true,
"tailwind": {
"config": "tailwind.config.ts",
"css": "app/globals.css",
"cssVariables": true
}
}Mario Charts is built with performance in mind:
- Bundle Size: Zero runtime overhead through copy-paste distribution
- Tree Shaking: Only used components are included in your bundle
- Virtualization: Handle datasets with 10k+ rows efficiently
- Memoization: Prevents unnecessary re-renders
- Lazy Loading: Components load on-demand
| Dataset Size | Render Time | Memory Usage |
|---|---|---|
| 100 rows | <50ms | ~2MB |
| 1,000 rows | <100ms | ~8MB |
| 10,000 rows | <300ms | ~25MB |
- Node.js 18+
- npm, yarn, or pnpm
- React 18+
- TypeScript (recommended)
# Clone the repository
git clone https://github.com/mariocharts/mario-charts.git
cd mario-charts
# Install dependencies
npm install
# Start development server
npm run dev
# Run tests
npm test
# Build for production
npm run build
# Start Storybook
npm run storybookmario-charts/
├── src/
│ ├── components/
│ │ ├── charts/ # Chart components
│ │ ├── ui/ # UI components
│ │ ├── layout/ # Layout components
│ │ └── primitives/ # Base components
│ ├── themes/ # Design tokens
│ ├── hooks/ # Custom React hooks
│ ├── utils/ # Utility functions
│ └── types/ # TypeScript definitions
├── docs/ # Documentation
├── examples/ # Usage examples
└── playground/ # Interactive playground
We welcome contributions! Please see our Contributing Guide for details.
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-chart) - Commit your changes (
git commit -m 'Add amazing chart component') - Push to the branch (
git push origin feature/amazing-chart) - Open a Pull Request
- TypeScript with strict mode enabled
- ESLint for code quality
- Prettier for formatting
- Testing with Jest and React Testing Library
- Storybook for component documentation
Mario Charts is licensed under the MIT License.
Mario Charts is built on top of these amazing open source projects:
- Radix UI - Accessible component primitives
- Tailwind CSS - Utility-first CSS framework
- Framer Motion - Animation library
- Next.js - React framework
Made with ❤️ by the Mario Charts team