Framed card

404 page framed in a rounded card.

Usage

import { NotFoundCard } from '@/components/blocks/not-found-02'


<NotFoundCard />


// Swap in your own content
<NotFoundCard
  eyebrow="Not found"
  title="We lost this one"
  description="The page you are after has moved or no longer exists."
  primaryAction={{ label: 'Go to dashboard', href: '/dashboard' }}
  secondaryAction={{ label: 'Contact support', href: '/support' }}
/>

Install

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

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

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

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

Source

Props

Framed card props
Prop	Type	Default	Description
code	string	= '404'	Error code shown at the start of the eyebrow.
eyebrow	string	= 'Page missing'	Short label shown after the code in the eyebrow.
title	string	= 'Well, this is awkward'	Main headline, rendered as the page h1.
description	string	= Short friendly note	Supporting text under the headline.
primaryAction	NotFoundCardAction	= { label: 'Head back home', href: '/' }	Label and href for the blue pill button.
secondaryAction	NotFoundCardAction	= undefined	Optional quieter link shown beside the button.
className	string	= undefined	Extra classes for the outer section, e.g. a fixed min height.