shadcn.io is not affiliated with official shadcn/ui
Schema Inspector FAQ Block for React Aria
A headless-CMS FAQ with a live schema inspector: six questions beside a sticky JSON tree of the FAQPage data that expands and highlights the open question, a button to copy the JSON and one JSON-LD script.
Installation
Overview
An FAQ for React with React Aria that shows its own structured data. A start-aligned header sits in a band over two columns: six questions as hairline rows at the start, and at the end, behind a split divider, a tinted panel with a sticky inspector. The inspector is a JSON tree of the FAQPage data with a button that copies it; opening a question expands its node in the tree and highlights it, and you can open and close the other nodes yourself. The tree, the copied text and the single application/ld+json script the block emits are all built from the same FAQS array, so they can't drift. On a phone the inspector sits under the questions behind a "View the schema" button. It's built from Accordion, JSON Tree View, Copy Button, Button and Guides. For docs, CMS and SEO pages where you want to show editors exactly what search engines read.
FAQ
Where does the structured data come from?
FAQS at the top of the file. A SCHEMA object is built from it once: a FAQPage with a Question for each entry and its acceptedAnswer. The tree draws that object, the Copy JSON button copies it pretty-printed, and the block's script tag carries it compact, with every < escaped as < so an answer can never close the tag. Answers should be plain text.
How does the tree follow the open question?
The tree names each node with a hash of its path, such as $.mainEntity.2, and the block computes the same hash with pathId to know which node is a question's. The open question's node is expanded and tinted with a ring; closing the question clears it. That hash is the tree's own detail: if a later version changes it, the tree keeps working and only the automatic expanding and highlighting stop.
Is the JSON coloured like an editor?
No. The tree's string, number and boolean tones are set to the theme's foreground, so it reads the same in every preset, light or dark; the keys are medium weight and the structure comes from indentation and the expand arrows. The tree keeps room for its tallest state, so opening a question never moves the page.
Are the closed answers in the page's markup?
Yes. React Aria keeps every closed panel in the markup as hidden="until-found".
How does it work with a keyboard and a screen reader?
Each question is a button inside its own h3 under the section's h2; the inspector's heading is an h3 too. The tree is a keyboard tree: Tab enters it and the arrow keys move between nodes, expanding and collapsing them, and each node has a label that says what it holds. The copy button announces "Copied" politely.
How does it fit on a phone?
Below the lg breakpoint the tinted panel goes under the questions, under a rule, with a ghost "View the schema" button that opens and closes the inspector (it's aria-expanded, and the inspector stays in the page either way). From lg the button is gone and the inspector stays in view as you scroll the list.