Browse components
Not Found
Drop-in 404 section: a huge parallax code with RGB-split glitch bursts, a friendly message and a home button.
Installation
npx shadcn@latest add @glint-ui/not-foundFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/not-found.json
Usage
import { NotFound } from "@/components/ui/not-found";
// app/not-found.tsx
export default function NotFoundPage() {
return (
<main className="h-screen">
<NotFound homeHref="/" />
</main>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| code | string | "404" | Big code shown in the middle. |
| title | string | "This page drifted off" | Heading. |
| message | string | "The link might be broken, or the page moved somewhere new. Let's get you back on track." | Supporting text. |
| homeHref | string | "/" | Where the button goes. |
| buttonLabel | string | "Back to home" | Button text. |
| glitch | boolean | true | Periodic RGB-split glitch bursts. |
| parallax | number | 18 | Px each digit drifts with the pointer. |
| accent | string | "#f43f5e" | Glow and glitch accent. |
| className | string | — | Extra classes for the root element. |