Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Dark Inset Numbered Pillars Features Block for React

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.

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-pillar features section for React with Base UI. A centred header sits above a card in card: a muted shell with + marks on its corners wraps a raised panel that follows your theme. Inside, an ordered list of three columns divided by hairlines (stacked on a phone), each with an oversized ghost numeral, a title, one sentence and a small greyscale drawing pinned to its foot: a progress bar, an SVG sparkline and an avatar stack. The numerals are drawn by CSS and the order is in the list. It's built from Avatar and Guides, with CSS transitions for the entrance. For finance, operations and any product with three foundations that each have a number to show.

FAQ

How do I change the pillars and their drawings?

Edit PILLARS: each entry has a title, a sentence, a numeral and a drawing, a small component. MatchBar, RunwaySpark and ApproverStack are examples; swap in your own or reuse one. Keep it to three so the columns fill the panel.

Where does the sparkline's shape come from?

From RUNWAY, a list of eight balances. The path and the end dot are computed from it, so changing a number redraws the line. The drawing is decoration, hidden from assistive technology, and the sentence beside it states the point.

Are the ghost numerals read aloud?

No. They are drawn by a CSS pseudo-element from a data attribute, so they are not text at all: the order is already in the ordered list, and the numerals would only be read twice.

Does the panel follow my theme?

Yes. There is no dark scope: the panel is light on a light page and dark on a dark one, with the muted shell, shadow and ring keeping it raised.

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 three pillars stack in one column, divided by hairlines, with each drawing at the foot of its pillar. The header is centred and nothing scrolls sideways at 320 pixels.

  • Pro

    Dark Inset Icon Grid Features

    Card grids

    A card-in-card grid of six capabilities for a team knowledge base, each with an icon tile, a sentence and a row showing which of three plans include it.

  • 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

    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

    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

    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

    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