Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Horizontal Marquee Band Features Block for React Aria

A feature section for a medication planner with a marquee of ten capability chips between two ruled lines, a visible Pause button, and three feature cells with small greyscale drawings below.

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 capability band for React with React Aria. A compact header carries a Pause button at its end; under it, ten capability chips (an icon, a name and a metric badge) scroll sideways between two ruled lines with + marks at the rails, with soft edges. Below the band, three feature cells with overshoot lines each show a small greyscale drawing (a reminder, a bottle's pills, a week of doses), a title and one sentence. It's built from Marquee, Button, Badge and Guides, with CSS for the entrance and your theme's tokens for every colour. For products with many small capabilities, where a moving strip says "a lot" and three cells say "how".

FAQ

How do I stop the scrolling?

Press the Pause scrolling button above the strip: it's a real button before the strip in the reading order, it shows a pause or a play icon, and it reports whether the strip is paused. The strip also pauses while the pointer is over it or focus is inside it. Moving content can be stopped, as WCAG asks.

What happens with reduced motion?

The strip doesn't scroll at all. It becomes a still row that you can scroll sideways yourself, the repeated copies that make the loop are removed, and the edge fade is off so no chip is hidden. The Pause button is hidden then, because there is nothing to pause.

How do I change the chips?

Edit CAPABILITIES at the top of the file: each has an icon, a name and a metric. Ten is enough for the strip to be longer than a wide screen; with fewer, add more. The repeated copies are hidden from assistive technology and can't be tabbed to, so a screen reader hears each chip once.

How do I change the three cells?

Edit REMINDERS, REFILLS and SCHEDULE for the titles and sentences; each cell takes its drawing as its child. The drawings are decoration, hidden from assistive technology, and the bottle's count and the week's doses are derived from PILLS, TAKEN and DAYS.

Does it follow my theme?

Yes. The chips, the cells and the drawings use card, muted and foreground tokens, with no dark scope and no primary surface, so the section follows light and dark and every preset.

How does it fit on a phone?

The strip keeps scrolling at its own size, with the Pause button under the header, and the three cells stack one per row with room between them for their overshoot lines. Nothing scrolls sideways at 320 pixels except the strip itself.

All 170 features blocks