shadcn.io is not affiliated with official shadcn/ui
Server Error Incident Card Block for React Aria
A server-error panel for a studio-booking app: a card of what the page knows (error type, time, a copyable request id, retries) and what you can do, with a Retry that adds a typed retry and keeps failing.
Installation
Overview
Show the facts of a failure in one tidy card, with this server error panel for React with React Aria. It's the error card of Glazebook, a booking app for ceramic studios: a compact heading and one sentence over a card in card, a muted Frame holding a raised panel, ruled by Guides with a plus mark on each corner. The first band is a Data List of what the page knows: the error type with a single Status dot, when it happened in UTC, a request id with a Copy Button and a retries line. The second band says what you can do, retry or check the status page, and the foot holds a polite status line and the one Shine Button, "Retry the request". Each press adds a retry to the list with a typed clock time and the page still failing; the card never changes size. The slug says dark, but the block follows your theme in light and dark. It's built from Frame, Data List, Status, Copy Button, Shine Button and Guides, with a CSS entrance only. For a booking, ordering or any in-app server error.
FAQ
What does Retry the request do, and what stays in the page?
Nothing leaves the page. Each press shows a spinner on the button for under a second, then the Retries row reads "1 retry, the last at 14:03 UTC: still failing", and the status line says the same politely; the clock times follow a fixed back-off from a typed start (14:03, 14:05, 14:08, then 14:12 and on), so the card reads the same on the server and in every browser, and nothing here reads the current time. To wire it for real, re-run the failed request where the code says so, keep the busy state until it answers, and replace the card with the loaded bookings when it succeeds.
Why does a dark 500 follow the theme?
Because a page that forces a dark scope ignores the visitor's choice and looks like a different product when the rest of the app is light. The slug keeps its name so existing links work, but the card uses theme tokens only, so it is dark in a dark theme and light in a light one.
What is the request id for?
It lets a visitor quote one exact failure to support, and lets you find it in your logs. REQUEST_ID is a typed constant here; generate one per request in your app, return it in a response header and print it where you log the error. The Copy Button writes the real text to the clipboard and announces "Copied".
Is it usable with a keyboard and a screen reader?
The card is a real list of terms and values, so a screen reader reads "Error, 500 Internal server error" and so on. The error's meaning is in the words, never only the red dot, which is decoration. Tab runs Copy, the status link and Retry the request, each with a visible focus ring; after a retry, focus moves to the status line so the result is read out.