shadcn.io is not affiliated with official shadcn/ui
Marketing Strategist Budget Allocator Profile Block for Vue
A marketing strategist profile as a budget allocator: a 20,000 dollar month split across four channels on sliders, a projected return from typed multipliers that flatten above a spend, a signed difference from the current plan and an over-budget line.
Installation
Overview
Let a client move money between channels and see the month's return change, with this marketing strategist profile for Vue with Ark UI. A compact header holds the title and one sentence, and the hairline frame under it opens on the strategist: initials, name, role and the $20,000 monthly budget. A list holds the four channels (Search, Social, Email, Content), each with a Slider in steps of $250, its spend in tabular figures and its own rule in words, such as "$3.10 per $1 up to $8k, then $1.20". The result band works out the projected return from those typed multipliers, which flatten above a spend, and sets it against the current plan as a signed difference with an arrow, "+$3,300" or "-$900". A Data List gives what is allocated, what is still to allocate and what the current plan returns, and when the sliders add up to more than the month one line names the excess. The foot, ruled by Guides, holds a polite status line and a Button that puts the current plan back. It's built from Slider, Data List, Badge, Avatar, Button and Guides, with a CSS entrance only. For a strategist marketplace, an agency proposal or any plan that splits one budget. The return is a projection from typed sample multipliers, not a forecast.
FAQ
How do I fill it with my own channels and budget?
Edit CHANNELS: each has an id, a name, a rate in cents returned per dollar up to its knee, an after rate for dollars above the knee, and the current spend of today's plan. BUDGET is the month's total, STEP the slider step and MAX_SPEND the longest slider. The return, the difference, the remainder and the rule text under each name are all worked out from those, so nothing is typed twice.
How is the projected return worked out?
Per channel, the spend up to the knee returns the first rate per dollar and the spend above it returns the lower one, so the first $8,000 in Search returns $3.10 a dollar and each dollar after it $1.20. The channel returns are added, and the total is set against what the current plan returns. The rates are typed samples and nothing here is a forecast; replace them with your own measured curves.
What happens if the sliders add up to more than the budget?
Nothing is blocked, because you may be comparing options. The remainder stops at $0, one line under the figures names the excess ("Over budget by $1,500") with an alert icon, and the status line says the same, so it is spoken once the sliders settle. Move spend out of a channel and the line goes back to a quiet "within the budget".
What stays local in this demo?
All of it. The sliders and the reset change the page only, and nothing is saved or sent. To make it real, save the allocation through your own API when the visitor commits, and fetch each channel's curve from your analytics instead of typing it.
Is it accessible?
Every slider has a name that includes its channel and speaks its value in dollars, and its arrow keys move it by one step. The figures are real text, the arrow beside the difference is decorative and the sign is in the text, and the status line is a polite live region present from the start. Amounts keep their order in a right-to-left layout.
How does it look on a phone?
The channels stack with each slider the full width of the panel, and the result band drops its two columns into one. The reset button is full width in the foot, which stays pinned to the bottom of the screen while the panel scrolls and settles at the panel's end from the medium breakpoint.