Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Logos blocks

Pro

Bordered Chips Single Marquee Logos Block for React

One row of pill chips for a calendar-booking tool, each a customer's icon and name with a small badge for the plan it is on, ruled as a band under a start-aligned header.

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 chip marquee for React with Base UI. A start-aligned header says how often the product is used and carries a button that pauses the scrolling. Under it, a ruled band that ends the block holds one row of rounded pill chips, each a customer's icon and name and a small outline badge with its plan ("Solo", "Team", "Business", "Enterprise"), fading out at both ends as they scroll. The marquee's looping copies are hidden from screen readers. It's built from Marquee, Badge, Button and Guides, with CSS for the entrance and your theme's tokens for every colour. For a page that wants to show not only who uses the product but how, and where a chip's border keeps a long roster easy to scan.

FAQ

How do I change the customers and plans?

Edit CUSTOMERS at the top of the file: each entry is an icon, a name and a plan. The plan is text in a Badge, so use any short word. A screen reader hears the plan as "Team plan".

How does it stop?

Four ways: the pause button in the header (a toggle with aria-pressed), hovering the row, moving keyboard focus into it, and the reduced-motion setting, which stops the row and leaves it as a row you can scroll by hand. The button is hidden under reduced motion because there is nothing left to pause.

How do I change the speed or the gap?

Change speed (pixels per second) and spacing on the Marquee. The chips' size comes from their padding and the type size of the name.

How is it marked up for screen readers?

The marquee is named "Customers and their plans". The first copy is the real list: each chip has the customer's name and plan as text and a decorative icon. The repeated copies are hidden from assistive technology and can't be focused. The chips aren't links, so they aren't tab stops.

Does it follow my theme?

Yes. Chips are bg-card with a border that darkens on hover, the text is muted-foreground and turns to the foreground, and the fade is a mask. Nothing is a fixed colour and primary isn't used.

  • Pro

    Monogram Chips Single Marquee Logos

    Marquees

    A strip for a children's reading app: a label row with a pause button, then one row of chips, each a square monogram badge and the name of a school.

  • 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 Row Marquee Logos

    Marquees

    A centred heading for a secure-messaging tool over one row of large customer wordmarks in a ruled band, with a pause button in a cell of its own at the end.

  • Pro

    Reverse Direction Single Marquee Logos

    Marquees

    One row of customer wordmarks for a flight-school scheduler with transport controls in the header: a Forward and Backward switch that turns the row around, and a button that pauses it.

  • Pro

    Dual Row Marquee Logos

    Multi-row marquees

    Two rows of customer wordmarks for a camera-security service, scrolling in opposite directions at one calm speed under a centred header, with a button that pauses both.

  • 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