- MARIO CHARTS
- 12 COMPONENTS
- MIT
- REACT + TS
Every chart
here is yours.
A React chart library for dashboards, built with TypeScript and Tailwind CSS. Paste the source into your repo and make it yours.
npx mario-charts@latest init.............:::::::::::::::::::::::::::::::::::::::::::............. ............:::::::::::::::::::::::::::::::::::::::::::::::::............ ...........:::::::::::::::::---------------------:::::::::::::::::........... ..........:::::::::::::::-------------------------------:::::::::::::::.......... ..........:::::::::::::---------------------------------------:::::::::::::.......... ..........:::::::::::-----------------------------------------------:::::::::::.......... .........:::::::::::---------------------------------------------------:::::::::::......... ........::::::::::---------------------------------------------------------::::::::::........ ........:::::::::-------------------------------------------------------------:::::::::......... .......:::::::::-----------------------------------------------------------------:::::::::........ .......:::::::::-------------------------------------------------------------------:::::::::........ .......::::::::-----------------------------------------------------------------------::::::::........ .......::::::::-------------------------------------------------------------------------::::::::........ ........:::::::---------------------------------------------------------------------------::::::::........ .......:::::::------------------------------------------------------------------------------:::::::........ .......::::::::-------------------------------------------------------------------------------:::::::....... .......:::::::---------------------------------------------------------------------------------:::::::....... .......:::::::-----------------------------------------------------------------------------------:::::::....... ......::::::::---------------::::::::::::::::::::::::---------------------------------------------::::::....... .......:::::::::::::::::::::::::::----------------===========================================----:::::::::....... ........::::::::::::::--------=====================+++++++++============+++++++++++++++++++++++===-::::::::...... .......::::--------===============================-:..:::::=+++++++++++++++++++++++++++++++++++==+===--:::........ ....::::-------=================================-. .... .:=++++++++++++++++++++++++++======+++++++===-::....... .....::::-----================================+=. .-+####*+: :=++++++++++++++*********=. .--:.:=+++++====--:.... .......::::-----===========++++++++++++==========- =#######*- -*******************+=:. :=*##+ :=+++++====-:.. .....:::::-----=========+++++++++++++++++++++=: .:-+*#####*: .-+****************=. =####+ :++++++===--. ......:::::-----========++++++++++++++++++++++=. :++=--==++===-::. -****************- =####= . -**+++++===-. ......:::::-----========++++++++++++++++++++=-. .-=++***+-. .-=*##*=.-*****##*********- . ..-+*+++++=--+**++++==-. ......::::-----========++++++++++++++++++++=-. .=*******+- :*#####- =****######*****=..=+++=-. =####-.+***+++==-. .....::::-----========++++++++++++++++++++++- :+*******+: .-*##*:.=***#########**+--=+****- +###*::****+++==-. .....:::::-----======+++++++++++++++++++++++- :+*******+: :-:. .+**############*********- =*+-. -****+++==-. .....:::::-----=====++++++++++++++++++++++*+=-=+*******+: .=+**##############**+****+: :+****+++==-: ....:::::----=====+++++++++++++**************+-=+++==-: :*#*###############*-:=+**+: :##****+++==--: ....::::----====++++++++++++****************++=-.. :-+**################*=:.:==-. :+##****+++==--:.. ....::::---=====+++++++************************+=. .:=+*##*###########***#####*=-. :*###****+++==--: ....:::----====++++++****************************+=----=**########***************####+:...:::=*#####****+++==--. ....:::---====+++++++*********************************##******+++++++++++********##################****+++===--: ....:::----===++++++++++*******************************+++=======+++++************##################****+++===---: ....:::---===+++++++++****************************+==--======+++++++**************#################*****+++===---::. .....:::---===+++++++++=::=++++++++++++++++++++++*+---====+++++++++++***************################****+++===---:::. ....::::--=====+++==:. -=============++++=+++++---====++++++++++++++*************###############*****+++===---::: .....:::---=======: .-====================----====+++++++++++++++**************############*****+++===---:::. ....:::----====-. .::--==----------------======+++++++++++++++**************##########*****+++===---:::. ....::::------:. ..::-----------:---========++++++++++++++****************#####******+++===----:::. .....:::::---- .....:::----=========+++++++++++++++***********************++++====---::::. .....:::::--- :----===========+++++++++++++++********************++++====---::::.. ......::::::-. .-----============++++++++++++++*****************+++++====---::::... ......::::::: ::----=============++++++++++++++*************+++++====----::::... .......:::::::.... .:::----============++++++++++++++**********++++++====----::::.... .......::::::-:. .::::------===========+++++++++++++++*****++++++====----::::..... ......:::::::. ::::--------===========++++++++++++++++++++++=====----::::..... .......::::::. .-:::---------============+++++++++++++++++=====----::::...... ......::::::::........ ::::::---------=============+++++++++++=====-----::::...... ....:::::::::------::.. .:::::-------------=======================----:::::...... ....:::::::::::::----::::::::::::--::--------------------=============-----::::::..... .. .....::::::::::::::::::::::::::---------------------------------------::::::...... .. ......:::::::::::::::::::::::::-----:-----------------::-:----::::::::......... . ..........::::::::::::::::::::::::::::::::--::::::::....::::::.............. ..............:::::::::::::::::::::::::::::::........................... ............::::::::::::::::::::::::::::::::............... ........ ..........::::::::::::::::::::::::::::::::........... ... .......:::::::::::::::::::::::::::::::::....... ...:.::::::::::::::::::::::::::::::... ........:::::::::::::::::::.......... ..................................... ..................................... .................................. ..................
Components
These are the components you install.
These previews render the same code the CLI writes into your project. Open one to read its props and copy it.
Built for agents
Give your agent a head start on charts.
Install the Mario Charts skill to build dashboards, choose charts, and connect your data. Your agent works with React source it can read and edit.
Build React charts with your AI agent →Copy-paste, not a black box
The chart ships as source in @/components, not behind an opaque npm package.
Plain React + Tailwind
No DSL, no magic config file — agents edit familiar code.
Typed props
Orientation, variant, showGrid, and the rest autocomplete without inventing an API.
Use https://mariocharts.com/docs/ai-agents.md to build a dashboard for my React website with revenue, traffic, and conversion charts using Mario Charts. Follow my project's styling and connect the available data.
Install it and own the source.
One command writes the components into your project. No runtime dependency on us, nothing to eject from later.
npx mario-charts@latest init