shadcn.io is not affiliated with official shadcn/ui
Timeline FAQ Block for Ark UI
A version-history FAQ for a developer toolkit: six accordion rows down a hairline rail with a dot and a version for each release, the newest one ringed and badged.
Installation
Overview
A timeline FAQ for React with Ark UI. A start-aligned header sits over six accordion rows that run from rail to rail under a rule with + marks, one for each release of the toolkit, newest first, each answering "What changed in v4.2?" with a one-line summary under the question. A hairline rail runs down the start side with a dot per release and the version beside it; the newest release's dot is ringed and wears a Latest badge, and the dot of the open release turns solid. Versions only, with no dates to go stale. One answer is open at a time. On a phone the version column drops out and the rail stays, since the version is in the question. 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, Badge and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For SDKs, libraries and APIs whose users ask what an upgrade will cost them.
FAQ
How do I add a release?
Add an entry at the top of RELEASES at the start of the file: an id, the version as it's written ("v4.3"), a one-line summary and the answer, one to three sentences. Give latest: true to the newest entry only, and take it off the one before. OPEN_RELEASE is the first entry's id, so the newest release is the one that's open on load. Keep about six: older releases belong on a changelog page.
How is the rail drawn?
Each row draws its own hairline segment down the start side, with CSS: the first starts at its dot and the last stops at its own, and the segment grows with the row when an answer opens, so the rail is always one line. The version column and the rail sit at fixed offsets from the row's padding, and the answer is indented to line up under the question. Dots and versions are decoration: the version is read as part of each question.
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 row opens.
How does it work with a keyboard and a screen reader?
Each release is a button inside its own h3 under the section's h2, so a screen reader's headings list shows every release, and the button says whether it's expanded. Its name is the question, the Latest badge where there is one, and the summary. Enter or Space opens and closes a row.
The Up and Down arrows also move between releases, and Home and End jump to the first and last.