Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Banner blocks

Pro

Minimalist Notification Dot Banner Block for Svelte

An unread-messages bar for a team messaging app: a dot, a rolling count, a link to the inbox and a Mark all read button that rolls the count to zero.

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

A minimalist notification bar for Svelte with Ark UI. One centred row carries a dot, a count that rolls like an odometer ("3"), the words "unread messages from your team", an underlined link to the inbox and a ghost "Mark all read" button. Press the button and the count rolls down to 0, the dot goes quiet, and the sentence gives way to "You're all caught up". The two sentences share one grid cell, so the row never changes size and nothing around it shifts; the button disappears with the count and focus moves to the inbox link so keyboard users aren't left behind. A polite status line announces "You're all caught up." for screen readers. There's no tint: the block sits on the page's drafting lines, the rails and a top rule with plus marks. With reduced motion the digits change in place and the sentence swaps at once. It follows the theme. Built from Guides, Status, Sliding Number and Button. For inboxes, notification centres and any header where a number should visibly go down when it's dealt with.

FAQ

How do I connect it to my real unread count?

The count is state in the component, started from INBOX.unread. Pass your own count in as a prop or from your data layer and call your API from markRead before you set the count to 0. The Sliding Number rolls every change, up as well as down, so a new message can roll it up again. Hide the bar when the count is 0 on a fresh load if you don't want the caught-up state.

How does the roll to zero work?

Marking sets the count to 0 and the Sliding Number's digits roll to it with a CSS transition. After about 800 ms the sentence cross-fades to "You're all caught up" in the same grid cell: both sentences are always in the page, the inactive one is invisible and hidden from screen readers. With reduced motion the digits change in place and the sentence swaps at once.

Where does focus go after Mark all read?

To the "Open inbox" link, set before the count changes: the button goes quiet and is disabled once everything is read, and a disabled button can't keep focus. The sr-only status line is present from the start and announces "You're all caught up." when the sentence changes.

Why is the dot foreground-coloured?

The unread dot is the Status component in its default tone, the foreground colour, which reads as "something is waiting" on every theme without bringing in an accent. When everything is read it fades to a faint muted tone. Pass variant="info" if you want a colour.

How does it fit on a phone?

The row wraps and centres: the dot and the sentence on the first line, the link and the button on the second when they don't fit. Nothing scrolls sideways at 320 pixels, and in right-to-left layouts the order mirrors while the count keeps its digits in order.

All 100 banner blocks