Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Carousel blocks

Pro

Logo Cloud Carousel Block for React Aria

Fourteen typed customer wordmarks in two brick-offset rows that page together, with an industry select that dims the others, a counter, dots and Previous and Next.

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

Show who uses your product without a marquee, with this logo cloud carousel for React with React Aria. Logoholt, a customer-wall builder, shows fourteen customer wordmarks set in type, never as images, in two rows that page together: each slide is a column of two hairline tiles with the second row set in like bricks, so both rows move as one. Four columns show from the large breakpoint, three from medium and two with the next peeking on a phone. The header's one control, an Industry select, dims every wordmark outside the industry you pick and the status line says how many match; nothing is removed, so the track keeps its length. The foot holds the counter ("Customers 1–8 of 14"), a dot for each step and Previous and Next Buttons. There is no auto-scroll: the track is paged by hand. The ruled bands come from Guides. The customers are made up.

FAQ

How do I use my own customers?

Edit WORDMARKS. Each has an id, a name, an industry and a look, the classes that set its lettering. Swap the text for your customers' own logo images inside Tile if you have their permission to show them; the columns are rebuilt in pairs from the list, so add or remove an even number of entries and update COLUMNS.

What does the Industry select do?

It dims the wordmarks outside the chosen industry to a quarter of their weight and adds a sentence to the status line ("Retail: 4 of 14 customers"). It never filters the list, so the dots and the counter stay the same. Choosing "All industries" restores every tile.

How does it work with a keyboard?

Tab reaches the controls, Previous, the dots and Next. With focus inside the track, the arrow keys move it (mirrored in a right-to-left layout) and Home and End jump to the first and last position. Previous and Next stay in the tab order at the ends and are marked unavailable instead of disabled, so focus never disappears. Slides out of view are hidden from the tab order and from screen readers.

What moves the track?

Previous and Next move it one column; the dots go to a position. The track is an Embla carousel; the block listens for its select event and re-counts the snaps when the layout changes.

What stays local in the demo?

Everything. The customers, their industries and the lettering are typed example data, and nothing is fetched or saved. To wire it for real, load your customer list from your own API into WORDMARKS and keep the rest.

How does it look on a phone?

Two columns show with the next one peeking at the edge, the buttons and counter share the first line of the foot and the dots sit on a line of their own. The track follows a finger and snaps to a column.

All 100 carousel blocks