shadcn.io is not affiliated with official shadcn/ui
Revision History FAQ Block for React Aria
A FAQ for a policy-management app whose answers carry a revision history: a Revised badge, a revision number on every row, and a switch to show only what changed.
Installation
Overview
A FAQ with its revision history for React with React Aria. A start column holds the title, one sentence and a Revised only switch with a live count; beside it, behind a split divider, six questions in hairline rows. A question that changed lately wears a Revised badge, every row says which revision it's on, and each answer ends in a collapsible Revision history with a line per revision, newest first. The switch hides the questions that haven't changed. It shows revision numbers and never a date. It's built from Accordion, Collapsible, Switch, Badge and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For policy, legal and compliance pages where readers need to know whether an answer has changed.
FAQ
How do I record a revision?
Each question in QUESTIONS has revisions, newest first, ending with "first published". Add a line at the top when you change an answer; the revision number is the number of lines, so the row's "Rev 3" and the history's numbers always agree. Set revised to true while the change is recent and back to false when it's old news: it controls the Revised badge and the switch.
What does the Revised only switch do?
It hides the questions whose revised is false, so with the sample data four of six remain, and a count beside it says "4 of 6 questions" in a polite live region. The list keeps room for the full set on a desktop, so the block's height doesn't jump.
The switch takes isSelected and onChange.
Why are there no dates?
A date printed in a template is wrong the day after you ship it. Revision numbers stay true: they only change when you change the answer. If you want times, show them from your own data in the same line.
How does it work with a keyboard and a screen reader?
Each question is a button inside its own h3, with its badge and revision number inside the button's name. The Revision history button inside an answer says whether it's expanded and how many revisions it holds, and the revisions are an ordered list. The switch is named "Show revised questions only".