Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

FAQ blocks

Pro

Status FAQ Block for React Aria

An FAQ for a hosting platform where each question belongs to a service and shows that service's state, with a summary counted from the rows.

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

A status FAQ for React with React Aria. A compact header ends with a summary counted from the data ("1 of 6 services degraded", with the number in maintenance), and six rows run rail to rail below a rule with + marks. Each row carries the service's name, the question and a status badge: a dot and a word, Operational, Degraded or Maintenance. The dot uses a status colour only for the exceptions; a service running normally gets a plain foreground dot. Each answer says what to do. It's built from Accordion, Badge, Status and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For hosting, API and infrastructure pages whose support questions depend on whether something is down.

FAQ

How do I change a service's state?

Edit its entry in SERVICES: label is the word shown and tone picks the dot (default for a service that's running normally, warning for degraded, info for maintenance). The summary in the header is counted from those entries, so it follows. The state is static: the block draws a state you set, and doesn't fetch one. To show live states, replace SERVICES with data from your status page.

Does colour carry the state on its own?

No. Every badge pairs the dot with a word, and the dot is hidden from assistive technology. Only the exceptions are coloured: the normal state is a foreground dot, so a page with one problem shows one coloured dot.

Are the closed answers in the page's markup?

Yes. React Aria keeps every closed panel in the markup as hidden="until-found": search engines see all six, and the browser's find in page opens the answer that holds a match.

How does it work with a keyboard and a screen reader?

Each question is a button inside its own h3 under the section's h2, so a screen reader's headings list shows them all. Tab moves from question to question, Enter or Space opens and closes one, and the button says whether it's expanded. The open answer is labelled by its question.

How do I change the questions?

Each service in SERVICES has its question and answer: keep the answer to what the visitor should do, in one to three sentences. OPEN_QUESTION names the row that's open on load. One answer is open at a time. Add allowsMultipleExpanded to the Accordion to let several stay open.

How does it fit on a phone?

The badge moves under the question, so a long question keeps its full width. The summary drops under the header's sentence, and the rows run from rail to rail. Nothing scrolls sideways at 320 pixels.

All 100 faq blocks