All components
Chewypixel component

Status Graphic

Illustrations for error pages: a wandering search icon for 404, a pulsing lock for 403 and a spinning ring for 500.

Page not found

Installation

npx shadcn@latest add @chewypixel/status-graphic

Usage

import Link from "next/link";
import { NotFoundGraphic } from "@/components/ui/status-graphic";

export default function NotFound() {
  return (
    <main className="flex min-h-svh flex-col items-center justify-center gap-4 text-center">
      <NotFoundGraphic />
      <h1 className="text-xl font-semibold">Page not found</h1>
      <Link href="/">Go home</Link>
    </main>
  );
}

Props

className

Classes for the graphic, which is 176px square. Same on NotFoundGraphic, ForbiddenGraphic and ServerErrorGraphic.

string

children

The icon in the middle, when you build your own with StatusGraphic.

ReactNode

overlay

SVG drawn over the rings in a 176 × 176 viewBox, when you build your own with StatusGraphic.

ReactNode

Released under the MIT License.

More components

See them in a real app

These components come from Mochi, our admin dashboard template built with Next.js, shadcn/ui and Motion.