Browse docs

Bar Ripple

2 variantsPro

Bars ripple in a travelling wave under a headline figure, for revenue, usage and growth sections.

illustrationsvgbarschartrevenueusagewaveloop

Revenue

revenue.tsx

Gradient revenue bars ripple under a headline figure with the latest bar lit up.

$npx shadcn@latest add @geturui-pro/bar-ripple-revenue

Prop	Type	Default	Description
`value`	`string`	`"$48.2k"`	Headline figure shown above the bars.
`delta`	`string`	`"+12.4%"`	Change label shown next to the figure.
`speed`	`number`	`1`	Speed multiplier for the loop (three seconds per wave at 1).
`title`	`string`	—	Accessible description of the scene, used as the aria-label.
`className`	`string`	—	Classes for the SVG; it fills its container width and keeps its ratio.

usage.tsx

Stacked usage bars roll beneath a plan limit while a meter tracks the share used.

$npx shadcn@latest add @geturui-pro/bar-ripple-usage

Prop	Type	Default	Description
`used`	`number`	`0.78`	Share of the plan used, 0 to 1; drives the meter and its colour.
`speed`	`number`	`1`	Speed multiplier for the loop (three seconds per wave at 1).
`title`	`string`	—	Accessible description of the scene, used as the aria-label.
`className`	`string`	—	Classes for the SVG; it fills its container width and keeps its ratio.

Installs every bar ripple variant at once. Each section above has its own command for a single variant.

Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.

$npx shadcn@latest add @geturui-pro/bar-ripple

Rendered as a single SVG with role="img" and an aria-label you can override with `title`; nothing inside is focusable.
Under prefers-reduced-motion the scene renders one meaningful still frame: no loops, no timers.
Colours come from the GetUrUI tokens only, so the scene follows light and dark themes automatically.