shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Compare two newsletter sends with this email dashboard for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds a table of Newsmoor's six latest campaigns with the sent count, an open rate and a click rate each with a small bar, unsubscribes and a state word. A Checkbox on each row picks a campaign, up to two. A third is refused, and a polite line says which to untick. Under the table a compare band shows delivered, opened and clicked for the two as paired bars, with the difference in points, and until two are ticked it holds a prompt at the same height so nothing moves. It's built from Checkbox, Badge, Empty, a native table and Guides. For marketing and newsletter teams.
FAQ
How do I fill it with my own campaigns?
Edit CAMPAIGNS: a name, a date, sent, delivered, opened, clicked and a state, plus the unsubscribe count in UNSUBSCRIBES, in the same order. Delivered is shown as a share of sent, and opened and clicked as shares of delivered; change rateOf if your tool counts clicks against opens.
Why only two campaigns?
Paired bars compare exactly two things. MAX_TICKED is the limit; the compare band is built for a pair, so raising it also means redrawing the band. Ticking a third box changes nothing and the status line names the two that are ticked.
How are the bars scaled?
Delivered fills the bar at 100%, opened at 60% and clicked at 20%, so small rates stay readable. The scale is stated under the band, and every bar has its exact figure beside it. MEASURES holds the three caps.
How do I use it from the keyboard?
Tab goes to each row's checkbox, which is named "Compare" and the campaign, and Space ticks it. Clear unticks both. The table is a scrollable region you can focus. Every bar has its value as text, with the campaign's name read for a screen reader.
