shadcn.io is not affiliated with official shadcn/ui
Code Snippet FAQ Block for Radix UI
An SDK FAQ for a webhook service: five questions whose answers are code windows with curl, Node and Python tabs and a copy button, in a band of hairline rows.
Installation
Overview
An FAQ for React with Radix UI whose answers hold code. A start-aligned header sits over a band of five questions that run from rail to rail under a rule with + marks; each answer is a sentence and a code window with curl, Node and Python tabs and a copy button. The language you pick follows you through every answer, and every window keeps the height of its tallest snippet, so switching never moves the page. The code follows your theme: keywords are bold, calls medium, comments muted, and nothing is coloured. It's built from Accordion, Tabs, Syntax Text, Copy Button and Guides, with CSS for the entrance. For SDK pages, API docs and developer onboarding where each answer is half prose and half code.
FAQ
How do I change the snippets?
Edit QUESTIONS at the top of the file: each entry has an id, the question, an answer sentence and a code object with one string per language. LANGUAGES lists the tabs and the words each language's highlighter sets in bold; add a language there and give every question a snippet for it. The window's minimum height is worked out from the longest snippet of each question.
How does the language choice work?
All the code windows share one useState, so choosing Node in one answer shows Node in every other, open or not. Each window is its own set of tabs with a named tab list, and the arrow keys move between languages.
Is the code highlighted?
Yes, by weight and tone instead of colour. Syntax Text finds the keywords, calls, strings, numbers and comments, and the block sets keywords in semibold, calls in medium and comments in muted italic, all in the theme's foreground colours, so the code reads the same in every preset, light or dark. The per-token fade-in is turned off: a code answer should be there when it opens.
What does the copy button copy?
The snippet for the language that's showing, as plain text: no line numbers and no prompt. After it copies, the icon becomes a check and a polite status says "Copied" to screen readers.
Are the closed answers in the page's markup?
No. This Accordion renders an answer only when its question opens.
How does it work with a keyboard?
Tab moves between the questions, then into an open answer's language tabs, the copy button and the code, which scrolls sideways with the arrow keys when a line is wider than the window. Enter or Space opens a question. The Up and Down arrows also move between questions, and Home and End jump to the first and last.