Introduction
This is not just a chart library. This is how you build beautiful, customizable dashboards for your React applications.
Copy and paste chart components into your apps. Accessible. Customizable. Zero lock-in.
How it works
Mario Charts is built on four core principles that make building beautiful dashboards a breeze.
Copy & Paste
Mario Charts components are designed to be copied directly into your codebase. You own the code and can modify it however you need.
No NPM package installations. No version conflicts. No vendor lock-in. Just beautiful, working code that you can customize to your heart's content.
Beautiful Defaults
Every component looks professional right out of the box. No configuration needed. Clean typography, thoughtful spacing, and carefully crafted color palettes.
Built with accessibility in mind from day one. Proper ARIA labels, keyboard navigation, and screen reader support come standard.
Infinite Customization
Since you own the code, you can customize every aspect. Change colors, add animations, modify layouts, or even completely rewrite components to fit your needs.
Built with Tailwind CSS for utility-first styling and easy theming. Consistent design tokens make it simple to maintain visual coherence.
Developer Experience
Excellent TypeScript support with full type safety. Comprehensive documentation with live examples and code snippets for every component.
AI-ready code structure makes it easy to understand, modify, and extend components using modern development tools and workflows.
Get started
Choose your path to building beautiful dashboards with Mario Charts.
Frequently asked questions
Everything you need to know about Mario Charts.
Yes. Mario Charts is completely free to use for personal and commercial projects. No attribution required, no licensing fees, no restrictions.
Absolutely. We're actively developing line charts, pie charts, area charts, and advanced visualizations like heatmaps and funnel charts.
Yes! Create an issue on our GitHub repository at https://github.com/yuribodo/mariocharts/issues with your component request. Include use cases and examples if possible. We prioritize components based on community demand.
Unlike traditional libraries, you copy Mario Charts components directly into your codebase. This means zero lock-in, complete customization freedom, and no runtime dependencies to manage.