shadcn.io is not affiliated with official shadcn/ui
Minimal FAQ Block for React Aria
A type-forward FAQ for a stationery brand: six questions in large type with their answers on show in a definition list, no cards or row lines, and one contact link.
Installation
Overview
A minimal FAQ for React with React Aria. Under the page's top rule, a title and one sentence sit on a narrow centred column, followed by a rule with + marks and six questions in a definition list: each question in large medium-weight type and its answer in muted text beneath it, all on show, divided by white space alone. There are no cards, icons or row lines: the only lines are the page's rails and the rule under the header. A ghost link closes the column. 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 Guides and Button, with CSS transitions for the entrance and your theme's tokens for every colour. For brand pages and small shops where the words should do all the work.
FAQ
How do I change the questions?
Edit ENTRIES at the top of the file: each entry is an id, the question and its answer, one to three sentences. Six to eight suit the layout. With no lines between them, more than about eight start to read as a wall of text, and an accordion serves a longer list better.
Why a definition list, and not headings?
Every answer is on show, which is what a definition list is for: each question is a term and its answer is the description, so a screen reader pairs them. HTML doesn't allow headings inside a term, so the questions don't appear in a headings list; the section's h2 still does.
Where does the link go?
It is a ghost button with an arrow (href="#"): point Write to the studio at your contact page or a mailto: address. The block has no other button.
The button renders a link when it has an href.
Does it follow my theme?
Yes. It uses only your foreground, muted foreground and border colours, so it is light on a light page and dark on a dark one, in every preset.