shadcn.io is not affiliated with official shadcn/ui
Keyboard Navigation FAQ Block for Radix UI
A keyboard-first FAQ for a text editor: eight questions that move with the arrow keys, Home and End, beside a framed legend of the keys that lights the one you press.
Installation
Overview
A keyboard-first FAQ for React with Radix UI. A header and eight numbered questions in hairline rows take the wide column; a framed legend of the keys sits in a narrow column at the end behind a split divider. The Up and Down arrows move between the questions, wrapping at both ends, Home and End jump to the first and last, and Enter or Space opens one; the block adds those keys itself wherever the accordion doesn't. The focused row is tinted with a strong ring, the legend lights the row of the key you're pressing and says which question has focus. On a tablet the legend sits under the list, and on a phone, with no keyboard, it's hidden. It's built from Accordion, Kbd and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For developer tools, admin panels and any product whose users keep their hands on the keys.
FAQ
How do I change the questions and the legend?
Edit QUESTIONS at the top of the file: each entry is an id, the question and its answer. The numbers in front are drawn from the position, so reordering renumbers them. The legend reads SHORTCUTS: each is a label, the caps drawn on the keys and the keys (as KeyboardEvent.key values) that light it.
How does the keyboard navigation work?
A handler on the list's wrapper hears the keys that bubble up from the question buttons. For the Up and Down arrows, Home and End it moves focus to the right button, wrapping at the ends, unless the accordion already did: it checks whether the key was prevented, so a key is never handled twice. Enter and Space are the buttons' own. The accordion also handles the arrows, Home and End itself, so the block's handler stands aside and the behaviour is the same.
What does the legend do?
It lists the keys and lights the row of the one you press, for as long as it's held, and says "Question 3 of 8" for the row that has focus. It's decorative: the keys work the same without it, and a screen reader doesn't read the live line, because it already hears the focus move. It is hidden below md, where there's usually no keyboard.
Are the closed answers in the page's markup?
No. This Accordion renders an answer only when its question opens. For search engines, add structured data built from the same QUESTIONS array.