Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Logos blocks

Pro

Pipe Dividers Single Marquee Logos Block for React

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.

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 filmstrip logo marquee for React with Base UI. Twelve fixed-width cells slide past in one row, each holding one customer wordmark, and every cell ends in a hairline pipe that runs its full height, from the page's top rule to the foot of the block. A still cell at the start holds the pause button, like the sprocket edge of a film. The strip has no padding of its own and draws no bottom rule, so the next section's top rule closes it and a stacked page never doubles a line. The ends fade by a mask. Built from Marquee, Button and Guides, with your theme's tokens for every colour. For a slim band right under a hero.

FAQ

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). Every cell is w-44, so a long name wants a smaller lettering rather than a wider cell.

How do the pipes loop without a seam?

Each cell carries its own pipe at its end (border-e) and the marquee has no spacing, so the pipe after the last cell is the same as between any two cells, and the next copy of the row starts straight after it. The still cell at the start has its own pipe.

How does it stop?

With the pause button in the first cell (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 scrolling and lets the row scroll by hand. Under reduced motion the first cell stays and its button is hidden.

Why does the strip have no padding?

The cells are the strip: their pipes should meet the top rule above and the next block's top rule below. Padding would leave the pipes floating. To give the strip air, raise the cell height (h-22).

How is it marked up for screen readers?

The marquee is named "Customers of Lathework". The first copy holds each customer's name as text with a decorative icon; the looping copies are hidden from assistive technology and can't be focused. The pipes are borders, not elements.

  • Pro

    Slow Sixty Second Single Marquee Logos

    Marquees

    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.

  • 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

    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

    Divided Rows Static Grid Wall Logos

    Walls

    A wall of eighteen wordmarks for a bug tracker in three rail-to-rail bands laid like bricks, no lines between the logos, the middle band shifted half a logo's width.

  • 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