Unit chart
A chart where every dot is 25 customers: regroup by plan, region or channel and the same dots move to their new column.
Customers6,000 in total · 1 dot = 25
- Free
- Pro
- Team
FreeProTeam
Things to try
- Regroup. Switch between Plan, Region and Channel. Each dot is a customer, and it moves from its old column to its new one, so you can see where people went.
- Read the numbers. Each column's count rolls to its new value.
Install
npx shadcn@latest add https://your-docs-site/r/unit-chart.jsonDependencies
The install command adds these for you. If you copy the code by hand, install them yourself.
npm install @base-ui/react @remold-ui/react motionHow it works
- Dot
iis always customeri. Every grouping lays out the same list, andpairing="index"carries each customer to their new place. - Equal columns. Each group gets an equal share of the width and stacks from the bottom, plans in bands. The labels use the same grid, so they line up.
- A fixed frame. Four unseen corner dots keep the bounds still, so columns grow in place instead of the chart rescaling.
The customers are made up. Swap in your own rows: any record with a few categories works.
Focus timer
A Pomodoro timer drawn as an hourglass of real sand: it pours while you work, freezes when you pause, and flips over for your break.
Particle shapes
Thousands of dots turning in 3D that flow from a spiral galaxy into a double helix, then into the Lorenz attractor's two wings, a honeybee, a butterfly and the Remold mark.