Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

FAQ blocks

Pro

Mega Help Index FAQ Block for Radix UI

A help-index FAQ for a DIY store: sixteen questions in four topic columns on shared hairlines, with the chosen answer in a framed reading panel above them.

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 mega help-index FAQ for React with Radix UI. Under a compact header, a framed reading panel shows one answer, and below it four topic columns on shared hairlines list sixteen questions as buttons; the button for the open question is marked with an arrow that points up at the panel. The panel keeps the height of the longest answer, so choosing a question never moves the page. The columns go four across, two across, then one. It is built from Badge and Guides, with CSS for the entrance and your theme's tokens for every colour. For stores and help centres with many short answers where readers scan by topic.

FAQ

How do I change the topics and questions?

Edit TOPICS at the top of the file: each topic has an id, a title and four questions, each with an id, the question and its answer. The panel's stack of answers is built from the same data (ALL). Four columns of four fits the grid; fewer questions leave a column short, more make the columns uneven.

How does the answer panel work?

Every answer is stacked in one grid cell and only the chosen one is visible, so the panel is as tall as the longest answer and nothing shifts. The buttons carry aria-expanded (true for the open question) and aria-controls pointing at the panel, and a polite status line says which question is showing. Focus stays on the button you pressed.

What happens when I choose a question far below the panel?

The panel scrolls into view, but only if it is out of sight: the block calls scrollIntoView({ block: "nearest" }) on it, so on a desktop where both are visible nothing moves, and on a phone the answer comes to the top. It never moves focus.

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

The topic names are h3 headings and the questions are buttons in real lists, so Tab visits them in reading order and Enter or Space chooses one. There are no arrow-key shortcuts between columns.

How does it fit on a phone?

The panel stays first, then the topics stack one column per row below sm and two across from sm, four across from lg. Questions wrap to a second line when they must, and nothing scrolls sideways at 320 pixels.

All 100 faq blocks