Revenue
The revenue card at the top of every SaaS dashboard: switch the range and the chart line reshapes instead of redrawing, while the MRR and the change badge roll to their new figures.
vs 30 days ago
- New MRR
- Churned
- Customers
Things to try
- Switch between 7, 30 and 90 days. The chart line doesn't redraw: it reshapes into the new range.
- Watch the numbers. The MRR rolls like a counter, and the change badge rolls too, its arrow turning between up and down.
- Scrub along the chart. A dot rides the line and the headline shows that day's figure.
Install
npx shadcn@latest add https://your-docs-site/r/revenue-card.jsonDependencies
The install command adds these for you. If you copy the code by hand, install them yourself.
npm install @base-ui/react @hugeicons/core-free-icons @hugeicons/react @remold-ui/core @remold-ui/react motionHow it works
- One line, reshaped. The chart line is a path morphed with Remold's
createMorphand the badge's arrow is aRemold.Icon, so a new range is the same line moving into new points, and up and down are the same arrow turning. - The range switch is Base UI's Toggle Group; the figures roll with a small odometer built on Motion.
The numbers are made up.
Project setup
A setup checklist beside a picture of the project it sets up. Every piece starts as a ghost; finish a step and its piece drops into place.
Seat calculator
Pricing by team size, the calculator on a SaaS pricing page: drag the slider and faces join your team, the price rolls, the plan steps up at each tier, and yearly billing shows what you save.