# Beste UI
> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.
Markdown rendition of https://ui.beste.co/block/error35. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.
Last updated: 2026-08-03
Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json
---
1. /
2. [Blocks](/blocks)
3. /
4. [Error](/blocks/error)
5. /
6. Server Error With Live Status
# Server Error With Live StatusFREE
A calm server-error page with a monospace code, an oversized light heading, recovery actions, an image tile floating a live uptime strip, and a hairline table carrying the incident reference.
ViewCodeDocs
Base UI
`npx shadcn add https://ui.beste.co/r-base/error35`
## Error35: Server Error With Live Status
A calm server-error page with a monospace code, an oversized light heading, recovery actions, an image tile floating a live uptime strip and a hairline table carrying the incident reference.
Free block
This block is free. No license or account is required: install it with the CLI and use it in unlimited projects.
### Installation
**Radix flavor**
bashCopy
```
npx shadcn add "https://ui.beste.co/r/error35"
```
**Base UI flavor**
bashCopy
```
npx shadcn add "https://ui.beste.co/r-base/error35"
```
This installs the block to `components/beste/block/error35.tsx`, the `indicator14` uptime piece it floats on the tile (installed to `components/beste/piece/indicator14.tsx`), and the `button21` component it uses for the actions.
### Quick start
The installed file exports `error35Demo` alongside the block: the exact props behind the preview above. Spread it to get a working error page in one line.
tsxCopy
```
import { Error35, error35Demo } from "@/components/beste/block/error35";
export default function ErrorPage() {
return ;
}
```
Then replace the demo with your own props. Written out, a trimmed setup looks like this:
tsxCopy
```
import { Error35 } from "@/components/beste/block/error35";
import { Indicator14 } from "@/components/beste/piece/indicator14";
export default function ErrorPage() {
return (
}
image={{ src: "/backdrops/blue.jpg", alt: "Soft blue gradient backdrop" }}
footnote="Quote the reference above if you write to us."
/>
);
}
```
### Props
| Prop | Type | Default | Description |
| ----------- | ---------------------------- | ------- | --------------------------------------------------- |
| code | string | – | Small status line above the heading |
| heading | string | – | Error heading, rendered as the page h1 |
| description | string | – | Centered supporting paragraph, capped at max-w-xl |
| buttons | ActionLink\[\] | \[\] | Recovery actions, first solid and the rest outlined |
| references | Reference\[\] | \[\] | Incident details in a hairline table |
| media | ReactNode | – | Live asset on the tile, indicator14 in the demo |
| image | { src: string; alt: string } | – | Backdrop behind the media tile |
| footnote | string | – | Small line under the reference table |
| className | string | – | Extra classes for the outer section |
tsCopy
```
type ActionLink = {
label: string;
href: string;
};
type Reference = {
label: string;
value: string;
};
```
### Behavior notes
* Reference values keep `font-mono`, which is deliberate: an incident id is a token to be copied character by character, and a fixed-width face makes it readable over the phone.
* The reference table is a real `dl`, and it renders whatever strings you pass. Wiring it to a real error boundary means passing the caught request id through as `references`.
* Both actions are links rather than buttons, including "Try again", so the block stays free of client-side retry logic. Point it at the current path if you want a reload.
* Button tones are positional and not overridable: the first is `primary`, later ones are `outline`.
* The tile and the table share the same `max-w-3xl` cap while the copy above sits at `max-w-2xl`, which keeps the page centered without three different widths competing.
* The uptime strip is presentational here. It shows service history rather than the state of the current request, which is why it sits below the recovery actions rather than above them.
* Rows carry `border-t` with `last:border-b`, closing the table at the bottom.
## More Error blocks
[View all Error](/blocks/error)
[](/block/error15)
PRO
error15
### 500 Incident Report
Server error page with a square eyebrow and status code over a hairline rule, a bold accent headline, a bordered incident table of reference, timestamp and service rows, and a retry seal button beside a status page link.
[](/block/error21)
PRO
error21
### Server Error Record
Monochrome server-error page: a parenthetical eyebrow over a display headline, a retry pill beside a status link, and a ruled two-column record of the reference, timestamp, subsystem and state.
[](/block/error5)
PRO
error5
### 404 Support Panel
Card-style 404 panel that echoes the requested URL in monospace, pairs a browser-history back button with link actions, and closes with a support and status link row.
[](/block/error17)
PRO
error17
### Maintenance Window Notice
Planned downtime page with a square eyebrow and status code, a bold accent headline, three bordered cells for the maintenance window, a working notify-me email form with a success state, and a live progress link.
[](/block/error29)
PRO
error29
### Oversized Numeral 404
Monochrome 404 led by the status code set as an oversized numeral, with the statement and pill call to action on one side of a hairline rule and the explanation plus display-type links on the other.
[](/block/error25)
PRO
error25
### Rate Limit Cooldown
Too-many-requests page with a square eyebrow and status code, an accent headline, three bordered usage cells, and a live cooldown counter that swaps itself for a retry seal button when it reaches zero.
## Ship the interface, keep the code.
New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight.
[Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing)
### Library
* [Blocks](/blocks)
* [Pages](/pages)
* [Pieces](/pieces)
* [Components](/components)
* [Search](/search)
### Learn
* [Docs](/docs)
* [AI & MCP](/docs/mcp)
* [Blog](/blog)
* [Free tools](/tools)
* [What's new?](/changelog)
* [Website Builder](https://beste.co)
### More
* [Pricing](/pricing)
* [Referrals](/referrals)
* [License](/license)
* [GitHub](https://github.com/beste-co/beste-ui)
### Shadcn Blocks
* [Shadcn Hero Blocks](/blocks/hero)
* [Shadcn Feature Blocks](/blocks/feature)
* [Shadcn Pricing Blocks](/blocks/pricing)
* [Shadcn CTA Blocks](/blocks/cta)
* [Shadcn FAQ Blocks](/blocks/faq)
* [Shadcn About Blocks](/blocks/about)
* [Shadcn Stats Blocks](/blocks/stats)
* [Shadcn Footer Blocks](/blocks/footer)
* [Shadcn Navigation Blocks](/blocks/navigation)
* [Shadcn Auth Blocks](/blocks/auth)
* [Shadcn Ecommerce Blocks](/blocks/ecommerce)
* [Shadcn Portfolio Blocks](/blocks/portfolio)
* [Shadcn Showcase Blocks](/blocks/showcase)
* [Shadcn Careers Blocks](/blocks/careers)
* [Shadcn Onboarding Blocks](/blocks/onboarding)
* [Shadcn Coming Soon Blocks](/blocks/coming-soon)
* [Shadcn Post Blocks](/blocks/post)
* [Shadcn Legal Blocks](/blocks/legal)
* [Shadcn Workflow Blocks](/blocks/workflow)
* [Shadcn News Blocks](/blocks/news)
© 2026, [Beste](https://beste.co). All rights reserved.