Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

Email Deliverability Dashboard Block for Ark UI

Where a sending domain's mail lands at five mailbox providers (Inbox, Promotions or Spam), bounce and complaint rates against rule-of-thumb limits, SPF, DKIM and DMARC checks, and a reputation score.

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

Find out whether your mail is reaching the inbox with this deliverability dashboard for React with Ark UI. A Select in the header picks one of three Inboxcrest sending domains. A hairline frame with a plus mark on each corner then shows, for five mailbox providers named in text with a two-letter tile, a stacked bar of where the mail landed (Inbox, Promotions or Spam) with the shares written under it. Below, the bounce and complaint rates sit against rule-of-thumb limits. The side cell runs the domain's SPF, DKIM and DMARC checks with a glyph and the word Pass or Fail, says what failed, and gives a reputation score out of 100. It's built from Select, Guides and hand-drawn bars. For email operations and sender reputation work.

FAQ

How do I fill it with my own domains?

Edit DOMAINS (and the matching DOMAIN_ITEMS for the select): per domain, a placements row for each provider with inbox, promo and spam in whole percent adding to 100, the bounce and complaint rates, three checks with a pass flag and a detail line, and a reputation score. The header sentence, the averages and the pass count are worked out from them.

Where do the limits come from?

They are rules of thumb: bounces under 2% and complaints under 0.1%, held in BOUNCE_LIMIT and COMPLAINT_LIMIT. The panel says so, and the tick on each bar marks the limit at the middle of the bar. Replace them with your sending provider's own thresholds.

How does it show pass and fail without color?

A pass is a filled circle with a tick and a fail is an outlined circle with a cross, and each has the word beside it. The three bar segments differ by weight and a hatch, and every share is also written as text.

How do I use it from the keyboard?

The domain select opens with Enter or the arrow keys. The rest of the panel is read-only text and lists, so Tab goes past it. Picking a domain updates a polite status line that reads the new averages and the number of checks that pass.

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

Everything: nothing is looked up, and the placements are typed. In a real product the placement shares come from seed-list tests or postmaster tools, and the checks from DNS lookups of the domain's SPF, DKIM and DMARC records.

How does it look on a phone?

The cells stack: providers first, then the rates, then authentication and reputation. The select takes the full width, and the header sentence keeps its height when you switch domain.

All 200 dashboard blocks