shadcn.io is not affiliated with official shadcn/ui
Dark Inset Single Marquee Logos Block for React
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.
Installation
Overview
A scrolling logo row in a raised tray for React with Base UI. A tinted frame holds a lighter panel, and the panel holds a quiet line at its start, "Inspection firms that file their reports on Underhill", a pause button at its end and a single row of twelve customer wordmarks that loops slowly and fades at the edges. Each wordmark sits in an outlined tile; the tile under the pointer lifts, takes a stronger ring and turns from muted to full-strength text. The block follows your theme, so in a dark theme the tray is dark and in a light theme it is light: the depth comes from the frame inside the page column, not from a forced black panel. Built from Frame, Marquee, Button and Guides, with CSS for the entrance and the lift, and your theme's tokens for every colour. For a band under a hero where a long customer list should read as one calm movement.
FAQ
How do I change the customers?
Edit CUSTOMERS at the top of the file. Each entry is a name, an icon (any Lucide icon), a lettering (the Tailwind classes for the name's type) and a mark that places the icon: inline, in a badge, in a ring or trailing after the name. The names are fictional placeholders for your own customers.
How do I stop the row?
Four ways: the pause button in the tray's header (a toggle with aria-pressed), hovering the row, moving keyboard focus into it, and the visitor's reduced-motion setting, which stops the scrolling and leaves the tiles as a row that scrolls by hand. The pause button is hidden under reduced motion because there is nothing left to pause.
What does the hover do?
The tile under the pointer rises two pixels, gains a shadow and a stronger ring, and its wordmark turns from text-muted-foreground to text-foreground. Hovering also pauses the whole row, so a tile can be reached. Under reduced motion the tile keeps its place and only the colour and ring change.
Why a tray instead of a dark panel?
Blocks follow the theme. The tray is a Frame (a tinted shell) around a FramePanel in the card colour, which reads as raised in light and dark themes alike. A fixed dark panel would turn out wrong in half the presets.
How is it marked up for screen readers?
The marquee is named "Customers of Underhill". The first copy of the row holds the customers' names as text with decorative icons; the repeated copies that make the loop are hidden from assistive technology and can't be focused. The tiles are not links, so the only tab stop is the pause button.
Related
- Pro
Speed Picker Dual Marquee Logos
Multi-row marqueesTwo 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.
- Pro
Icon Only Single Marquee Logos
MarqueesA 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
MarqueesA 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
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
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
Logo Marquee Hero
Logos and social proofA 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.