shadcn.io is not affiliated with official shadcn/ui
Docs Links FAQ Block for Radix UI
A FAQ for a mapping service where every answer ends in two guides from the docs, as links with a reading time and an arrow.
Installation
Overview
A FAQ that points into the docs, for React with Radix UI. Six questions sit in hairline rows that run from rail to rail, each opened by a small square that fills in. An open answer is two columns on a desktop: the answer at the start and, behind a hairline at the end, "Read more in the docs" with two guides as real links, each with its length in minutes and an arrow. On a phone the guides stack under the answer. It's built from Accordion and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For API and product docs where a short answer is a doorway to a longer guide.
FAQ
Where do the guide links go?
Every guide is a real link with href="#": point each at its article. Edit the guides of each question in QUESTIONS: a title and the minutes it takes to read. The "4 min read" is typed, so keep it honest when an article changes.
What happens in right-to-left languages?
The two columns swap sides, the hairline between them moves with them, and the arrow at the end of each guide flips to point the other way. The minutes are wrapped so a number and its unit stay in order.
How do I add a question?
Add an entry to QUESTIONS with an id, the question, its answer and its guides. Two guides fit well; more make the list taller than the answer. OPEN_QUESTION names the one that's open on load.
One answer is open at a time (type="single").
How does it work with a keyboard and a screen reader?
Each question is a button inside its own h3. The open answer has an h4, "Read more in the docs", over a list of links, and each link is read as its title and its length. Tab moves from a question into its guides and on to the next question.
The Up and Down arrows also move between questions, and Home and End jump to the first and last.