shadcn.io is not affiliated with official shadcn/ui
Browser Tab Notification Block for Ark UI
A webmail's unread count in a browser tab, drawn: New message adds the next of four, Clear reads them, and a toggle shows the tab in view or both titles a background tab swaps between.
Installation
Overview
Show people how an unread count reaches the browser tab, with this browser tab for React with Ark UI. It's the tab of Tabloft, a webmail, drawn in a hairline frame with a plus mark on each corner: a tab strip, an address bar and an inbox of five messages under it. "New message" lets in the next of four typed messages, so the count in the tab's title goes up ("(4) Inbox · Tabloft", stopping at "(99+)") and a new row appears at the top of the inbox; Clear reads them all and takes the count out of the title. A Toggle Group switches between the tab in view, with its one title, and the tab in the background, where an app that wants attention swaps the title between two lines on a timer; here both are drawn side by side, so nothing flashes. Only the drawn tab changes: the page never touches your real tab title, and the line under the frame says so. It's built from Button, Toggle Group and Guides, with a CSS entrance only. For a webmail, a chat or any app that wants to be noticed from another tab.
FAQ
Does it change my real tab title?
No. Nothing in the block writes document.title; the tab, the address bar and the inbox are drawn, and the line under the frame says "This tab is drawn: your real tab title is never changed." In your app you would set the title from the same helper: document.title = titleOf(unread) in an effect keyed on the count.
What does the background tab show, and why two titles?
An app that wants attention from a tab you aren't looking at usually swaps its title between the count ("(4) Inbox · Tabloft") and the newest message ("Tomas: Standup moved to a quarter to ten") every few seconds. Here nothing swaps: the strip draws both titles side by side and the line under the inbox spells them out, so the block has no timer and nothing flashes. With nothing unread there is nothing to swap in, and the second tab is a plain new-tab placeholder. If you build the real swap, run it only while the tab is hidden, stop it when it becomes visible, and keep it slow.
What stays local, and how do I make it real?
The four messages are in ARRIVALS and the five that were already there in START; "New message" lets the next one in and Clear marks everything read, all in the page, and a reload starts again. To make it real, feed unreadOf from your own inbox, call your server when messages are read, and set the real title as above. The count is worked out from the list, never typed.
Is it accessible?
The drawn browser is one figure with a name, the title in the tab is real text, and the line under the inbox says in words what the tab reads. Unread messages are a dot, a bolder sender and the word "Unread" for a screen reader, never a colour. The buttons and the toggle group are named and work with the keyboard, and a polite status message says what each press did and what the tab reads now.