Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Logos blocks

Pro

Slow Sixty Second Single Marquee Logos Block for React

The calmest logo loop: fourteen customer wordmarks of outdoor shops drift past in one row in sixty seconds, with wide gaps, no heading and only a pause button.

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 slow logo marquee for React with Base UI. Fourteen customer wordmarks from walking clubs and outdoor shops move past in one unbroken row, one full turn in sixty seconds, with four rem between them and a soft fade at both ends. There is no heading and no sentence: a pause button at the start of the row is the only control, and the strip rests on the page's top rule and nothing else. It is a block for the quiet space under a hero or above a footer, where the logos should add up to an impression and not be read one by one. Built from Marquee, Button and Guides, with your theme's tokens for every colour. Each wordmark is real text in its own lettering with an icon, muted until hovered.

FAQ

How do I change the speed?

The speed prop on Marquee is pixels per second. The row is about 2,280 px wide at 1280 px, so speed={38} gives sixty seconds for a full turn. Divide the row's width by the seconds you want. The row's width changes with the customers, the spacing and the lettering.

How do I change the customers?

Edit CUSTOMERS at the top of the file: a name, a Lucide icon, a lettering and a mark (inline, badge, ring or trailing). Add as many as you like; the marquee repeats the row as often as the screen needs.

How does it stop?

With the pause button (a toggle with aria-pressed), by hovering the row, by moving keyboard focus into it, and with the visitor's reduced-motion setting, which stops the loop, hides the button and lets the row scroll by hand.

How is it marked up for screen readers?

The marquee is named "Customers of Cairnbook". The first copy of the row is the real content, each wordmark's name as text with a decorative icon; the repeated copies are hidden from assistive technology and can't be focused. The wordmarks are not links.

What changes on a phone?

Nothing: it is the same single row, with the pause button at its start. The gaps and the speed stay the same, so a phone shows fewer customers at once.

  • 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

    Pipe Dividers Single Marquee Logos

    Marquees

    A filmstrip of twelve customer wordmarks for a machining-quote tool: fixed-width cells slide past in one row, each cut from the next by a full-height hairline pipe.

  • Pro

    Single Marquee With Claim Logos

    Marquees

    A split strip for a code-search tool: a start cell with the claim "Trusted by 4,000+ teams" divided from a scrolling row of wordmarks that fades out toward a pause button.

  • Pro

    Dark Inset Single Marquee Logos

    Marquees

    A single row of twelve customer wordmarks for a home-inspection report tool, riding in a raised tray with a pause button, each tile lifting under the pointer.

  • Pro

    Wordmark Only Strip Logos

    Strips

    A strip of eight customer names of a design-handoff product set as type alone, each in its own typeface treatment, with no icons, cells or lines but the page's top rule.

  • 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.

All 100 logos blocks