Not Found Section

A responsive, full-page 404 Hyperspace website section featuring ambient radial glow, masked cyber grid backdrop, animated compass indicator, and customizable shortcuts.

Designed as a drop-in replacement for Next.js not-found.tsx or standalone missing route pages.

Hyperspace 404 Section

code"404": displays the primary numerical status code with serif typography.
badge"Error 404 • Page Not Found": floating status badge with animated rotating compass icon.
showShortcutstrue: toggles quick navigation shortcuts grid at the bottom.

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Install Not Found Section

npx shadcn@latest add @algorize-ui/not-found-section

components/custom/blocks/NotFoundSectionBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Nothing beyond the shared setup — Not Found Section needs only the cn helper and lucide-react, which the installation guide already put in place.

Features

Discover the key capabilities of the NotFoundSection component:

Ambient Radial Glow & Cyber Grid

Dual glowing radial light sources with a subtle masked 24px cyber grid overlay for a cosmic depth effect.

100% Screen & Device Responsive

Adaptive fluid clamp typography and flexible touch-friendly action buttons that fit effortlessly on 320px mobile up to 4K displays.

Animated Compass Indicator

Continuous subtle gyro rotation inside the status pill gives the missing page an engaging, alive feel.

Quick Navigation Shortcuts

Built-in side-by-side shortcut pills help users immediately jump to documentation, components, or search.

Props Reference

Prop	Type	Default	Description
`code`	`string`	`"404"`	Primary numerical status code heading rendered in elegant serif typography.
`badge`	`string`	`"Error 404 • Page Not Found"`	Floating status pill text with animated rotating compass icon.
`title`	`string`	`"Lost in Hyperspace?"`	Main title heading describing the missing resource.
`description`	`string`	`"The page you are looking for..."`	Explanatory text providing context and guidance to the user.
`primaryAction`	`NotFoundAction`	`{ label: "Explore Documentation", href: "/docs" }`	Primary high-emphasis action button (accepts `label`, `href`, `onClick`, `icon`).
`secondaryAction`	`NotFoundAction`	`{ label: "Back to Home", href: "/" }`	Secondary subtle action button (accepts `label`, `href`, `onClick`, `icon`).
`shortcutsTitle`	`string`	`"Popular Shortcuts"`	Header label displayed above the shortcut navigation grid.
`shortcuts`	`ShortcutItem[]`	`[All Components, Installation]`	Array of shortcut quick-links rendered in a 2-column side-by-side grid.
`showShortcuts`	`boolean`	`true`	Toggles visibility of the shortcut quick-links card.
`className`	`string`	`""`	Custom Tailwind CSS class overrides for the container section.