# 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/error34. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Last updated: 2026-07-28

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. Editorial Not Found Split

# Editorial Not Found SplitFREE

A calm not-found page with an error eyebrow, an oversized light heading and recovery actions on the left, beside a hairline list of the destinations people usually need instead.

ViewCodeDocs

Base UI

![](https://oud.pics/sm/l/npm.svg)`npx shadcn add https://ui.beste.co/r-base/error34`

## Error34: Editorial Not Found Split

Calm not-found page: an error eyebrow over an oversized light heading, a reassuring line and two recovery actions on the left, beside a hairline list of the destinations people usually needed instead, each with its own one-line explanation and a hover arrow.

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/error34"
```

**Base UI flavor**

bashCopy

```
npx shadcn add "https://ui.beste.co/r-base/error34"
```

This installs the block to `components/beste/block/error34.tsx` plus the `badge23` and `button21` components it uses for the eyebrow and the actions.

### Quick start

The installed file exports `error34Demo` alongside the block: the exact props behind the preview above. Spread it to get a working 404 in one line.

tsxCopy

```
import { Error34, error34Demo } from "@/components/beste/block/error34";

export default function NotFound() {
  return <Error34 {...error34Demo} />;
}
```

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

tsxCopy

```
import { Error34 } from "@/components/beste/block/error34";

export default function NotFound() {
  return (
    <Error34
      badge={{ label: "Error 404" }}
      heading="This page moved, or never existed"
      description="Nothing is broken on your side, and your workspace is untouched."
      buttons={[
        { label: "Back to home", href: "/" },
        { label: "Search the docs", href: "/docs", tone: "outline" },
      ]}
      linksLabel="Where people usually go from here"
      links={[
        {
          title: "Product tour",
          description: "See how the whole workflow sits on one surface.",
          href: "/tour",
        },
        {
          title: "Help centre",
          description: "Setup guides, imports, and answers from the team.",
          href: "/help",
        },
      ]}
    />
  );
}
```

### Props

| Prop        | Type              | Default | Description                                           |
| ----------- | ----------------- | ------- | ----------------------------------------------------- |
| badge       | { label: string } | –       | Error eyebrow above the heading, rendered via Badge23 |
| heading     | string            | –       | Oversized h1 explaining what happened                 |
| description | string            | –       | Reassuring paragraph under the heading                |
| buttons     | ActionLink\[\]    | \[\]    | Recovery actions, each with its own tone              |
| linksLabel  | string            | –       | Label above the destination list                      |
| links       | HelpLink\[\]      | \[\]    | Hairline rows of likely destinations                  |
| className   | string            | –       | Extra classes for the outer <section>                 |

tsCopy

```
type ActionLink = {
  label: string;
  href: string;
  tone?: "primary" | "neutral" | "outline";
};

type HelpLink = { title: string; description: string; href: string };
```

### Behavior notes

* The status code lives in `badge.label`, not in a giant `404` numeral, so the heading can carry the sentence a lost visitor actually needs and the code stays a quiet kicker.
* The heading is an `h1` at the set's hero scale. Dropping this block into a page that already has an `h1` means overriding one of them for a sane outline.
* Each destination row is a `next/link` around the whole row, with the title, its description, and the arrow all reacting from one named group, so the hit target is the full strip rather than the title alone.
* `buttons` renders through `Button21` with the tone taken from the data, which is how the demo gets a solid first action and a hairline second without a variant prop on the block.
* Nothing is client-interactive here beyond the links, and nothing reads the router, so this drops straight into a `not-found.tsx` on the server.
* Both columns are independent: leaving `links` empty leaves the left column alone, and the `md:grid-cols-2` split simply renders with an empty right side.

## More Error blocks

[View all Error](/blocks/error)

[](/block/error14)

PRO

error14

### Editorial 404 Section Index

Editorial 404 with a square eyebrow and status code over a hairline rule, an oversized accent-highlighted headline, and a ruled index of the sections visitors reach for next.

[](/block/error20)

PRO

error20

### Editorial 404 With Portrait Image

Two-column 404 in a quiet monochrome language: a parenthetical eyebrow, a two-line display headline, a pill call to action and an oversized report-the-link email on the left, a tall captioned photograph on the right.

[](/block/error3)

PRO

error3

### Split 404 With Image

Two-column 404 page with the error code, heading, explanation, buttons, and a small note on one side, and a full-bleed image that scales on hover on the other. The image side can be flipped with a prop.

[](/block/error36)

PRO

error36

### Not Found With Search

A not-found page that offers a way forward rather than a way back, pairing an oversized light heading with an image tile floating a live search panel and a two-column hairline list of likely destinations.

[](/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/error35)

FREE

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.

## 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.