Error blocks for every framework.

The 100 error blocks are full sections for a page or panel that has failed: 404 not found, 500 server errors, offline, 401 and 403, rate limits, maintenance and failed uploads. Each explains what happened in plain words and gives a way back or forward.

There are 14 groups: Not found, Server and outages, Maintenance, Network, Sign-in and identity, Locked and removed, and more. They go beyond HTTP codes to browser permission errors, failed builds, expired links and in-app toasts and banners.

Search Command 404 Error turns a dead link into a search with popular pages. Minimal 404 Error is the bare numeral. 500 Server Error shows a copyable reference and the path your request took. Rate Limit Error shows the Retry-After header and a request window. Offline Error listens to the browser's online and offline events.

A doc comment states what the page shows, then the product name, the codes, the reference ids and any sample data sit as constants. These are placeholders for the demo: a 500 page's reference and time, for example, are typed, so replace them with the real values from your error.

Use the block's markup as the body of your framework's not-found and error pages. In Next.js that is app/not-found.tsx for 404s and app/error.tsx for the rest; error.tsx must be a client component, and almost all error blocks are marked use client already. The demo links point to # and need your routes.

Try again on the 500 and connection blocks only waits and then reports that it still fails, because the demo always fails. Replace that handler with your retry: call reset() from the Next.js error boundary, refetch, or reload the route, and show the result.

500 Server Error prints a reference and a time, and Error Debug Logs Window prints a log of typed lines with a copy button. Replace those constants with the real error id, time and messages you already collect.

Offline Error already reads navigator.onLine and listens for the online and offline events, with a demo switch on top that you remove. Keep the listeners and drop the switch so the page reflects the real connection.

The in-app ones (Toast Style Error, Banner Stack Window Error, Compact Widget Error) show errors at a small size. Their messages are constants in the file: replace them with your own cause in plain words and an action that fits it.

This page lists 100 of the category's 100 error blocks for React on Base UI. The category comes in React (Base UI, React Aria, Ark UI and Radix UI), Vue, Svelte and Solid; the framework and UI library pickers at the top of any block's page switch between them.

The error blocks here are written on Base UI primitives; the layout, the copy and the theme tokens are the same on every base, and the install path follows it (/r/error-401-unauthorized.json). The other bases are one picker away from /error-block.

Each block is TypeScript and Tailwind CSS v4, styled with your theme's tokens, and imports our components (installed with it) on Base UI. Icons come from lucide-react.

Open a block, copy its command and run it: `npx shadcn@latest add` with the block's registry URL, such as /r/error-401-unauthorized.json for 401 Unauthorized Error. The code is copied into your project and it's yours to edit.

The block's file and the components it imports: 401 Unauthorized Error brings Button, Guides, Input and Shine Button, installed before it. Nothing else changes in your project.

Use the filters above the grid: 14 kinds of error block, led by not found (12), files and data (10), locked and removed (9) and developer tools (9), and sort by popular or name. A good first look: 401 Unauthorized Error, 403 Forbidden Error and Subscription Required Error. Each card opens the block's live page.

Every block draws the same page column and side rails with a top rule only (the Guides component), so a error block lines up with the one above and below it. Stack one per section and the rails read as a single drawing; pick across the page errors, access and in the product kinds.

Open its page and use the full-screen viewer (/view/error/401-unauthorized) or the device-width previews. Every preview is free for everyone; only the code needs Pro.

Each error block uses semantic HTML: one heading level, real lists and labelled controls. Interactive parts sit on Base UI, a headless library that follows the WAI-ARIA patterns, and the layouts use logical properties so they hold in right-to-left languages.

Yes. They use semantic tokens only (bg-card, text-muted-foreground), never palette colors, so they follow your preset, radius and dark mode. The primary color marks one action per block and is never a background.

No animation library: the error blocks' motion is CSS (transitions, entrance animations and SVG), and it stands still under prefers-reduced-motion.

The previews are free for everyone. The code of all 100 error blocks is Pro, as is every block: Pro unlocks the code, the install command and the MCP.

Only with a Team or Organization license: client work, SaaS products and anything your users pay for. The Individual license is for personal, non-commercial projects. See the license page for the full terms.

You keep using what you installed in your existing projects, but get no new downloads or updates, and the MCP stops answering. A Lifetime license includes all future updates.

No. You can use them in your own End Products, but not redistribute the code or designs on their own, or in a UI library, kit, template or website builder.

With Pro, yes: the MCP server (22 tools, one personal URL from /dashboard/mcp) lets your agent search_blocks for a error block, read it with get_block and install it on your React on Base UI stack.

Pass `category: "error"` to search_blocks to search only the 100 error blocks, or to list_blocks for the 14 groups with their blocks. get_block then returns one with its install command.

plan_page plans a page as a stack of blocks for a brief. Pass `sections` with category ids, such as ["hero", "error", "footer"], to force the order; each section gets a pick and two alternatives, and get_block installs the stack.