Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Minimal Outline Card Trio Features Block for React

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

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-step features section for React with Base UI. A start-aligned header sits above three cells whose hairlines overshoot their corners, with a + mark on each top-start corner. Each cell leads with an oversized step numeral, then a title, one sentence, and ends on an outcome badge with its arrow and figure, such as "Cut planning time by 40%". There are no icons: the numerals and the outcomes are the structure. Three across from lg and stacked below. It's built from Badge and Guides, with CSS transitions for the entrance. For process-led products where each step has a measurable result.

FAQ

How do I change the steps?

Edit STEPS: a numeral, a title, a sentence, an outcome and rising, which picks the badge's arrow (up-right for a gain, down-right for a cut). Keep the outcome to one short line so the badge doesn't wrap.

Are the numerals read aloud?

No. They are decoration (aria-hidden); the steps are an ordered list, so the order is announced once.

Are the outcome figures real?

They are examples for a fictional product. Replace them with your own measured results, and keep each one a figure with a unit so it reads as a claim you can stand behind.

Why do the lines overshoot the corners?

Each cell draws its own hairlines with Guides, which run a little past the corners, so the cells read as drawn on a plan. The cells are gap-6 apart so neighbouring lines 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, each with its numeral, title, sentence and badge. The badge's text wraps inside the card; nothing scrolls sideways at 320 pixels.

  • Pro

    Framed Preview Card Trio Features

    Card grids

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

  • 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

    Dark Inset Numbered Pillars Features

    Card grids

    Three numbered pillars on a card in card, each ending in a small drawing: a match bar, a runway sparkline and a stack of approvers.

  • Pro

    Manifesto Quad Grid Features

    Headline-led

    A centred manifesto feature section for a deploy tool: a statement over a full-width two-by-two of numbered principles, each written as what you give up against what you get, crossing at one plus mark.

  • Pro

    Metric Hero Strip Features

    Metrics and charts

    Four metric-over-feature columns for a data-pipeline tool: a giant tabular figure and label, then the feature that makes it true, in one divided band under a centred header.

  • 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