Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

Email Campaigns Dashboard Block for Vue

Six newsletter sends in a table with open and click rates, unsubscribes and a state word; tick two to compare delivered, opened and clicked as paired bars with the difference in points.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Compare two newsletter sends with this email dashboard for Vue 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.

What stays local, and how do I wire it for real?

Everything: the counts are typed and ticking only changes the page's state. Feed the rows from your sending platform's campaign report, and keep the rates computed on your side from raw counts so the two bars always agree with the table.

How does it look on a phone?

The table drops the sent count, the unsubscribes and the state column; the state moves under the campaign name. The compare band keeps its height, so ticking a second campaign doesn't move anything.

All 200 dashboard blocks