Wave Bars

Install

Or by hand, in a Next.js project with shadcn set up. It writes components/pastetaste/wave-bars.tsx.

Install the pastetaste component "Wave Bars" (wave-bars) into this Next.js project and use it.

What it is: An income or expense waveform of thin bars that rise and light up on first view, with an up or down summary pill. Hover, drag or use the arrow keys to total any stretch.

Before you place it, ask me (one short message, in my language; "skip" = sensible default): which page and section it goes in, my brand colour (hex), the text, labels or images it should show, and whether I want my logo or my own copy in the demo content. Then:

Steps:
1. If the project has no components.json, run: npx shadcn@latest init -y -d. Then run: npx shadcn@latest add https://pastetaste.com/r/wave-bars.json
   (it writes components/pastetaste/wave-bars.tsx; install any npm packages it reports: motion@^12.23.0).
2. Import it: import { WaveBars } from "@/components/pastetaste/wave-bars" (check the file for the exact named export).
3. Put it where it fits on the page I name, keep the rest of the page untouched, and pass props for my colours instead of editing the installed file.
4. It does not depend on Tailwind; colours come from CSS variables (--pt-*) or props.
5. It supports prefers-reduced-motion with a still state; do not remove it.

Props (all optional unless the type has no default):
- values: number[] = 72-bar sample — One amount per bar (a day, an hour, a transaction); heights are normalised to the largest.
- labels: string[] — One label per bar, shown on the cursor and in the caption while scrubbing, for example '14 Jul'.
- kind: 'income' | 'expense' = 'income' — income lights the bars in the accent with an up arrow; expense lights them in ink with a down arrow.
- total: number = sum of values — Total shown in the pill at rest; the running total scales to it while scrubbing.
- format: (n: number) => string = en-US, two decimals — Formats the amount in the pill.
- prefix: string = '' — Small prefix before the amount, such as a currency sign.
- caption: string = '' — Mono caption at the right of the pill at rest, for example 'last 90 days'.
- height: number = 150 — Height of the wave in px.
- accent: string = var(--pt-accent, #ff4b2b) — Accent used by income bars and the income arrow.
- tone: 'light' | 'dark' = 'light' — Ink colours for paper or black grounds; --pt-ink, --pt-muted, --pt-line and --pt-surface override them.
- label: string = 'Income' or 'Expenses' — Accessible name of the slider.
- className: string — Extra classes on the root.
- style: CSSProperties — Inline style overrides on the root.

Live preview: https://pastetaste.com/c/wave-bars
Then run the dev server, check it in the browser at desktop and mobile width, and tell me the page URL.

Props 13