Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Logos blocks

Pro

Row Labels Dual Marquee Logos Block for Radix UI

Two rows of customers of a factory-scheduling service, each a band with an Aerospace or Automotive label cell at the start, divided from the moving logos by a hairline.

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 labelled two-row logo marquee for React with Radix UI. Under a centred header, two bands each hold an industry: a label cell at the start with the industry's name and a plant count, a solid hairline, and a row of customer wordmarks moving in the other direction from the band above. The divider meets each band's rule at a + mark. A button at the end of the first row pauses both. On a phone the label sits above its row. It's built from Marquee, Button and Guides, with CSS for the entrance and your theme's tokens for every colour. For a product that serves several industries and wants to show the breadth, not just the volume.

FAQ

How do I change the industries and customers?

Edit INDUSTRIES (and the two arrays it lists, AEROSPACE and AUTOMOTIVE) at the top of the file: each industry has a label, a plant count and its customers. The heading's total is the sum of the counts, so it stays in step. Add a third band by adding an entry and another IndustryBand.

How does it stop?

Four ways: the pause button at the end of the first row (a toggle with aria-pressed that stops both rows), hovering a row, focusing into a row, and the visitor's reduced-motion setting, which stops both rows and leaves them as rows you can scroll by hand. The second row keeps a matching space at its end so both rows fade out at the same place; the button is hidden with reduced motion.

How is it marked up for screen readers?

Each label is an h3, so the industries are a headings outline under the block's h2. Each row is a region named for its industry ("Aerospace customers"); the first copy holds each customer's name as text, and the looping copies are hidden from assistive technology and can't be focused.

Why is the number in a bdi element?

The plant counts and the total are wrapped in bdi so a right-to-left page keeps each figure in reading order instead of moving it next to the wrong word.

How does it fit on a phone?

Below lg the divider disappears and the label sits above its row, with the bands' rules between them. The rows stay marquees at the full width and nothing scrolls sideways at 320 pixels.

All 100 logos blocks