Isometric Bars
An isometric bar chart illustration — extruded bars grow out of a plinth on staggered springs when scrolled into view, with live value counters riding their tops.
Installation
▸ Run the following command
npx shadcn@latest add https://www.mellowui.com/r/isometric-bars.json▸ Or install manually
- Install dependencies:
pnpm add motion - Copy the source from the Code tab above.
- Place it at
components/mellow/isometric-bars.tsx - Import and use.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| values | number[] | [34, 58, 42, 88, 66] | Bar values, 0–100. |
| labels | string[] | — | Mono labels under each bar. |
| size | number | 380 | Rendered width in px. |
| stiffness | number | 150 | Growth spring stiffness — higher snaps the bars up harder. |
| damping | number | 20 | Growth spring damping — lower overshoots more. |
| className | string | — | Additional CSS classes. |