Components
Loading preview...
A creative and visually engaging 404 error page component featuring a postal/postcard theme with animated circular text. **Key Features:** - **Postal Theme Design**: Displays a postcard-style image with perforated stamp edges and postal cancellation marks (wavy lines) - **Animated Circular Text**: Rotating text that forms a complete circle above the postcard, continuously spinning with customizable content - **Customizable Content**: Accepts props for heading, subtext, back button text, and navigation link - **Typography**: Uses the Doto font for the main heading and Crimson Text serif for elegant styling - **Interactive Elements**: Postcard has a subtle rotation that straightens on hover, and includes a call-to-action button - **Responsive Design**: Adapts to different screen sizes with responsive text sizing and spacing **Props:** - `heading`: Main error message (default: "(404) Looks like the page you're looking for got lost somewhere.") - `subtext`: Supporting message (default: "But hey — in New York, even the unexpected detours lead somewhere.") - `circularText`: Text that rotates in a circle (default: "The General Intelligence Company of New York") - `imageSrc`: Postcard image URL - `backButtonText`: Button label (default: "Back to Home") - `backButtonHref`: Navigation destination (default: "/") **Use Case**: Perfect for adding personality to 404 error pages while maintaining a professional and polished appearance.
@vaib215
npx shadcn@latest add https://21st.dev/r/vaib215/pixeleted-404-not-foundimport { Error404 } from "@/components/ui/pixeleted-404-not-found"
export default function Error404Demo() {
return (
<Error404
postcardImage="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/statue-of-liberty-oil-pastel-MndxxUm4uk78xLAAKqtCFXH2HmNn0h.jpg"
postcardAlt="New York City Postcard with Statue of Liberty"
curvedTextTop="The General Intelligence"
curvedTextBottom="of New York"
heading="(404) Looks like the page you're looking for got lost somewhere."
subtext="But hey — in New York, even the unexpected detours lead somewhere."
backButtonLabel="Back to Home"
backButtonHref="/"
/>
)
}