Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

FAQ blocks

Pro

Diagram FAQ Block for React Aria

A centred identity-service FAQ whose first answer carries a sequence diagram with three lifelines and four numbered arrows, driven by a list of steps you can hover, focus or press.

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 first answer is a diagram. A centred header sits over a narrow band of six questions under a rule with + marks, each opened by a circled plus that turns into a cross. The first answer holds a sequence diagram in a framed figure with corner marks: three lifelines, your API, your app and the identity service, and four numbered arrows that show a token refresh. Beside it the four steps are buttons: hovering, focusing or pressing one darkens its arrow and fades the others, and pressing it again lets go. The diagram is drawn in CSS with logical sides, so in right-to-left text the lifelines and arrows mirror. It's built from Accordion and Guides, with your theme's tokens for every colour. For auth, payments and any product where one flow explains most of the questions.

FAQ

How do the steps and the diagram work together?

The diagram is decoration, hidden from assistive technology; the four steps carry the same words and are the real controls. Hovering or focusing a step lights its arrow and fades the rest; pressing a step pins it (aria-pressed) so it stays lit when the pointer leaves, and pressing it again unpins it. Nothing is pinned to start, so every arrow shows at full strength.

How do I draw a different flow?

Edit STEPS and LIFELINES at the top of the file. A step has an id, the short label on its arrow, a title and text for the list, gap (0 for an arrow between the first two lifelines, 1 between the last two) and toward, which is start or end along the reading direction. Three lifelines and four arrows fit a 320-pixel phone; a longer flow needs a taller figure, not a wider one.

Does the diagram work in right-to-left languages?

Yes. The lifelines are columns of a grid and the arrows use start and end, so the order of the three participants and the direction of every arrowhead mirror with the page. The labels on the arrows are code-like strings and stay as written.

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?

Each question is a button inside its own h3 under the section's h2. Tab moves from question to question and, in an open answer, through the steps; Enter or Space opens a question or pins a step.

How does it fit on a phone?

The header stays centred, the rows run the width of the column, and in the open answer the steps stack under the diagram, which shrinks to the width of the screen. Arrow labels are short on purpose and truncate rather than overflow at 320 pixels.

All 100 faq blocks