# Not Found 02

> A 404 not found block with big text, suggestions, and actions

A shadcn/ui block from the [@shadcnui-blocks](https://shadcnui-blocks.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/shadcnui-blocks/not-found-02).

- Page, with a live preview: https://shadcn.exchange/r/shadcnui-blocks/not-found-02
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/shadcnui-blocks/not-found-02-light-66926edb81049ead.png
- Registry item: https://shadcnui-blocks.com/r/not-found-02.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcnui-blocks.com/r/not-found-02.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`
- Registry items: `button`

## Files

### `src/registry/blocks/radix/not-found-02/components/not-found.tsx`

```tsx
import { ArrowRightIcon } from "lucide-react";
import Link from "next/link";
import { Button } from "@/registry/bases/radix/ui/button";

const suggestions = [
  { label: "Home", href: "#" },
  { label: "Blog", href: "/#blog" },
  { label: "Pricing", href: "/#pricing" },
  { label: "Documentation", href: "/#docs" },
  { label: "Contact", href: "/#contact" },
];

export default function NotFound() {
  return (
    <div className="flex min-h-screen flex-col items-center justify-center px-6">
      <p className="select-none font-satoshi font-semibold text-[8rem] text-muted-foreground/50 leading-none tracking-tight">
        404
      </p>
      <h1 className="mt-2 font-medium text-3xl tracking-tight">
        Page not found
      </h1>
      <p className="mt-3 max-w-sm text-pretty text-center text-muted-foreground">
        The page you&apos;re looking for doesn&apos;t exist or has been moved.
      </p>

      <div className="mt-10 w-full max-w-xs">
        <p className="mb-3 text-center text-muted-foreground text-sm">
          You might be looking for:
        </p>
        <ul className="divide-y rounded-xl border">
          {suggestions.map((s) => (
            <li className="group" key={s.href}>
              <Link
                className="flex items-center justify-between px-4 py-3 text-sm transition-colors hover:bg-muted/50 group-first:rounded-t-xl group-last:rounded-b-xl"
                href={s.href}
              >
                {s.label}
                <ArrowRightIcon className="size-3.5 text-muted-foreground" />
              </Link>
            </li>
          ))}
        </ul>
      </div>

      <div className="mt-8 flex gap-3">
        <Button asChild>
          <Link href="/">Go home</Link>
        </Button>
        <Button asChild variant="outline">
          <Link href="/contact">Contact support</Link>
        </Button>
      </div>
    </div>
  );
}
```