# 404 page

> A full-page 404 error state with go-back and home recovery actions.

A shadcn/ui block from the [@quill](https://www.quilldesignsystem.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/quill/error-404).

- Page, with a live preview: https://shadcn.exchange/r/quill/error-404
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/quill/error-404-light-b9e2d9f3fdf8d913.png
- Registry item: https://www.quilldesignsystem.com/r/error-404.json
- Categories: feedback
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://www.quilldesignsystem.com/r/error-404.json
```

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

## Dependencies

- Registry items: `button`, `https://www.quilldesignsystem.com/r/icon.json`

## Notes from the registry

A full-page 404 error state with go-back and home recovery actions. Do: Offer both a contextual escape (Go back) and an absolute one (Take me home) — never strand the user with only one recovery path. Don't: Leave a 404 page with no action at all, or only a single 'Home' link buried in a header the user has to hunt for. Use empty-state when the resource exists but is legitimately empty (no items yet), not missing or misrouted. Use alerts when the error is recoverable inline on the current page, not a full-page dead end that needs its own route.

## Files

### `registry/blocks/error-404.tsx`

```tsx
import { Button } from '@/components/ui/button'
import { Icon } from '@/components/ui/icon'

/** A full-page 404 error state with go-back and home recovery actions. */
export function Error404() {
  return (
    <div className="flex h-[500px] w-full flex-col items-center justify-center gap-4 bg-background px-6 text-center text-foreground">
      <span className="font-heading text-6xl text-muted-foreground">
        404
      </span>
      <div className="flex flex-col gap-1">
        <h1 className="fraunces-text font-heading text-2xl">Page not found</h1>
        <p className="max-w-sm text-sm text-pretty text-muted-foreground">
          The page you’re looking for doesn’t exist or may have been moved.
        </p>
      </div>
      <div className="flex gap-2">
        <Button variant="outline">
          <Icon name="arrow_back" size={16} /> Go back
        </Button>
        <Button>Take me home</Button>
      </div>
    </div>
  )
}
```