Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Logos blocks

Pro

Mixed Variants Dual Marquee Logos Block for React

Two rows of customers of a returns-management service in two kinds of logo: wordmarks on top and icon-only tiles on a tinted band below, moving in opposite directions.

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 two-row logo marquee with two kinds of logo for React with Base UI. A start-aligned header with a pause button at its end sits over two rows at the same speed in opposite directions: wordmarks (an icon and a name in its own lettering) on top, and, on a tinted band that runs the width of the page, icon-only square tiles below. Both rows fade out at both ends. The rows share a band whose rules meet the page rails at + marks, and the tile row ends the block. It's built from Marquee, Button and Guides, with CSS for the entrance and your theme's tokens for every colour. For a customer base that mixes household names and smaller shops, or to give a strip a second rhythm.

FAQ

How do I change the customers?

WORDMARKS holds the top row: a Lucide icon, a name, a lettering and a mark. TILES holds the bottom row: just an icon and a name. Keep eight or more wordmarks and fourteen or more tiles so neither row shows the same logo twice at once.

Who can tell the icon tiles apart?

Every tile has the customer's name as text for screen readers, so the row is still a list of names to them. Sighted visitors see the icon only, so give each customer a distinct icon. For a hover label, see the single icon-only marquee block.

How does it stop?

Four ways: the pause button in the header (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 pause button is hidden with reduced motion.

How is the tinted band made?

The band is its own box with a first child, a layer as wide as the viewport and tinted with the muted colour, behind the tiles; its rule bleeds to the page edges too. The tiles are bg-background with a ring so they stay lighter than the band in both modes.

Does it follow my theme?

Yes. Nothing is a fixed colour and primary isn't used: wordmarks and icons are the muted foreground colour and turn to the foreground on hover.

  • Pro

    Dual Row Marquee Logos

    Multi-row marquees

    Two rows of customer wordmarks for a camera-security service, scrolling in opposite directions at one calm speed under a centred header, with a button that pauses both.

  • Pro

    Dual Marquee Monogram Row Logos

    Multi-row marquees

    Two rows of two-letter monogram tiles for a textile-ERP maker, scrolling in opposite directions at a tight spacing with one button that pauses both.

  • Pro

    Fast and Slow Dual Marquee Logos

    Multi-row marquees

    Two depths of customer wordmarks for a barrel-tracking service: large names drifting slowly in front, small ones three times as fast behind, in opposite directions.

  • Pro

    Icon Only Single Marquee Logos

    Marquees

    A strip of fourteen customers of a feature-flag service as icon-only square tiles that scroll on their own, with a button to pause them and each customer named on hover.

  • Pro

    Bordered Chips Single Marquee Logos

    Marquees

    One row of pill chips for a calendar-booking tool, each a customer's icon and name with a small badge for the plan it is on, ruled as a band under a start-aligned header.

  • Pro

    Speed Picker Dual Marquee Logos

    Multi-row marquees

    Two rows of customer wordmarks for a lighting-control service in a raised panel, with a Calm, Normal and Fast speed picker and a pause button at the end of the heading row.

All 100 logos blocks