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

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

  • Pro

    Hover Card Customer Logos

    Customers

    Twelve drawn customer wordmarks for a parcel-logistics company in cells that share their hairlines, each opening a hover card with the shop's trade, how long it has been a customer and what it sends.

  • Pro

    Mention Tally Customer Love

    Customers

    What customers mention most for a review-monitoring tool: six themes ranked with a bar to scale and a count, each opening two word-for-word snippets, with the tally derived from the typed reviews.

  • Pro

    Tabbed Success Stories About

    Customers

    Three customer stories for an onboarding product, one tab each: a short quote and a three-node track of the customer's first 90 days, with one result on Day 1, Day 30 and Day 90.

  • Pro

    Client Results Table About

    Customers

    A framed table across five shop clients for an A/B testing tool: what was tested, before and after, and the improvement computed as a chip with an arrow and a sign, with a ringed row on hover and focus.

  • Pro

    Cards Grid Blog

    Card grids

    The six latest posts of an engineering blog as cards on shared hairlines: drawn greyscale covers, a category, the title as the card's one link, a one-line dek and a byline with the date and reading time.

  • Pro

    Drawn Bento Use Cases

    Customers

    A bento of four use cases in shared hairlines, each with a small greyscale drawing of its screen, a badge, a title, one line and a metric.

All 150 about blocks