shadcn.io is not affiliated with official shadcn/ui
Centered Stacked Cards Deck Hero Block for React
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.
Installation
Overview
A centred showcase hero between solid rails, for React with Base 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.
Related
- Pro
Split Layout Overlapping Browser Frames Hero
Product windowsA split hero for a design tool: a headline, a Shine Button, a second action and three short feature ticks beside two overlapping browser windows that run off the edge of the column: a projects list behind an editor.
- Pro
Centered Floating Feature Cards Hero
Stats and live dataA centered hero between solid rails with four small product cards (uptime, a resolved incident, who is on call, latency) drifting in around the copy, a Shine Button, an outline button and a ruled proof band.
- Pro
Centered Feature Cards Grid Hero
Features and tablesA showcase hero between solid rails: an announcement link, a centred headline and a Shine Button, over three feature cells with overshooting hairlines, each led by a greyscale vignette of the feature.
- Pro
Bento Grid Feature Showcase Hero
Features and tablesA showcase hero with the headline on one side and the pitch on the other, over a bento of six labelled product views in cells that share hairlines.
- Pro
Split Layout Hover Cards Hero
Features and tablesA split hero for a deploy platform: an outline badge, the headline, one sentence and a Shine Button beside three linked feature cards that lift under the pointer, each in a cell with solid lines that run past its corners.
- Pro
Dashboard Preview Hero
Product windowsA showcase hero with a headline, a Shine Button, an outline button and a trust line above a wide browser window in a hairline frame, a greyscale sketch of an analytics dashboard that runs on below the fold.