Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Team blocks

Pro

Peek Carousel Team Block for React

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 Base UI, 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.

  • Pro

    Centred Carousel Team

    Carousels and reels

    Seven people of a ceramics studio in a centred snap carousel: the middle card is full size and raised, its neighbours shrink and mute, and only the middle card is read and focusable.

  • Pro

    Card Carousel Features

    Carousels and media

    A multi-up carousel of seven capability cards for a product-tour builder, each led by a greyscale drawing, with the next card cut off at the rail and previous and next buttons in the heading row.

  • Pro

    Grid Cards Team

    Grids and walls

    Twelve 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.

  • Pro

    Accordion Profiles Team

    Tabs and accordions

    Ten people of a recruiting-tool company as hairline accordion rows that run from rail to rail; opening a row shows the department, a two-line bio, a personal quote and two text links, one row at a time.

  • Pro

    Testimonials Multi-Up Carousel

    Carousels and decks

    A quote carousel for an accounting platform that shows one, two or three cells per page by screen width, in a hairline-ruled band, paged with previous and next buttons and a Page 1 of 2 count in the heading row, or with the arrow keys.

  • Pro

    Gallery Spotlight Team

    Carousels and reels

    Six people of a lab-booking platform as a gallery: one person in a framed panel (an initials plate, name, role, quote, bio and three figures) over a filmstrip of six avatars that picks who is in focus.

All 126 team blocks