Free · Recharts · Editable React source
Delta Bridge
Reconcile an opening balance, positive and negative changes, and a closing total.
This is the installable component, not a mockup. Width is a preview container setting; theme and colors use your app’s shadcn CSS variables.
Edit sample data · JSON
01 / Installation
Your code. Your project.
Use an initialized shadcn/Tailwind React project. The URL installs the component and its shared files recursively. No namespace configuration, platform account, or agent files.
Next.js, Vite & manual setup →npx shadcn@latest add https://beautifulcharts.dev/r/delta-bridge.jsonPackage dependencies: recharts. Shared files are included in Source above. The installed license file covers the free source.
For a manual install, add those packages, copy every listed Source file to its displayed path, and adjust the @/ alias if your project uses a different one.
02 / Component API
Make it yours.
Types, defaults, and source below are generated from the distributed component. Numeric values must be finite; recipe-specific bounds are checked in source. Formatters change displayed labels, not the underlying measurements.
| Prop | Type | Default | Required |
|---|---|---|---|
| data | DeltaBridgeDatum[] | deltaBridgeData | No |
| start | number | 120 | No |
| startLabel | string | "Opening" | No |
| endLabel | string | "Closing" | No |
| expectedEnd | number | — | No |
| title | string | "The growth bridge" | No |
| subtitle | string | "Opening balance + changes = closing balance" | No |
| ariaDescription | string | — | No |
| valueFormatter | (value: number) => string | recipeNumber | No |
| colors | { gain: string; loss: string; total: string } | { gain: recipeColors[0], loss: recipeColors[2], total: recipeColors[1] } | No |
| isLoading | boolean | — | No |
| className | string | — | No |
| children | ReactNode | — | No |
| showTooltip | boolean | true | No |
Exact data and series types
export type DeltaBridgeDatum = BridgeStep;
export type DeltaBridgeProps = { data?: DeltaBridgeDatum[]; start?: number; startLabel?: string; endLabel?: string; expectedEnd?: number; title?: string; subtitle?: string; ariaDescription?: string; valueFormatter?: (value: number) => string; colors?: { gain: string; loss: string; total: string }; isLoading?: boolean; className?: string; children?: ReactNode; showTooltip?: boolean };shadcn theming
Your card, text, border, error, font, and chart colors—not a forced design system.
Native customization
Modify the local source or use the documented renderer-native extension points.
Accessible states
Loading, empty states, reduced motion, descriptions, and inspectable data tables.