create 404 page in next 13 with shadcn ui

In this tutorial, we will create 404 error page in next js 13 with shadcn ui. First you need to setup next js 13 with shadcn ui project.

how to use shadcn ui in next js 13

Before use 404 not found page in next js 13 with shadcn ui you need to install npx shadcn-ui add .

npx shadcn-ui@latest add

Create next js 13 with shadcn ui 404 error page using shadcn-ui Card, CardContent, CardHeader, CardTitle component and next 13 Link.

import Link from "next/link"

import { Button } from "@/components/ui/button"
import {
  Card,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

export default function NotFound() {
  return (
    <div className="flex items-center justify-center h-screen bg-blue-600">
      <Card className="w-[420px]">
        <CardHeader className="text-center">
          <CardTitle className="lg:text-7xl text-4xl">404</CardTitle>
          <CardDescription>
            The page you’re looking for doesn’t exist.
          </CardDescription>
        </CardHeader>
        <CardFooter className="flex justify-center">
          <Button asChild>
            <Link href="/">Go Back</Link>
          </Button>
        </CardFooter>
      </Card>
    </div>
  )
}

shadcn ui 404 error page