shadcn.io is not affiliated with official shadcn/ui
Anchor Link FAQ Block for Radix UI
A FAQ for a documentation host with a # link on every question that copies its address, and deep links that open and ring the matching answer on load.
Installation
Overview
An anchor-link FAQ for React with Radix UI. Seven questions sit in a band of hairline rows that run from rail to rail, and each row has a # link at its start. Pressing it copies that answer's address and confirms in a status line beside the title; opening an address that ends in a question's anchor opens that row on load, brings it to the top of the screen and rings it until the next click. The # is always on show, so it works with a finger as well as a pointer. 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 Accordion and Guides, with CSS transitions for the entrance and the ring, and your theme's tokens for every colour. For documentation, help centres and knowledge bases where support sends people to one answer.
FAQ
How does the deep link work?
Each row has an id of the form q-<question id>, and the # link points at it. On load, and whenever the address's anchor changes, the block reads it: if it names a question, that row opens, scrolls to the top of the screen once the row above has closed, and gets a ring that goes at your next click. Because every row's id is in the markup, the browser also jumps to it before the script runs.
What does the # copy, and what if the clipboard refuses?
It copies the link's full address: the page's own URL plus the row's anchor. The status line beside the title shows the address without its https://, and the # turns into a check for three seconds. The link also navigates, so the address bar holds it too; if the browser refuses clipboard access (a page that isn't served over HTTPS), the status line says so instead of claiming success.
How do I add or rename a question?
Edit QUESTIONS at the top of the file: each entry is an id, the question and its answer. The id becomes the anchor, so keep it stable once links are out in the world; changing the question's wording is safe. OPEN_QUESTION names the row that's open when the address has no anchor. One answer is open at a time.
Are the closed answers in the page's markup?
No. This Accordion renders an answer only when its question opens, so a deep link to a closed row works but search engines don't read the closed answers. If they must, render the answers as a list that always shows them.
How does it work with a keyboard and a screen reader?
Each question is a button inside its own h3, and each # is a real link named "Link to" and the question, placed right after its row. Tab goes from a question to its link and on to the next question; Enter on a link copies the address and follows it. The status line is a polite live region, so the copy is announced.
The Up and Down arrows also move between questions, and Home and End jump to the first and last.
Does it work on a phone?
Yes. The # is never hidden behind a hover: it sits in a 32 pixel square at the start of every row, and the question's text starts after it. The status line moves under the title, the rows run from rail to rail, and nothing scrolls sideways at 320 pixels.
What moves, and what happens with reduced motion?
The header and the rows fade up once when the page loads, the ring fades in, and an answer eases open. With reduced motion the entrance and the ring's fade are off, and the answers open and close at once. Scrolling to a deep link is a jump, never a smooth scroll.