Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

FAQ blocks

Pro

Video Walkthrough FAQ Block for React Aria

A deploy-platform FAQ in one framed card: three answers carry a walkthrough with a UI-drawn poster, a duration badge, a link to the real video and a list of timecoded chapter links.

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.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

An FAQ for React with React Aria whose answers can be walkthroughs. A start-aligned header sits over six questions in a single framed card with + marks on its corners; the three questions that have a video carry its duration in a badge. Open one and you get a poster drawn from UI (a pipeline, environment variables, a rollback) with the duration in its corner, an outline button that opens the real video in a new tab, and a list of chapters whose timecodes link to the moments in it. There is no fake player: the poster is a picture and every control goes somewhere. The other answers are plain text. It's built from Accordion, Badge, Button and Guides. For developer tools and any product with a short video behind some of its answers.

FAQ

Where does the video itself play?

Not in the block. The poster is a drawing, and the button and chapter links open your video in a new tab, so it plays wherever you host it, with that host's own controls and captions. That avoids a play button that does nothing, and a player that loads before anyone asks for it. Point each href at the video, and the chapters at its timecodes.

How do I add a walkthrough to a question?

Give the question a video in QUESTIONS: its duration (shown in the trigger's badge, on the poster and in the button's label), a scene that picks the poster drawing, and its chapters, each a time and a title. Questions without a video are plain text. To draw a new poster, add a scene component beside the three and one line to the Poster.

What do screen readers and keyboards get?

The poster is decoration, hidden and inert, so it's skipped. The badge in the trigger reads "3:45 video", the button says it opens a new tab, and the chapters are a numbered list of links with visible focus. Tab reaches every link in the open answer.

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 fit on a phone?

The frame keeps its inset from the rails, the questions wrap with their duration badge beneath, and in an open walkthrough the chapters stack under the poster, which scales to the card's width. Nothing scrolls sideways at 320 pixels.

All 100 faq blocks