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

Last updated: 2026-08-12

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. Missing Piece With Archive Search

# Missing Piece With Archive Search[PRO](/pricing)

A not-found page for a publication, offering a search field as the first action and the month's most read pieces underneath, with a line committing to link permanence.

ViewCodeDocs

Base UI

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

## Error38: Missing Piece With Archive Search

A not-found page for a publication, offering a search field as the first action and the month's most read pieces underneath, with a line committing to link permanence.

Upgrade to Pro

Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.

[Upgrade NowUpgrade Now](/pricing)

### Installation

Swap `YOUR_EMAIL` and `YOUR_KEY` for the email and license key on your account. Find your license key on your [account page](/account).

**Radix flavor**

bashCopy

```
npx shadcn add "https://ui.beste.co/r/error38?email=YOUR_EMAIL&license_key=YOUR_KEY"
```

**Base UI flavor**

bashCopy

```
npx shadcn add "https://ui.beste.co/r-base/error38?email=YOUR_EMAIL&license_key=YOUR_KEY"
```

This installs the block to `components/beste/block/error38.tsx`, the `badge6` component used for the code marker, and the shadcn/ui `input` and `button` primitives behind the search row.

### Quick start

The installed file exports `error38Demo` alongside the block: the exact props behind the preview above. Spread it to get a working not-found page in one line.

tsxCopy

```
import { Error38, error38Demo } from "@/components/beste/block/error38";

export default function NotFound() {
  return <Error38 {...error38Demo} />;
}
```

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

tsxCopy

```
import { Error38 } from "@/components/beste/block/error38";

export default function NotFound() {
  return (
    <Error38
      code="404"
      heading="This piece is not at this address"
      description="Links here are meant to last, so this is either a typo or something we moved."
      placeholder="Search for what you were reading"
      submitLabel="Search"
      popularLabel="Most read this month"
      popular={[
        { title: "Writing an estimate you can defend", href: "/essays/estimates" },
        { title: "Saying no in one paragraph", href: "/essays/no" },
      ]}
      note="Nothing published here has ever been deleted."
    />
  );
}
```

### Props

| Prop         | Type             | Default | Description                               |
| ------------ | ---------------- | ------- | ----------------------------------------- |
| code         | string           | –       | Status code, rendered as the Badge6 label |
| heading      | string           | –       | What went wrong, in words                 |
| description  | string           | –       | Why it might have happened                |
| placeholder  | string           | –       | Placeholder in the search field           |
| submitLabel  | string           | –       | Label on the submit button                |
| popularLabel | string           | –       | Label above the fallback links            |
| popular      | PopularPiece\[\] | \[\]    | Somewhere to go instead                   |
| note         | string           | –       | Closing line about link permanence        |
| className    | string           | –       | Extra classes for the outer section       |

tsCopy

```
type PopularPiece = {
  title: string;
  href: string;
};
```

### Behavior notes

* Search is the first action rather than a link home, because on a content site the reader usually knows what they were looking for.
* The field is controlled and the submit handler logs the query after calling `preventDefault`, which is the seam to point at your own search route.
* The status code is carried by `Badge6` rather than set as huge display type, so the page leads with the sentence and not the number.
* The magnifier is `pointer-events-none` with `pl-12` on the input, so the icon never takes a click.

## More Error blocks

[View all Error](/blocks/error)

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

FREE

error2

### 404 With Site Search

Search-first 404 page: a controlled search field with a submit handler, plus a bordered list of suggested pages with titles, descriptions, and hover arrows.

[](/block/error33)

PRO

error33

### Retired Page Record

Monochrome page for deliberately removed content: a display headline, a ruled record of when it was published, retired and why, then a pill link to the replacement beside an archive link.

[](/block/error12)

PRO

error12

### 404 With Popular Articles

Blog 404 that turns a dead post URL into reading: centered messaging above a three-up article grid with cover images, category badges, dates, and read times.

[](/block/error9)

FREE

error9

### 404 Did You Mean

Left-aligned 404 for documentation and marketing sites: the requested path is shown struck through in monospace above a did-you-mean box linking to the closest matching page.

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

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