Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Pinned Headline Numbered Grid Features Block for React Aria

A numbered two-by-two for fleet operations with the headline pinned to the end side: four cells in shared hairlines, each with a command line and what it did.

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 numbered grid with a pinned end-side header for React with React Aria. Four cells share their hairlines on the start side, each with a circled number, a title, a sentence and a command line (fleet route --optimise) with a line saying what it did. Beside a split divider, the header (a headline, one sentence and a ghost link) stays in view from lg. The header is first in the page's order and sits at the end only on a wide screen, so on a phone it comes first. The grid runs from the rail to the divider and ends the block. It's built from Guides, Badge, Button and Kbd, with CSS for the entrance and your theme's tokens for every colour. For operations tools, command-line products and any feature set that is most honest when shown as the command that does it.

FAQ

How do I change the four cells?

Edit STEPS at the top of the file: each has a numeral, a title, a description, a command and a result. The command is in a kbd element drawn as a chip, and the result is plain text under it.

How does the header end up at the end?

It is first in the page's order, so a screen reader and the Tab key meet it before the grid. On lg the grid is placed in the first column and the header in the second with grid positions, and in a right-to-left layout both flip. Nothing is reordered with order.

Are the numbers read out?

The circled numbers are decoration, hidden from assistive technology: the cells are an ordered list, so the order is in the markup.

How does it fit on a phone?

The header comes first, then a rule, then the four cells one per row; from sm they go two across. Commands are set in a monospace chip that doesn't wrap and fits at 320 pixels.

Does it follow my theme?

Yes. Cells use background and border tokens and the chip uses the muted one, with no fixed colours and no dark scope. The block has no primary button.

All 170 features blocks