Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Divided Three Column Card Features Block for React

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.

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-column features section for React with Base UI. A compact header sits above a single rounded card whose three columns share hairlines inside one outer radius. Each column is an icon tile, a title, one sentence and a different greyscale drawing at its foot: a set of question-type chips with one picked, a stack of avatars with a count, and three result bars with their percentages. From md the columns sit side by side; on a phone they stack, divided by hairlines. It's built from Avatar, Badge and Guides, with CSS transitions for the entrance. For products with a three-step flow where each step has something to show.

FAQ

How do I change the steps and drawings?

Edit STEPS: each has an icon, a title, a sentence and a drawing component. The three drawings are QuestionChips, AudienceStack and ResultBars. The bars read from ANSWERS, so changing a share changes the bar and its label.

What do assistive technologies read?

An ordered list of three steps with an h3 and a sentence each. The icons and drawings are decorative and hidden. Percentages are in bdi, so a right-to-left page keeps the sign beside the number.

Why one card instead of three?

Cells that share hairlines read cleaner than three bordered cards with gaps, which double every edge. The card has one outer radius and none inside it.

Does it follow my theme?

Yes. Everything uses theme tokens; the picked chip and the bars use the foreground colour, so the primary colour stays free for your buttons.

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 columns stack in one column with hairlines between them. Chips wrap, the avatar row stays on one line and nothing scrolls sideways at 320 pixels.

  • 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

    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

    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

    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

    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