Lost explorer

404 page with an animated line-drawn illustration.

Usage

import { NotFoundExplorer } from '@/components/blocks/not-found-04'


<NotFoundExplorer />


// Swap in your own content
<NotFoundExplorer
  title="We searched everywhere"
  description="The link may be broken, or the page has moved on."
  primaryAction={{ label: 'Back to dashboard', href: '/dashboard' }}
  secondaryAction={{ label: 'Contact support', href: '/support' }}
/>

Install

pnpm dlx shadcn@latest add @pastaui-pro/not-found-04

npx shadcn@latest add @pastaui-pro/not-found-04

yarn dlx shadcn@latest add @pastaui-pro/not-found-04

bunx --bun shadcn@latest add @pastaui-pro/not-found-04

Source

Props

Lost explorer props
Prop	Type	Default	Description
code	string	= '404'	Light digits circled in blue pen above the headline.
title	string	= 'Hmm, this page wandered off.'	Main headline, rendered as the page h1.
description	string	= Short playful note	Supporting text under the headline.
primaryAction	NotFoundExplorerAction	= { label: 'Back to home', href: '/' }	Label and href for the solid blue button.
secondaryAction	NotFoundExplorerAction	= { label: 'Browse the docs', href: '/docs' }	Label and href for the outline button.
className	string	= undefined	Extra classes for the section, e.g. a fixed min height.