Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Logos blocks

Pro

Mixed Variants Dual Marquee Logos Block for Vue

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 Vue with Ark 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.

All 100 logos blocks