shadcn.io is not affiliated with official shadcn/ui
Team Voices Carousel About Block for React
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 Base UI, 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.
Related
- Pro
Values Slider About
Culture and valuesA carousel of six values for an HR platform, one per slide in a band from rail to rail: the value, a practice example and one figure side by side, with Previous and Next buttons, a counter and dots.
- Pro
Tenure Testimonial Carousel
CustomersA carousel of five long-term customers of a retention product, each with how long they have stayed and read-only stars, beside the figure the block is about: 68% stay three years or longer.
- Pro
Testimonial Split About
Company storyA construction-management company's description beside one customer quote: a split on a solid divider with the quote on a card in a card, read-only stars, the author and a link to their story.
- Pro
Culture Rituals About
Culture and valuesA team's rituals sorted by how often they happen: three bands, every week, every quarter and every year, each with three cells that say what the ritual is, who comes and how long it takes.
- Pro
Advisory Board About
Team and leadersAn advisory board for a legal-software company: five advisors in an accordion, each with the practices they cover, why they advise, and one piece of advice.
- Pro
Grid Cards Team
Grids and wallsTwelve people of a restaurant-software company in a hairline grid that runs from rail to rail, each an initials avatar with a name, a role, a department badge and a city, under a department picker that brings the picked team to the front and dims everyone else.