Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Numbered Question Features Block for Ark UI

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.

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 question list for React with Ark UI. Four pains are written as the question you ask on the day (how do I roll back a bad deploy in a minute?) and each is a band with its number, the question as a heading, a two-sentence answer and a link to the feature that answers it. At the end of the band is a small greyscale drawing of the answer: a release list with a Restore row, a canary slider, a trace waterfall and access chips that expire. The bands run from rail to rail, each ruled by Guides with + marks on the rails, and end the block. It's a feature list, not an FAQ: every answer is a product, and every answer is in view. It's built from Guides with CSS for the entrance and your theme's tokens for every colour. For developer tools, security products and any feature set that is easiest to explain by the question that leads to it.

FAQ

How do I change the questions?

Edit QUESTIONS at the top of the file: each has a question, an answer, a feature (the link's text) and an id. The four drawings are separate components, placed in the four rows at the bottom of the file, so swap a drawing by replacing the component inside its Row.

Are the numbers real list numbers?

The rows are an ordered list, so the order is in the markup. The "01" to "04" you see are decoration, hidden from assistive technology so they aren't read twice, and they come from the row's position, so adding or removing a row renumbers them.

Do the drawings carry meaning?

No. Each is a hidden, inert picture of the answer, and the answer is in the sentence beside it: the canary slider, for instance, is described as "send a release to 1% of traffic and widen it". The drawings are never focusable.

How does it fit on a phone?

Each row stacks: the number, then the question and answer, then the drawing at a fixed h-28. From md the row is three columns, with the drawing at the end. Nothing scrolls sideways at 320 pixels.

Does it follow my theme?

Yes. The drawings use card, muted and foreground tokens, and the only filled elements are one chip and one fill in foreground, never the primary colour. There's no dark scope, so the block is light on a light page and dark on a dark one.

All 170 features blocks