Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Budget Tracker Dashboard Block for Ark UI

Six departments as bullet bars of spend against allocation with a year-to-date pace tick and a year-end projection, and a form that moves budget between two departments while the total stays fixed.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Move budget to where it is needed and watch every bar redraw, with this budget tracker for React with Ark UI. A hairline frame with a plus mark on each corner lists six departments as bullets: a grey allocation track, a foreground fill for what has been spent, a pace tick for the share of the year that has gone by, and a hatched stretch where spend is already past the allocation. Each bullet ends with a sentence on where the department is heading ("On pace for $1,593,000, under by $7,000"). Under the bullets a reallocate form takes a From and a To Native Select and an amount in a Number Input: the total never changes, and nothing a department has already spent can be moved out of it. It's built from Native Select, Number Input, Button, Shine Button and Guides. For finance planning tools and budget reviews.

FAQ

How do I fill it with my departments?

Edit DEPARTMENTS: each one has an allocated amount and what it has spent so far, in dollars. Set AS_OF and the year's first and last day, and the pace tick, the projections and the header sentence are worked out from them. SCALE is the widest a bar can be, so no department can be given more than that in this view.

How is the year-end figure projected?

It divides what a department has spent by the share of the year that has gone by, so a department that has spent 80% of its allocation with 80% of the year gone is on budget. It is a straight-line pace, not a forecast: a one-off purchase early in the year will overstate it.

What can and can't be reallocated?

Only the part of a department's allocation it has not spent can leave it, and the form says how much that is for the chosen department. The two departments must differ, the amount must be above zero, and a department can't go past the bar's range. A refused move says why in the line under the form and changes nothing.

What stays local, and how do I wire it for real?

All of it: the allocations and spend are typed, and Reallocate only changes this page, then says so. Reset puts the original split back. To make it real, load allocations and actuals from your ledger, and send each move to the endpoint that records it, ideally with an approver and a reason.

Is it usable without a mouse?

Yes. The two selects and the amount field are ordinary form controls, Reallocate and Reset are buttons, and the result or the problem is read out in a polite status line. The bars are decoration: every figure on them is also written in text beside them.

How does it look on a phone?

The bullets keep the full width with their sentence under the bar, the form fields stack, and the action foot stays pinned to the bottom of the screen.