shadcn.io is not affiliated with official shadcn/ui
Command Palette FAQ Block for Vue
A FAQ for a docs host with a working command palette: a search-field button with its shortcut opens a palette of questions by topic, and choosing one opens its row below.
Installation
Overview
A FAQ with a working command palette for Vue with Ark UI. A start-aligned header sits over a band holding a button that looks like a search field, with its shortcut at the end, and nine questions in hairline rows, each with its topic beside it. The button opens a palette in a dialog that lists the questions grouped by topic; filter by typing, pick one, and the palette closes, that row opens below and focus moves to it. The shortcut, Command K on a Mac and Control K elsewhere, opens it too, but only while the block is on the page. 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, Command, Kbd, Button and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For developer docs and product pages whose readers live on the keyboard.
FAQ
How do I change the questions and topics?
Edit QUESTIONS at the top of the file: each entry is an id, its topic, the question and its answer. The palette's groups are the topics in the order they first appear, and the count in the button and the header comes from the array. Nine questions suit a short page; the palette comfortably holds fifty.
How does the shortcut work?
While the block is mounted, a keydown listener opens the palette on Command K or Control K and stops the browser's own handling. It reads "Ctrl K" in the markup and switches to "⌘ K" once the page knows it's running on a Mac, so server rendering and hydration agree. On a phone the shortcut hint is hidden, because there is no keyboard to press it on; the button still opens the palette.
Where does focus go when I choose a question?
To the question's button in the list, with its answer open, so a keyboard user lands where they chose. If you close the palette with Escape instead, focus returns to whatever opened it: the button, or the element that had focus when you pressed the shortcut. The dialog's final focus element points at the chosen row.
How does the palette filter?
By the question's text, anywhere in it, ignoring case and accents.
Groups with no match disappear, and when nothing matches the palette says "No questions match".
Are the closed answers in the page's markup?
Yes. The Accordion takes lazyMount={false} and unmountOnExit={false}, so every answer renders from the start, hidden until its question opens.
How does it work with a keyboard and a screen reader?
The button is named "Search 9 questions" and announces its shortcut, the palette is a dialog with a labelled field and a list you move through with the Up and Down arrows, Enter opens the highlighted question and Escape closes. In the list, each question is a button inside its own h3 under the section's h2; Tab moves between them and Enter or Space opens one.
The Up and Down arrows also move between questions in the list, and Home and End jump to the first and last.