Giant digits

404 page with a headline over oversized faint digits.

Usage

import { NotFound } from '@/components/blocks/not-found-01'


<NotFound />


// Swap in your own content
<NotFound
  title="Nothing to see here"
  description="This link is broken or the page was moved."
  primaryAction={{ label: 'Back to dashboard', href: '/dashboard' }}
  secondaryAction={{ label: 'Contact support', href: '/support' }}
/>

Install

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

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

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

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

Source

Props

Giant digits props
Prop	Type	Default	Description
code	string	= '404'	Digits drawn large behind the content and announced to screen readers.
title	string	= 'This page took a detour'	Main headline, rendered as the page h1.
description	string	= Short friendly note	Supporting text under the headline.
primaryAction	NotFoundAction	= { label: 'Take me home', href: '/' }	Label and href for the blue pill button.
secondaryAction	NotFoundAction	= undefined	Optional quieter text link shown beside the button.
className	string	= undefined	Extra classes for the section, e.g. a fixed min height.