# 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/error36. 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. Not Found With Search # Not Found With Search[PRO](/pricing) 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. ViewCodeDocs Base UI ![](https://oud.pics/sm/l/npm.svg)`npx shadcn add https://ui.beste.co/r-base/error36` ## 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. 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/error36?email=YOUR_EMAIL&license_key=YOUR_KEY" ``` **Base UI flavor** bashCopy ``` npx shadcn add "https://ui.beste.co/r-base/error36?email=YOUR_EMAIL&license_key=YOUR_KEY" ``` This installs the block to `components/beste/block/error36.tsx`, the `search24` results piece it floats on the tile (installed to `components/beste/piece/search24.tsx`), and the `button21` component it uses for the action. ### Quick start The installed file exports `error36Demo` alongside the block: the exact props behind the preview above. Spread it to get a working error page in one line. tsxCopy ``` import { Error36, error36Demo } from "@/components/beste/block/error36"; export default function NotFound() { return ; } ``` Then replace the demo with your own props. Written out, a trimmed setup looks like this: tsxCopy ``` import { Error36 } from "@/components/beste/block/error36"; import { Search24 } from "@/components/beste/piece/search24"; export default function NotFound() { return ( } image={{ src: "/backdrops/blue.jpg", alt: "Soft blue gradient backdrop" }} destinationsLabel="Where people usually meant to go" destinations={[ { title: "Today's clinic list", description: "Everyone arriving today, sorted by time.", href: "/app/today", }, { title: "Members", description: "The full directory across every site.", href: "/app/members" }, ]} /> ); } ``` ### 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 | | button | { label: string; href: string } | – | Single outline action under the copy | | media | ReactNode | – | Live asset on the tile, search24 in the demo | | image | { src: string; alt: string } | – | Backdrop behind the media tile | | destinationsLabel | string | – | Small label above the destination list | | destinations | Destination\[\] | \[\] | Linked hairline rows of likely pages | | className | string | – | Extra classes for the outer section | tsCopy ``` type ActionLink = { label: string; href: string; }; type Destination = { title: string; description: string; href: string; }; ``` ### Behavior notes * The search panel inside the tile is a presentational piece, not a working search box. It illustrates the affordance, and the real search lives at whatever destination you point people to. * The action wrapper is `flex items-start justify-center`. The `items-start` is load-bearing: without it the button would stretch vertically inside the centered flex row. * Destinations are whole `Link` elements laid out as a two-column grid from `sm`, filling column by column, so an odd count leaves the gap at the end rather than mid-list. * The hover arrow uses a named group, `group/error36`, rather than the bare `group` class, so nesting this block inside another grouped component will not trigger both animations at once. The shift is wrapped in `motion-safe:`. * Each destination carries its own `border-t` with no closing rule, so the list stays open at the bottom. * Widths step outward down the page: `max-w-2xl` for the copy and the tile, `max-w-4xl` for the destinations, so the page reads as narrowing to a point and then opening out. * `heading` renders as an `h1`, since this block is designed to be the whole not-found page rather than a section of one. ## More Error blocks [View all Error](/blocks/error) [](/block/error38) PRO 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. [](/block/error30) PRO error30 ### Search Led 404 Monochrome 404 that hands the visitor a search field: a display headline with a muted emphasis clause, a rounded search bar with a circular submit seal wired to a callback, and a ruled list of the most travelled routes. [](/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/error4) PRO error4 ### 404 With Destination Cards 404 page that recovers the visit with a grid of destination cards, each with an icon, title, description, and hover arrow, followed by a centered row of fallback buttons. [](/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/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. ## 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.