Components
Loading preview...
A responsive error page component that displays a "page not found" message with navigation buttons and helpful resource links when users hit a non-existent route.
@molecule-ui
npx shadcn@latest add https://21st.dev/r/molecule-lab-rushil/not-found-1import { NotFound, NotFoundLink } from "@/components/ui/not-found-1";
import {
Book,
BookOpen,
MessageCircle,
} from "lucide-react";
const demoLinks: NotFoundLink[] = [
{
title: "Documentation",
subtitle: "Dive in to learn all about our project",
icon: BookOpen,
href: "https://moleculeui.design",
},
{
title: "Our blog",
subtitle: "Read the latest post on our blog",
icon: Book,
href: "https://moleculeui.design",
},
{
title: "Chat to us",
subtitle: "Can't find what you're looking for?",
icon: MessageCircle,
href: "https://moleculeui.design",
},
];
// Default demo - this is what gets rendered on the page
export default function Demo() {
const handleBackClick = () => {
if (typeof window !== "undefined") {
window.history.back();
}
};
const handleHomeClick = () => {
if (typeof window !== "undefined") {
window.location.href = "/";
}
};
return (
<NotFound
links={demoLinks}
onBackClick={handleBackClick}
onHomeClick={handleHomeClick}
/>
);
}