Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Banner blocks

Pro

Tags Marquee Banner Block for Ark UI

A trending-tags ticker for a developer forum: an outline pause button, a Trending label, and twelve tag links with compact counts scrolling the other way.

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 tags marquee banner for React with Ark UI: a trending strip for a developer forum. An outline pause button and "Trending" with a rising-line icon open the page column, and twelve tag links scroll the opposite way to the other tickers, towards the end of the line: "#types 25K", "#async 18K", "#auth 22K", "#wasm 3.9K". Each tag is a small bordered chip with its post count in a compact form, written the same way in every language, and the three that are climbing carry a dot (a visually hidden "Hot:" says it to screen readers). The ends fade with a mask, the strip is 44 pixels tall between the page's rails under a top rule, and hovering the row or tabbing to a tag holds it still. The button stops it for good, and with reduced motion on nothing moves and the row scrolls by hand. The repeated copies are hidden from screen readers and from the tab order. It follows the theme in light and dark. For forums, communities, docs sites and any place where "what's popular" belongs in a strip.

FAQ

How do I change the tags and counts?

Edit TAGS at the top of the file: each has a name, a count (the plain number) and hot. The count is formatted by one Intl.NumberFormat("en-US", { notation: "compact" }) at module level, so 25300 reads "25K" and 3900 reads "3.9K" for every visitor and the server and the browser always agree. Use a locale of your own there if you'd like.

Why does it scroll the other way?

The Marquee has reverse on, so it runs in the opposite direction to the Scroll Marquee Banner: the tickers on one page don't all drift the same way. Remove reverse for the usual direction. In a right-to-left page each direction flips with the page.

How can a visitor stop the movement?

By hovering or focusing the row (it holds while they do), by pressing the pause button before it (its name stays "Pause the scrolling tags" and its pressed state says whether it's paused), or by turning on reduced motion in the system, in which case the row doesn't animate and the button is hidden.

What do the dots mean, and are they announced?

A dot marks a tag that's climbing at the moment. It's decoration for sighted visitors, and a visually hidden "Hot:" before the tag's name says the same to screen readers, so the link reads "Hot: #types 25K". Remove hot from an entry to drop both.

What happens in a right-to-left page?

The tag names and counts each sit in a bdi, so "#types" and "25K" keep their own direction while the chips run from the other side. The trending icon is a trend line, not an arrow, so it doesn't turn around. Spacing is logical throughout.

All 100 banner blocks