shadcn.io is not affiliated with official shadcn/ui
Team Voices Carousel About Block for React Aria
A quote carousel for an intranet: one voice at a time with a department badge, how long they have been here, a large initials avatar, and previous and next controls.
Installation
Overview
A team carousel for React with React Aria, written for Warrenly, a fictional intranet. The block is a split. At the start, a header and the previous and next controls, with a "1 of 8" counter. At the end, behind a divider, a Carousel of eight people: one quote, an outline Badge for the department, "here 3 years", and a large initials Avatar. It loops, it swipes, and it never advances by itself. On a phone the header stacks above the quotes. The page's rails and top rule come from the Guides spine. It's built from Carousel, Avatar, Badge, Button and Guides, with a CSS entrance and your theme's tokens for every colour. For an about page that should let the team speak one person at a time. The quotes are example data, and tenure is counted from when each person joined.
FAQ
How do I change the quotes?
The voices are VOICES: a name, a department, a quote and years. The counter, the slide count and the heading all use the length of the list. "here 1 year" and "here 3 years" come from years. Keep the quotes to a similar length so the row does not jump between people. There are no dots to update.
How is it read by a screen reader?
The heading is the section's only h2. The carousel is named "Team voices". Each slide is a figure: the quote, then a caption with the name, the department badge and how long they have been here. The initials avatar is decorative, because the name is written beside it. After the first move, a polite status line announces "Voice 3 of 8" and the name. Nothing is announced on load.
Each slide is a group named with the person and their position.
How do I move between voices?
With the Previous and Next buttons, with the arrow keys while a slide or either button has focus, and by swiping on a touch screen. Both ends wrap. There is no row of dots. The counter is the position, and it lives with the buttons rather than under the quote.
Does it move by itself?
No. The carousel only moves when someone asks it to, so there is nothing to pause. Reduced motion needs nothing special for the same reason.
Does the carousel behave the same on every target?
It uses the Embla-based carousel. The block reads the selected slide from its API and moves it with scrollTo, so the counter follows swipes too.
On every target the carousel loops, and the quote, the badge and the avatar are the same.
How does it fit on a phone?
The header and the buttons stack above the quote, with a rule between them. From lg they sit side by side and the divider is the line between the columns. The buttons are square icon buttons, and the counter does not wrap away from them. Nothing scrolls sideways at 320 pixels. In a right-to-left layout the divider moves to the other side, the arrows turn around, and the counter stays in order.