Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Revision History FAQ Block for Solid

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A FAQ with its revision history for Solid with Ark UI. 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 checked and onCheckedChange.

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". The Up and Down arrows also move between questions, and Home and End jump to the first and last.

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. Search engines and server rendering see all of them, and closing an answer doesn't remove it.

How does it fit on a phone?

The title, the sentence and the switch stack above the rows, which run from rail to rail. The badge and the revision number sit under each question, and nothing scrolls sideways at 320 pixels.