Error Page

Branded 404 error page with search input and helpful actions

Feedback & Statuserror404500not-found

Dependencies

shadcn/ui components needed:

npx shadcn@latest add buttonnpx shadcn@latest add inputnpx shadcn@latest add card

How to use this component

Copy the code below into your project. Make sure you have the required shadcn/ui dependencies installed. Then import and use the component in your pages or layouts.

Code

1"use client";
2
3import { Search, ArrowLeft, ExternalLink } from 'lucide-react';
4import { Button } from '@/components/ui/button';
5import { Input } from '@/components/ui/input';
6import { Card, CardContent } from '@/components/ui/card';
7
8export default function ErrorPage() {
9  return (
10    <div className="relative flex min-h-[500px] items-center justify-center overflow-hidden bg-muted/30 p-6">
11      <div className="absolute inset-0 flex items-center justify-center opacity-5">
12        <span className="text-[200px] font-bold text-foreground">404</span>
13      </div>
14      <Card className="relative w-full max-w-md">
15        <CardContent className="flex flex-col items-center py-10 text-center">
16          <div className="mb-6 flex h-20 w-20 items-center justify-center rounded-full bg-muted">
17            <Search className="h-10 w-10 text-muted-foreground" />
18          </div>
19          <h2 className="mb-2 text-2xl font-bold text-foreground">Page not found</h2>
20          <p className="mb-6 text-sm text-muted-foreground">
21            The page you're looking for doesn't exist or has been moved. Let's get you back on track.
22          </p>
23          <div className="mb-6 w-full">
24            <div className="relative">
25              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
26              <Input 
27                placeholder="Search for something..." 
28                className="pl-10"
29              />
30            </div>
31          </div>
32          <div className="flex w-full flex-col gap-3">
33            <Button className="w-full">
34              <ArrowLeft className="mr-2 h-4 w-4" />
35              Go Home
36            </Button>
37            <Button variant="ghost" className="w-full">
38              <ExternalLink className="mr-2 h-4 w-4" />
39              Contact Support
40            </Button>
41          </div>
42        </CardContent>
43      </Card>
44    </div>
45  );
46}