Financial Trends Chart
Free Dot Matrix Chart for Cash Flow in React
Financial Trends Chart is a free animated React + Tailwind dot matrix chart from mebius.design that shows cash inflow and outflow as stacked squares of equal value per period.
Install with the shadcn CLI
Terminal
npx shadcn@latest add https://www.mebius.design/r/Open code, MIT license
No account needed. Use it, change it and ship it: one of the 20 starter items.
Working in Cursor or Claude Code? Add it through the mebius MCP.
MCP docsWhat’s included
Figma fileAuto layout and variables, light theme- React + TypeScript sourceTailwind v4, one file: financial-trends-chart.tsx
- shadcn registry item@mebius/charts-financial-trends
Dependencies
The CLI installs these with it.
npm
- animejs
Registry items
- utils
- theme
- chart-card
- button
- icons
- legend-swatch
- segmented-control
- trends-tooltip
- use-chart-motion
- use-chart-size
- use-controllable-state
- format
- series
Questions, answered
About Financial Trends Chart and the other free charts. Anything else? Our team replies within a working day.
Yes. Its React code and AI prompt are open to everyone under the MIT license, no account needed. A free mebius account adds the Charts Figma file it comes from. No card and no trial.
