shadcn.io is not affiliated with official shadcn/ui
Pipe Dividers Single Marquee Logos Block for Ark UI
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.
Installation
Overview
A filmstrip logo marquee for React with Ark 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.