shadcn.io is not affiliated with official shadcn/ui
Campaign Launched Success Block for React
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.
Installation
Overview
Show a launch as it unfolds, with this campaign confirmation page for React with Base UI. It is the Sendfinch page after an email campaign started sending, a whole screen with the page's rails and one band across it, split by a divider. One half has a check in a muted tile, the heading, one sentence and four sending waves: each wave's time in UTC, how many of its recipients have been sent, a Progress bar and a word with a glyph for its state (Sent, Sending, Queued). The totals come from the waves. A Toggle named Pause sending holds the wave that is running and says so in the page's one live line. The other half is the email as sent, drawn greyscale in a corner-marked frame: the sender, the subject, a picture, lines of text and a button bar. The one primary is the Shine Button View analytics, pinned to the foot of a phone's screen. Nothing was sent or paused. For email, SMS and push tools, and any launch that goes out in batches.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was sent, held or counted. The campaign name, the sender, the subject and the four waves (their times, sizes and how many have gone) are typed constants at the top of the file, and everything else is worked out from them: the totals, each bar, each wave's state and the sentence under the toggle. Pause sending only changes this page and says "Nothing was held". To wire it, fill WAVES from your send log (poll it while the campaign runs), call your provider's pause and resume endpoints from the toggle's handler, and point View analytics at the campaign's report.
How are Sent, Sending, Paused and Queued told apart?
By words and glyphs, never by colour. A wave with all its recipients sent is Sent with a check; one that has started and not finished is Sending with a solid dot, or Paused with a pause glyph while the toggle is on; one that has not started is Queued with a clock. The state is worked out from the counts, so changing a number changes the word. Pausing only affects the wave that is running: waves that have not started stay Queued.
How does Pause sending work with a keyboard and a screen reader?
It is one button that stays named Pause sending whatever its state, and its pressed state says whether it is on, so a screen reader reads "Pause sending, toggle button, pressed" rather than a label that changes. Space or Enter flips it. The page's one live line then says what happened ("Paused in this demo: wave 2 holds at 7,800 and 2 waves stay queued. Nothing was held.").
How is the email drawn, and can I show my own?
It is plain boxes and lines in the theme's greys, with one small greyscale drawing (three pots) that is hidden on phones to save height, so it follows light and dark and every preset. It is marked as decoration; the figure's caption and a hidden sentence give the sender and the subject in text. To show your own email, change SENDER, SUBJECT and the button text, and swap the drawing for a thumbnail of the rendered message you have the rights to show.
How does it look on a phone?
The halves stack: the waves first, then the email. The email's picture and its third line of text are dropped, and its caption is spoken but not shown, to keep the page within about one and a half screens. The one primary is pinned to the bottom of the screen while the page scrolls, and from the small breakpoint it sits in the flow.
Related
- 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
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
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.
- Pro
A full-height confirmation for a published post: its address in a read-only field with a real copy button, a greyscale card showing how the link looks when shared, and links for three places to share it with two-letter tiles.
- Pro
Invitation Status Sheet Success
People and approvalsA crew page with the sheet that says where each of twelve invitations stands, shown open: filter chips with counts, a status word and time per person, a Resend button on every row and a Resend all pending.
- 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.