shadcn.io is not affiliated with official shadcn/ui
Numbered Announcements Banner Block for Ark UI
A weekly digest band for a product-updates tool: a quiet title and count, then three numbered announcements on hairlines, each row one link with a trailing arrow.
Installation
Overview
A numbered announcements banner for React with Ark UI, for a few related updates that should sit together without competing with the page. A band between the page rails opens with a quiet title and a count, then an ordered list of three announcements on hairlines that run from rail to rail. Each row has its two-digit number in tabular mono, one line of text and a trailing arrow; the whole row is a single link, so it tints on hover and rings on keyboard focus. There is no button and no state. It's built from Link Overlay and Guides, and it follows your theme.
FAQ
How is the whole row a link?
The title is a link that Link Overlay stretches over the row with a pseudo-element, so the row is one target for a mouse and one tab stop for a keyboard, and a screen reader reads a single link named by the title. The row tints on hover, and on keyboard focus it gets a ring around the whole row, not just the text.
Are the numbers part of the list?
The rows are an ordered list (ol), so the order is exposed to assistive technology on its own; the visible 01, 02, 03 are decoration and hidden from it, which stops a screen reader from reading the digits as part of each title. Change ANNOUNCEMENTS and the numbers follow.
How many rows can it hold?
Three is the sweet spot and five is the limit: past that it stops reading as a banner and starts reading as a notification list. If you need more, link to your changelog from the last row instead of adding rows.
What happens in a right-to-left layout?
The number sits at the start and the arrow at the end, in both directions, and the arrow flips to point the other way. Titles wrap naturally; nothing is positioned with physical sides.