Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Team blocks

Pro

Peek Carousel Team Block for React Aria

Twelve people of a farm-box service in a carousel that shows three cards and a cut-off fourth, with previous and next buttons, a 4 to 6 of 12 counter and a thin progress bar.

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

A peek carousel team section for React with React Aria, for Osierby, a farm-box service. A centred header sits over a ruled band that holds the track: each card is a hairline cell with an initials avatar, a name, a role, one line about what they do and two topic tags. Three cards fit at a time and the next one is cut off at the rail as the cue that there are more; a tablet shows two and a phone shows one with a sliver of the next. Under the track, a ruled foot holds a thin progress bar, a counter ("4–6 of 12") and previous and next buttons. The arrow keys turn the cards too. It's built from Carousel, Avatar, Badge, Button and Guides, with CSS transitions and your theme's tokens for every colour. For team pages with more people than a grid should show at once. Names and lines are made up for the example.

FAQ

How do I change the people?

Edit PEOPLE at the top of the file. A person is a name, a role, one line and two tags; the initials come from the name. The counter, the progress bar and the page count are computed from the list, so any number of people works.

How is the cut-off card made?

Each slide's flex-basis is 83.3%, 45.5% or 31.3% at the three breakpoints, so a card and a fifth of the next one fit. The carousel is Embla with align: "start".

Cards that are off the page are inert and hidden from the reading order, so a keyboard never lands on a card you can't see.

How do the controls work?

Previous and next move one card at a time and wrap around, so a button is never disabled while it has focus. The counter and the progress bar say where the first whole card sits ("4–6 of 12", "1 of 12" on a phone), and a polite status line says the same to a screen reader. With focus on either button, the arrow keys turn the cards too, and in a right-to-left page the arrows swap sides.

Can I swipe it on a phone?

Yes. The track scrolls and snaps card by card with a swipe or a drag, and the counter follows.

How are the lines drawn, and how does the block end?

The track's top rule, with + marks where it meets the rails, and the foot's rule come from Guides; the cards share their hairlines. The foot ends the block and draws no bottom edge, so the next block's top rule closes it.

What happens with reduced motion?

The entrance fade is skipped and the progress bar changes without easing. Moving between cards is still a scroll you start yourself; nothing moves by itself.

All 126 team blocks