Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

FAQ blocks

Pro

Two Column FAQ Block for Ark UI

A reading-layout FAQ for a bakery-supplies wholesaler: the title, a sentence and a contact link stay in view at the start while ten questions scroll past in an accordion at the end.

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 two-column FAQ for React with Ark UI. A start column holds the title, one sentence and a contact link and stays in view while the end column, behind a split divider, scrolls through ten questions in an accordion, one answer open at a time. The rows are hairlines with a chevron, with no band or marks of their own, so the list reads as plain text. On a phone the header stacks above the list and stops sticking. It is built from Accordion, Button and Guides, with CSS for the entrance and your theme's tokens for every colour. For wholesale, onboarding and policy pages with a long list of questions.

FAQ

How do I change the questions?

Edit QUESTIONS at the top of the file: each entry is an id, the question and its answer, one to three sentences. OPEN_QUESTION names the one that is open on load; set it to an id that doesn't exist to start with all of them closed. Ten is a comfortable length for the sticky header to earn its place; for fewer than six, the model FAQ with a side header does the same job.

How does the header stay in view?

Its inner box is lg:sticky lg:top-16, inside a grid cell as tall as the list, so it sticks while the list scrolls and stops at the list's end. Change top-16 to clear your site's header. Sticky stops working if any ancestor adds overflow: hidden, auto or scroll, so keep the block out of a scrolling wrapper (the section's overflow-x-clip is fine). Below lg it is plain and scrolls away.

Are the closed answers in the page's markup?

Yes. The Accordion takes lazyMount={false} and unmountOnExit={false}, so every answer renders from the start, hidden until its question opens.

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

Each question is a button inside its own h3 under the section's h2. Enter or Space opens and closes it, and the button says whether it's expanded. Up and Down move between the questions of a list, Home and End jump to its first and last.

All 100 faq blocks