Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Framed Preview Card Trio Features Block for React

Three tall cells, each opening with a framed greyscale drawing: a photo contact sheet, a shoot timeline and a comment thread.

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 three-preview features section for React with Base UI. A header sits above three tall cells whose hairlines overshoot their corners. Each opens with a framed figure (hairlines and + marks on its corners) holding a different greyscale drawing, then an h3 and a sentence: a contact sheet with picked and rejected frames, a timeline with three tracks and a playhead, and a comment thread pinned to a frame. Three across from lg; one column below with shorter figures. It's built from Avatar, Badge and Guides, with CSS transitions for the entrance. For creative and review tools where each feature has a screen worth showing.

FAQ

How do I change a drawing?

Each figure is its own component: ContactSheet, ShootTimeline and CommentThread. The sheet reads TILES, the timeline reads TRACKS and PLAYHEAD, so editing the data redraws them. They are built from tokens, so no images are needed.

Are the drawings accessible?

They are decoration, hidden from assistive technology. Each card's title and sentence say what the drawing shows, and those are what a screen reader reads.

Does the timeline mirror in right-to-left pages?

No: time runs one way, so the timeline keeps dir="ltr". The rest of the card mirrors as usual.

Why two sets of lines?

The cell's lines (with a mark on its top-start corner) hold the card; the figure's own frame, with marks on all four corners, holds the drawing. They are 24 pixels apart so they never touch.

What moves, and what happens with reduced motion?

The block fades up once when the page loads, with a CSS transition. With reduced motion the transition is off and the section simply appears.

How does it fit a phone?

The cells stack in one column and the figures drop to 176 pixels tall, so the drawing, title and sentence of each card read together. Nothing scrolls sideways at 320 pixels.

  • Pro

    Minimal Outline Card Trio Features

    Card grids

    Three outline cells with oversized step numerals and an outcome badge at each foot, under a start-aligned header, for an event-planning tool.

  • Pro

    Divided Three Column Card Features

    Card grids

    One rounded card split into three columns by hairlines, each ending in a different small drawing: question-type chips, an avatar stack and result bars.

  • Pro

    Aspect Ratio Mockup Cards Features

    Card grids

    A six-cell report-type grid for a reporting tool: a trend line, a table, a funnel, a ranked list, a heat strip and a donut, each drawn on a 4:3 plate above its title and one sentence.

  • Pro

    Browser Chrome Card Grid Features

    Card grids

    Six starter pages for a site builder, each card a browser window with three dots and an address pill over a greyscale skeleton of a pricing page, blog, checkout, docs, dashboard or 404.

  • Pro

    Dark Inset Split Mockup Features

    Split with mockup

    A card-in-card features section for a document editor: three ticked capabilities beside a framed drawing of the editor with comment threads running off the foot.

  • Pro

    Animated Icons Features

    Card grids

    A three-by-three grid of hand-drawn SVG icons that each play their own animation on hover, keyboard focus or tap: a bell rings, a check draws, an arrow uploads.

All 170 features blocks