Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

FAQ blocks

Pro

Onboarding FAQ Block for Radix UI

A first-hour plan as an FAQ for a team workspace: five accordion steps down a numbered rail, each with its duration, under a header that adds the minutes up.

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

An onboarding FAQ for React with Radix UI. A start-aligned header carries a small badge that adds the steps' minutes up ("Ready in 25 min"), and five accordion steps follow under a rule with + marks. A hairline rail runs down the start side through a numbered circle for each step; the circle of the open step fills with your theme's foreground, every step carries its duration in a badge, and the answers are indented to sit under their question. The rows are hairlines that the rail crosses. One answer is open at a time. On a phone the rail stays and each duration drops under its question. The page's rails and top rule come from the Guides spine, so the block lines up with its neighbours in a stack. It's built from Accordion, Badge and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For onboarding pages and getting-started guides where the order of the steps matters as much as the answers.

FAQ

How do I change the steps and the total?

Edit STEPS at the top of the file: each entry is an id, the question, its answer and its minutes, a number. The badge in the header is TOTAL_MINUTES, added up from the same list, and each row's duration comes from its own entry, so the total can never disagree with the steps. OPEN_STEP names the step that's open on load.

How is the rail drawn?

Each step draws its own short hairline down its start side, with CSS: the first starts at its circle and the last stops at its own, so the rail never sticks out above or below. The circle sits on top of it with a solid background. Because the line belongs to the step, it grows with the step when an answer opens. The circle of the open step turns solid with the foreground colour, and the numbers are decoration: a screen reader hears "Step 2:" before each question instead.

Are the closed answers in the page's markup?

No. This Accordion renders an answer only when its step opens. If search engines must read every answer, render them as a list that always shows them.

How does it work with a keyboard and a screen reader?

Each step's title is a button inside its own h3 under the section's h2, so a screen reader's headings list shows all five, and the button says whether it's expanded. Enter or Space opens and closes one, and the duration is read as part of the button's name. The Up and Down arrows also move between steps, and Home and End jump to the first and last.

Can more than one step stay open?

Set type="multiple" with an array defaultValue.

The rail and the fill on each open circle work the same either way.

How does it fit on a phone?

The rail and the circles stay at the start side, the question wraps beside them, and the duration badge moves under the question so the title keeps its width. The answers keep their indent so they stay under the title, and nothing scrolls sideways at 320 pixels.

All 100 faq blocks