Savings Goal Tracker React component
A savings goals screen: goal tabs with progress bars, a counting balance with a progress ring and an on-track finish date, a balance chart with a dashed projection to the goal line and a hover crosshair, quick and custom contributions with milestone messages, and an auto-save switch with a monthly amount slider that moves the finish date.
About the Savings Goal Tracker component
Savings Goal Tracker turns saving into visible progress. Each goal shows how far along it is, and the chart pairs what's already saved with a dashed projection up to the goal line, so people can see exactly when they'll get there.
Adding money is one tap, milestones get a small celebration, and changing the monthly auto-save amount moves the projection and the finish date immediately, which makes 'what if I saved a bit more?' easy to answer.
When to use it
Use it in banking, budgeting and fintech apps that offer savings pots, goals or envelopes.
For category spending use the Spending by Category Chart; for a single progress number use a stat card.
Installation
Add the Savings Goal Tracker component to your project with the shadcn CLI. It lands in components/savings-goal-tracker.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/savings-goal-trackerOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<SavingsGoalTracker /> accepts 6 props, all optional.
| Prop | Type | Default |
|---|---|---|
| goals | { id: string; name: string; emoji: string; target: number; history: number[]; monthly: number; autoSave: boolean; color: string }[] | GOALS |
| currentMonth Month of the last history point, as YYYY-MM. | string | "2026-11" |
| currency | string | "€" |
| onContribute | (id: string, amount: number) => void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- goals{ id: string; name: string; emoji: string; target: number; history: number[]; monthly: number; autoSave: boolean; color: string }[]Default: GOALS
- currentMonth
Month of the last history point, as YYYY-MM.
stringDefault: "2026-11" - currencystringDefault: "€"
- onContribute(id: string, amount: number) => void
- theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Savings Goal Tracker FAQ
- How is the finish date calculated?
- Remaining amount divided by the monthly auto-save, rounded up to whole months and added to currentMonth. With auto-save off, the projection is shown faintly and no date is promised.
- What does history need to contain?
- Month-end balances, oldest first, ending with the current balance. Six months reads well; the chart labels months backwards from currentMonth.
- How do I save contributions?
- onContribute(id, amount) runs for quick and custom amounts. Move the money there; the balance, ring, chart and toast update immediately.
- Can goals have their own colors?
- Yes, color per goal drives the tab bar, ring, line and slider. Keep them distinct and avoid status colors like red or green for goals.
- Is it accessible?
- Goals are tabs with a tabpanel, the ring and chart have text labels including the projected date, the status uses an icon and words, the switch and slider are labelled, and toasts are announced.
