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.
Installation
npx shadcn@latest add @chewypixel/status-graphicUsage
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
classNameClasses for the graphic, which is 176px square. Same on NotFoundGraphic, ForbiddenGraphic and ServerErrorGraphic.
string
childrenThe icon in the middle, when you build your own with StatusGraphic.
ReactNode
overlaySVG drawn over the rings in a 176 × 176 viewBox, when you build your own with StatusGraphic.
ReactNode
Released under the MIT License.
More components
- Segmented ControlMutually exclusive options with a highlight that slides to the selected one.
- TabsUnderline tabs. The underline slides to the active tab and resizes to fit its label.
- SwitchA switch whose thumb springs across when toggled and stretches while pressed.
- CheckboxA checkbox that draws its check mark and squishes when pressed.
See them in a real app
These components come from Mochi, our admin dashboard template built with Next.js, shadcn/ui and Motion.