Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

About blocks

Pro

Snap Row Case Study Cards Block for React Aria

A scroll-snap row of five case-study covers, each with a drawn wordmark, a giant result figure, two tags and a link, and a wider first card.

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 case-study block for React with React Aria, written for Foliowright, a fictional portfolio builder for creative studios. Under a compact header with Previous and Next buttons at its end, five case studies sit in a snap-scroll row. Each cover is drawn, never a photo: the customer's wordmark, a giant result figure and a line pattern from the blog cover kit. Beneath it are two tags, what the figure measures and one link, Read the study. The first card is wider, and a phone shows one card with the next peeking in. The row never moves by itself. It is built from Badge, Button and Guides. The studios and results are example data.

FAQ

How do the arrow buttons work?

They scroll the row by one card. At either end the button reports aria-disabled and does nothing, but stays focusable, so keyboard users don't lose their place. You can also swipe, drag the scrollbar or scroll with a trackpad.

How does a keyboard user reach every card?

Each card has one link, its title's "Read the study", which is a tab stop; tabbing to a card in the row scrolls it into view. The row snaps card by card.

Does it advance by itself?

No. Nothing moves unless you do, so there is nothing to pause.

Can I put a photo on a cover?

Yes. Replace the contents of Cover with an image that fills the frame (size-full object-cover) and keep the title and figure as text next to it.

Does it work in a right-to-left layout?

The row starts at the other side and the buttons swap roles, with their arrows mirrored. The covers keep their own direction because they are artwork.

Are the studies real?

No. Foliowright and its customers are fictional, and every figure is example data.

All 150 about blocks