Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Dark Inset Numbered Pillars Features Block for Radix UI

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 Radix 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.

All 170 features blocks