shadcn.io is not affiliated with official shadcn/ui
API Error Codes FAQ Block for Ark UI
An error-code FAQ for a geocoding API: seven status codes as accordion rows with a mono chip, a cause, a fix, the header to look for and a retry verdict, beside a retry-rules note.
Installation
Overview
An error-code FAQ for React with Ark UI. A start column holds the title, one sentence and a "Retry rules" card; an end column behind a split divider holds seven status codes as hairline rows under a rule with + marks. Every row leads with a mono status chip and a question such as "What does 429 mean?"; its answer lists the cause, the fix and the response header to look for, and closes with a badge that says whether sending the request again can succeed. The card's two lists, the codes to retry with backoff and the codes to fix first, are filtered from the same CODES array as the rows, so they can't drift. On a phone the header stacks above the rows and the card follows them. It's built from Accordion, Badge and Guides, with your theme's tokens for every colour. For API docs, status pages and developer portals.
FAQ
How do I change the codes?
Edit CODES at the top of the file: each entry has the code, the question, the cause, the fix, the header as it appears on the wire and retry, whether sending the same request again can succeed. The "Retry rules" card reads retry, so a new code lands in the right list on its own. OPEN_CODE names the row that's open on load.
Why is the status chip hidden from screen readers?
The question already says the code ("What does 429 mean?"), so a second "429" before it would be read twice. The chip is decoration for sighted readers: it lets you scan the column for a number. In the card the chips are a real list, because there they are the content.
How is the retry verdict shown?
As a badge at the foot of the answer, in words and an icon, never by colour alone: "Safe to retry" is an outline badge with a circular arrow and "Don't retry" a secondary badge with a barred circle. Both use the theme's foreground tones, so the block stays calm in any preset.
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.
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. Tab moves from question to question, Enter or Space opens one, and the button says whether it's expanded. Each answer is a description list of cause, fix and header, so a screen reader announces the terms with their values.
The Up and Down arrows also move between questions, and Home and End jump to the first and last.
How does it fit on a phone?
Below the lg breakpoint the title and sentence stack above the rows, the rows run from rail to rail, and the retry-rules card follows the last one. The chip stays at the start of its question, a long question wraps beside it, and a long header line scrolls sideways inside its own box instead of the page.