Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Hero blocks

Pro

Centered Stacked Cards Deck Hero Block for Radix UI

A centred showcase hero for a reporting workspace: the headline and a Shine Button, then a band between the rails with a fanned deck of three app windows (Dashboard, Analytics, Reports) that runs off its foot, masked.

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 centred showcase hero between solid rails, for React with Radix UI. On top, an announcement link, the headline, a supporting sentence and two calls to action: a ShineButton, the only primary control, and an outline Button, both links. Below, a band under its own top rule, with + marks where it meets the rails, holds three Cards drawn as app windows that overlap like a hand of cards: the outer two tilt away and tuck under the middle one, which sits raised in front. The deck runs off the band's foot and fades out there. Each card holds a 4:3 screen drawn in your theme's greys: two stat tiles over a visitors chart, a week of sessions with today's bar in full strength, and a table of reports with their status. The screens are sized in container units, so each one scales with its card. The product is Fernhill, a fictional reporting workspace for small teams. For template galleries, multi-product platforms, portfolios and SaaS overviews with several screens to show.

FAQ

How do I put real screenshots on the cards?

Replace the screen inside each card's AspectRatio (DashboardScreen, AnalyticsScreen, ReportsScreen) with an img that fills it (size-full object-cover object-top), and use a different screen on each card. The cards keep a 4:3 shape; change ratio to match your screenshots rather than cropping them. If the screenshots carry meaning, give each an alt and remove aria-hidden and inert from the deck; while they're drawings, the deck is decoration.

How do I rename the cards or change the fan?

Edit CARDS at the top of the file: each card has a label for its title bar and a place in the fan, start, middle or end. FAN holds what each place does: how far it tucks under its neighbour, how much it tilts, how high it sits, its shadow and its stacking order. Raise the tilt from rotate-3 to rotate-6 for a wider fan. BAR starts the end card's title past the edge the middle card covers; change it with the overlap.

How do I change how much of the deck shows?

The band's height (h-72, sm:h-[22rem], md:h-[28rem]) decides where the deck is cut, and the mask at its foot (black_62%) where it starts to fade. Make the band taller to show more of the cards. Below sm the deck is wider than the screen and centred, so the middle card is whole and its neighbours are cut at the band's edges.

What happens to the fan in right-to-left layouts?

It mirrors. The cards follow the reading direction, so the first one sits on the right, and its tilt flips with it (rtl: rotations), so both outer cards still lean away from the middle one. The overlaps use logical margins, which tuck the outer cards under the middle one on either side.

What does a screen reader hear?

The announcement link, the headline (the block's one h1), the subtitle and the two links, which are named by their text. The deck is a decorative drawing, so it's hidden from assistive technology and kept out of the tab order with inert, and nothing in it can be focused.

When should I use a stacked deck instead of a bento grid?

Use the deck when the screens are variations on a theme, such as templates, views or products in one family, and a sense of depth and variety matters more than detail. Use a bento grid when each screen makes its own point and visitors should read them side by side, each in its own cell.

All 150 hero blocks