Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Carousel blocks

Pro

Awards Carousel Block for React Aria

Nine award plaques for a restaurant guide, three to a page, with a Stop, Rewind or Loop switch that sets what Next does on the last page and a status line that says what happened.

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

Teach what happens at the end of a row, with this awards carousel for React with React Aria. Forkmere, a restaurant guide, shows nine award plaques, each a rosette of concentric rings (one ring for each year the award has been given), the award, the year and jury, and one sentence. A toolbar band holds a Segment Group "At the end: Stop, Rewind, Loop" that changes what Next does on the last page and Previous on the first: Stop leaves the button in the tab order but unavailable and says so, Rewind goes back to the other end and says so, and Loop carries on past the last plaque. Under the track a foot holds the counter, a dot for each page and Previous and Next Buttons. Three plaques show from the medium breakpoint and a phone shows one with the next peeking. It's built from Carousel, Segment Group, Button and Guides. The awards and the jury names are made up.

FAQ

How do I use my own awards?

Edit AWARDS. Each has an id, a title, a year, a jury, a text and rings, the number of years it has been given, which draws that many rings in the rosette. Keep the count a multiple of three if you want full pages at the medium breakpoint; the counter and the dots recount from the list.

What do Stop, Rewind and Loop do?

Stop is the default: on the last page Next is marked unavailable (it stays in the tab order) and pressing it says "At the end. Choose Rewind or Loop." Rewind jumps back to the first page, and Previous on the first page to the last, and says so. Loop carries on past the end. Loop turns on Embla's loop option, so the track runs on past the last plaque with no seam; Rewind scrolls back across the track.

How does it work with a keyboard?

Tab reaches the switch, the dots, Previous and Next. With focus inside the carousel, the arrow keys move a page and follow the switch at the ends, and Home and End jump to the first and last page. Plaques that are out of view are hidden from the tab order and from screen readers.

What is announced when it moves?

The foot's status line is the block's one polite live region. It says the awards in view ("Awards 4–6 of 9") or, after a move past an end, what the switch did ("Back at the first award"). The note belongs to the page it was made on and is replaced when you move away.

What stays local in the demo?

Everything, including the switch. Nothing is fetched or saved. To wire it for real, load the awards from your own source into AWARDS; the edge mode is a view option and can live in your own settings.

How does it look on a phone?

One plaque shows with the next peeking at the edge. The switch stays above the track, wrapping under the header if needed, the counter and buttons share the first line of the foot, and the dots sit on a line of their own.

All 100 carousel blocks