create 404 page in next 13 with shadcn ui

create 404 page in next 13 with shadcn ui

updated 21/09/23 By frontendshape

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

shadcn ui 404 error page