Not Found

A beautifully designed 404 page to guide users when content is missing.

Installation

npx scrollx-ui@latest add not-found

import NotFound from "@/components/ui/not-found";

<NotFound
  particleCount={10000}
  particleSize={4}
  animate={true}
  buttonText="Go Back"
  buttonHref="/dashboard"
  className="custom-shadow"
/>

A polished 404 page created to assist users when a resource is unavailable.

Property	Type	Default	Description
`particleCount`	number	`12500`	Total number of particles rendered in the background animation.
`particleSize`	number	`5`	Size of each particle in the animation.
`animate`	boolean	`false`	Whether particles should animate or remain static.
`imageLight`	string	`"/images/404-lightc.png"`	Image shown in light mode.
`imageDark`	string	`"/images/404-darkc.png"`	Image shown in dark mode.
`buttonText`	string	`"Back to Home"`	Label text inside the call-to-action button.
`buttonHref`	string	`"/"`	URL to navigate when the button is clicked.
`className`	string	`""`	Additional Tailwind classes for customizing the outermost container.
`onButtonClick`	() => void	`undefined`	Optional click handler function when the button is clicked.