shadcn.io is not affiliated with official shadcn/ui
Ad Set Published Success Block for React
A confirmation for a published ad set: three cells on shared hairlines for the daily budget, the placements and the read-only targeting, and an estimated reach per day worked out from typed costs, with a line that says the numbers are typed.
Installation
Overview
Let people see what a budget buys on the page that confirms an ad went live, with this ad set confirmation for React with Base UI. It is the Reachlark page after an ad set was published, a whole screen with the page's rails and one band across it. A check in a muted tile, the heading and one sentence sit over a framed panel of three cells on shared hairlines: the daily budget in a Number Input, the placements (Feed, Stories and Search) in a Toggle Group, and the targeting, read-only, as Badge chips (ages, three interests, two regions). Under them an estimated reach per day is shown as a range, with the sums behind it written out and a line saying the costs are typed sample numbers. The one primary is the Shine Button Open the ad manager, pinned to the foot of a phone's screen. Nothing was published or spent. For ad managers and campaign tools.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was published, spent or measured. The ad set, the targeting, the cost per 1,000 impressions of each placement and the views per person are typed constants, and the estimate is a pure helper over them: the budget in cents is split evenly over the chosen placements, each share buys impressions at its placement's cost, the sum is divided by the views per person to give people, and the range runs from 80% to 120% of that, rounded to the hundred. To wire it, replace the typed costs with the platform's own delivery estimate (or its reach-estimate endpoint) and keep the line that says it is an estimate.
Is the estimate a forecast?
No, and the page says so under the figure: the costs are typed sample numbers, so the range only shows how the budget, the placements and the typed costs combine. Change a cost in PLACEMENTS and the range follows. Nothing in it implies what an ad set will really reach.
How does the budget field behave?
It takes whole dollars from 10 to 5,000 a day. As you type, a value in range updates the estimate at once; when you leave the field a value outside the range, or text that is not a number, settles to the nearest allowed budget or back to the one you had. The steppers and the arrow keys change it by one dollar. The page's live line says what the budget is once you stop changing it.
Why can I not turn every placement off?
The budget needs somewhere to go, so the last placement stays on and the live line says so. The group is a set of toggle buttons: Tab enters it, the arrow keys move between them and Space or Enter toggles one.
How does it look on a phone?
The three cells stack with the budget first, then the placements, then the targeting (on a wide screen the targeting comes first in the row). The estimate sits under them and the one primary is pinned to the bottom of the screen while the page scrolls. To keep the page short the hints are spoken but not shown, and so is the live line: the figure above it already says the same.
Related
- Pro
A full-height confirmation for a launched email campaign: four sending waves with a bar and a state word each, a Pause sending toggle that holds the running wave, and the email as sent, drawn greyscale in a frame.
- Pro
A confirmation panel for a started A/B test: two arms on shared hairlines, a slider for the traffic to Variant B, and the sample each arm needs and the days it takes, worked out from typed numbers, with a preview that applies nothing.
- Pro
Analytics Connected Success
Integrations and syncsA confirmation window for connected analytics: a counting events-a-minute figure, a table of the first eight events that fade in and a bounded feed with Pause, and a docked panel of the chosen event's properties in a JSON tree.
- Pro
A start-aligned confirmation for a scheduled newsletter: a select of three send times in one zone and a table of five audience regions with the local weekday and time the issue lands, worked out from each region's offset.
- Pro
Credit Top Up Billing
Payment and invoicesA credit wallet: the balance and what it will be after the top-up, amount chips with a custom amount, auto-recharge with a threshold and amount, a pay button with a live total and the recent top-ups.
- Pro
A confirmation panel for a new sales lead: the person, company, source and intent meter of five segments, a round-robin list of three reps with their open leads as bars, and a select that reassigns the lead locally.