Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Banner blocks

Pro

Badges Marquee Banner Block for Radix UI

A compatibility ticker for an SDK: a fixed Works with cell holding a pause button, then outline badges for runtimes scrolling past, with fading ends and a hairline between.

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 badges marquee banner for React with Radix UI: a compatibility strip for an SDK. A fixed cell at the start of the page column says "Works with" and holds the pause button, a hairline closes it, and beside it a row of outline badges, Node 22, Bun 1.2, Edge runtime, Serverless functions, Browsers, Workers, Deno 2 and Containers, scrolls towards the start of the line, fading at its ends with a mask. The strip is 44 pixels tall and sits between the page's rails under a top rule. Hovering the row or tabbing into it holds it still, the pause button stops it until it's pressed again, and with reduced motion on nothing moves and the button disappears with the motion. The repeated copies that make the loop are hidden from screen readers and from the tab order, and the names are plain text. The block follows the theme in light and dark. For SDKs, libraries and platforms that want to say where they run without a logo wall.

FAQ

How can a visitor stop the movement?

Three ways. Hovering or focusing the row holds it while the pointer or focus is there; the pause button before the row stops it until pressed again (its label stays "Pause the scrolling runtimes" and its pressed state says whether it is paused); and with reduced motion turned on in the system the row doesn't animate at all and the button is hidden. That covers WCAG 2.2.2 for content that moves automatically for more than five seconds.

How do I change what's listed?

Edit TARGETS at the top of the file, a list of plain strings. Version numbers like "Node 22" and "Bun 1.2" are compatibility data, which is the one place a real product name belongs in a banner; keep them true, and remove them from the list if you'd rather use generic words. Eight badges fill a wide screen; the row repeats itself automatically if yours is shorter than the strip.

Can I change the direction and the speed?

Yes, on the Marquee: speed is in pixels per second (36 here) and reverse flips the direction. The sibling Tags Marquee Banner does that. In a right-to-left page the row reads and moves from the other side on its own.

What does the row look like with reduced motion?

It stops and becomes a row you can scroll sideways by hand, with the repeated copy hidden so each badge appears once and the edge fade removed so the first and last badges aren't dimmed. The pause button hides because there is nothing to pause.

How does it fit on a phone?

The "Works with" cell and its button stay at the start, and the badges scroll in the width that's left. The strip stays one line, 44 pixels tall, at every width.

All 100 banner blocks