shadcn.io is not affiliated with official shadcn/ui
Post-Linked Accordion FAQ Blog Block for Radix UI
Reader questions answered by posts: a single-open accordion of six how-things-work questions, each answer ending in a linked post chip with the post's title and reading time.
Installation
Overview
A reader-questions block for React with Radix UI, written for Howwick, a weekly about how ordinary things work. In a split behind a divider, the end holds six questions as a single-open accordion that runs from rail to rail, the first open on load, one open at a time. Each answer is two plain sentences and ends in a post chip: a link with the post's title and its reading time, for the reader who wants the whole story. The start holds the header and, pinned to the foot, an invitation to send a question with an outline link. It is built from Accordion, Button and Guides. For a blog whose FAQ should lead into its own posts rather than stand alone.
FAQ
How do I change the questions and the posts?
Edit QUESTIONS: an id, the question, a short answer and post (href, minutes, title). Keep answers to a couple of sentences; the chip is where the long version lives. The block carries no dates, so nothing goes stale.
Can more than one answer be open?
No. Opening a question closes the open one, and the first question is open on load. To allow several, switch the accordion to its multiple mode on your base.
How does it work with a keyboard?
Every question is a button inside a heading, so Tab moves through the questions and the open answer's chip, and Enter or Space opens a question. The Up and Down arrow keys also move between the questions, and Home and End jump to the first and last.
Are closed answers in the page for search and screen readers?
No. Closed panels are removed from the page until opened.