Not found

Buttons 363

About

Not found page 05

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Not found to your project and fits it to your theme.

Code

How Not found is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { NotFound, Illustration } from "@/components/ui/not-found"

function Demo() {
  return (
    <div className="relative flex flex-col w-full justify-center min-h-svh bg-background p-6 md:p-10">
      <div className="relative max-w-5xl mx-auto w-full">
        <Illustration className="absolute inset-0 w-full h-[50vh] opacity-[0.04] dark:opacity-[0.03] text-foreground" />
        <NotFound
          title="Page not found"
          description="Lost, this page is. In another system, it may be."
        />
      </div>
    </div>
  )
}


export { Demo }