Vaibhav Kumar Singh

Pixeleted 404 NOT FOUND

Buttons 250

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Pixeleted 404 NOT FOUND to your project and fits it to your theme.

Code

How Pixeleted 404 NOT FOUND is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Error404 } from "@/components/ui/pixeleted-404-not-found"

export default function Error404Demo() {
  return (
    <Error404
      postcardImage="https://cdn.21st.dev/assets/mirror/9e/9e64a2d8260f18efc82decc3e835f9ee656f14e736085507071a73f0841b38dd.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="/"
    />
  )
}

Dependencies

More by Vaibhav Kumar Singh

View all
  • Stagger Testimonials

    Stagger Testimonials

    2K
  • Event Manager

    Event Manager

    1.6K
  • Expanding Cards

    Expanding Cards

    1.4K
  • FAQ tabs

    FAQ tabs

    1.2K
  • Shuffle Grid

    Shuffle Grid

    1K
  • Flip Links

    Flip Links

    1K
  • Category List

    Category List

    821
  • Color Change Card

    Color Change Card

    762

More in Buttons

View all
  • Button Save

    Button Save

    46
  • Button

    Button

    20
  • Eclipse Button

    Eclipse Button

    5
  • Button

    Button

    6
  • Button

    Button

    14
  • Button Group

    Button Group

    37
  • Button

    Button

    32
  • Split Button

    Split Button

    32