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

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 Base UI. 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.

  • Pro

    Anchored Headline Grid Features

    Headline-led

    A feature section for a developer portal with a display headline pinned to the start side and a two-by-two grid of features in shared hairlines, each cell leading with a small greyscale drawing.

  • Pro

    Sticky Headline Six Point Features

    Headline-led

    Six engineering principles as automated checks: a sticky header with a live tally of passing checks beside a two-by-three of cells, each with its check line.

  • Pro

    Sticky Headline Scroll List Features

    Headline-led

    A feature list for a developer platform: a narrow headline column that stays in view beside eight numbered rows, each ending in a compact mockup of the feature.

  • Pro

    Numbered Question Features

    Alternating rows

    A feature list phrased as four questions for a deploy-safety tool, each row a band with its number, an answer, a feature link and a small drawing of the answer.

  • Pro

    Keyboard Shortcut Card Features

    Live controls

    A shortcut cheat sheet for a shortcut trainer: two groups of four shortcuts in one framed card, where pressing a shortcut while the card is focused lights its row.

  • Pro

    Manifesto Quad Grid Features

    Headline-led

    A centred manifesto feature section for a deploy tool: a statement over a full-width two-by-two of numbered principles, each written as what you give up against what you get, crossing at one plus mark.

All 170 features blocks