shadcn.io is not affiliated with official shadcn/ui
Campaign Launched Success Block for Svelte
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 Svelte with Ark 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.