ShadcnDesign
component404-section-1source: ok · hit
404 Section 1
404 error page section with modern design
npx shadcn add "https://shadcndesign-free.vercel.app/r/404-section-1.json"one-time
"one-time" library — installing requires an active license from the vendor.
Where it goes
error-state
Tags auto-generated by rules on 9/24/2026 — empty means no evidence, not lack of support.
Dependencies
Bundle weight · lightRegistry dependencies
buttonhttps://shadcndesign-free.vercel.app/r/styles.jsonhttps://shadcndesign-free.vercel.app/r/tagline.json
Files1 · source cached 10/15/2026, 3:37:24 AM
components/pro-blocks/landing-page/404-sections/404-section-1.tsx
"use client";
import { Button } from "@/components/ui/button";
import { Tagline } from "@/components/pro-blocks/landing-page/tagline";
export function X404Section1() {
return (
<section
className="bg-background section-padding-y"
aria-labelledby="error-title"
>
<div className="container-padding-x relative z-10 mx-auto flex max-w-7xl flex-col items-center gap-12 lg:flex-row lg:gap-16">
<div className="mx-auto flex max-w-xl flex-1 flex-col items-center gap-6 text-center lg:gap-8">
<div className="section-title-gap-xl flex flex-col items-center text-center">
<Tagline>404 Section</Tagline>
<h1 id="error-title" className="heading-xl">
Page not found
</h1>
<p className="text-muted-foreground text-lg/8 text-pretty">
Sorry, we couldn't find the page you're looking for. Please check
the URL or navigate back home.
</p>
</div>
<Button>Go to homepage</Button>
</div>
</div>
</section>
);
}