Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Logos blocks

Pro

Metric Divider Dual Marquee Logos Block for React

Two rows of customers of a ferry-timetable service with a band of figures between them: sailings a day, countries and operators, and the pause button for both rows.

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 figures between the rows for React with Base UI. Under a centred header, a row of customer wordmarks, then a band of figures in one description list (sailings a day, countries, operators), cells divided by hairlines with the pause button for both rows at the band's end, then a second row in the other direction. The band's rules meet the page rails at + marks. The rows fade out at both ends, and the second 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 product with both a long customer list and numbers to match.

FAQ

How do I change the figures?

Edit METRICS at the top of the file: each entry is a value and a label. They sit in one description list with the label under the value, so a screen reader hears "Sailings a day, 12,000+". The third figure is hidden on a phone so the first two and the pause button fit at 320 pixels.

Why are the values in a bdi element?

A figure that carries a sign or a unit is wrapped in bdi so a right-to-left page keeps "12,000+" in reading order instead of moving the plus sign to the wrong side.

How does it stop?

Four ways: the pause button at the end of the figures band (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 do I change the customers?

Edit FIRST_ROW and SECOND_ROW: each entry is a Lucide icon, a name, a lettering and a mark. Keep eight or more per row so a row never shows the same logo twice at once.

How is it marked up for screen readers?

Each row is a region named "Customer logos, first row" or "second row"; the first copy holds each customer's name as text, and the looping copies are hidden from assistive technology and can't be focused. The figures are a real description list.

  • 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

    Row Labels Dual Marquee Logos

    Multi-row marquees

    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.

  • Pro

    Metric Hero Strip Logos

    Metrics

    A giant static member count for a loyalty platform under a centred header with two buttons, then a band of three secondary figures and a closing strip of eight customer wordmarks.

  • Pro

    Featured Focal With Metric Trio Logos

    Flagship customer

    A flagship customer for a billing tool in a wide framed card with the modules it runs, closed by a full-width band of three large figures: utilities, years of history and uptime.

  • Pro

    Logo Marquee Hero

    Logos and social proof

    A compact hero for a support platform: copy and two calls to action, then two bands across the column: a strip of customer logos that scrolls on its own with a pause button, and a row of three stats.

  • 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