shadcn.io is not affiliated with official shadcn/ui
Social Proof Carousel Block for React Aria
Eight small proof tiles for a review service, a figure, what it counts and its source, on a seamless loop with a little over four in view and a counter that names the first whole tile.
Installation
Overview
Put a handful of facts in a small strip, with this social proof carousel for React with React Aria. Vouchmere, a review-collection service, shows eight tiles, each a figure in tabular type ("4.8", "92%", "18 h"), what it counts and who says so ("Spring survey, 640 replies"). A little over four tiles show from the large breakpoint, three from medium and two on a phone, each time with the next one peeking, and the track runs round with no seam: Previous and Next never disable. The foot holds a counter that names the first whole tile ("Signal 3 of 8") and the two buttons, and there are no controls on the tiles themselves. It's built from Carousel, Button and Guides. The figures and sources are made up for the example.
FAQ
How do I use my own figures?
Edit SIGNALS. Each has an id, a figure (written as you want it shown), what it counts and its source. Always name the source and the period, and only show a figure you can show again on request. The counter and the slide names derive from the list.
How does the loop work?
Previous and Next wrap round the end and the counter follows the first whole tile.
Embla's loop runs the tiles on with no seam, so a tile from the start appears after the last.
How does it work with a keyboard?
Tab reaches Previous and Next. With focus inside the carousel, the arrow keys move one tile (mirrored in a right-to-left layout) and Home and End go to the first and last position. Tiles are text only, so there is nothing else to focus; tiles out of view are hidden from screen readers.
What is announced when it moves?
The counter is the one polite live region: "Signal 3 of 8". Each tile's name includes its figure and what it counts, so the slide is read whole.