shadcn.io is not affiliated with official shadcn/ui
Minimal Outline Card Trio Features Block for Ark UI
Three outline cells with oversized step numerals and an outcome badge at each foot, under a start-aligned header, for an event-planning tool.
Installation
Overview
A three-step features section for React with Ark 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.