Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Team blocks

Pro

Card Stack Team Block for Radix UI

Six people of a perfume subscription as a deck of overlapping profile cards in a framed figure, each card peeking 16 px under the one above, with Previous and Next buttons, a counter and only the top card focusable.

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 team section for React with Radix UI, for Osprelle, a perfume subscription. A heading and one sentence sit beside a framed figure that holds a deck of six profile cards: each card is an initials avatar, a name, a specific role, a line of what to ask them about, a city and a "Say hello" link. The cards overlap, each peeking 16 px under the one above it. Previous brings the last card to the top and Next sends the top card to the back, with a "2 of 6" counter between them. Only the top card can be focused, and a polite line names who is on top. Under reduced motion the cards swap without sliding. On a phone the deck sits under the heading and the buttons under the deck. It's built from Avatar, Button and Guides, with CSS transitions and your theme's tokens for every colour. For a short team that you want to browse rather than list.

FAQ

How do I change the people?

Edit PEOPLE at the top of the file: a person is a name, a role, an ask sentence (it follows "Ask me about") and a city. The counter and the buttons' wrap-around come from the array's length. Cards are a fixed height, so keep each ask to about two lines.

Why can only the top card be focused?

The cards underneath are covered, so a link in one would take focus to something nobody can see. They are marked inert, which takes them out of the tab order and the accessibility tree; Previous and Next bring each one to the top. The counter is a polite live region that reads the name and position ("Tariq Mansour, 2 of 6") when the deck changes, so a screen reader user hears who is on top without leaving the button.

How do I move through the deck with a keyboard?

Tab to Previous or Next and press Enter or Space; the focus stays on the button, so you can press it again. The deck wraps in both directions. The top card's "Say hello" link is the first Tab stop in the block, before the buttons.

How is the peek drawn?

Every card sits in the same place and is moved by its depth: the card below the top is lowered by 16 px and narrowed slightly from its bottom edge, so exactly 16 px of it shows; the third and fourth step down again, and the rest wait behind the fourth, hidden. When the top card goes to the back it slides down behind the others.

What happens under reduced motion?

The cards still change places, but without sliding: the transition is removed, so the new top card appears at once. Nothing else on the block moves.

How does it fit on a phone?

Below lg the figure is a full-width frame under the heading, with the deck centred at a comfortable card width, and the buttons sit under the frame on one line with the counter between them. The deck's height is fixed, so pressing a button never shifts the page.

All 126 team blocks