shadcn.io is not affiliated with official shadcn/ui
Bordered Chips Single Marquee Logos Block for React Aria
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.
Installation
Overview
A chip marquee for React with React Aria. 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.