How do I use Stamp Postcard in my project?

Copy the StampPostcardCard source code from https://opensourceui.in/components/stamp-postcard, add lib/cn.ts if needed, install clsx tailwind-merge and lucide-react, then import and render the component in your React or Next.js app.

Can I use Stamp Postcard in a commercial project?

Yes. Opensource UI is MIT licensed. You can use StampPostcardCard in personal and commercial projects without UI attribution.

Back to Gallery

Components / Gallery

Stamp Postcard

Vintage postcard with landscape photo, postage stamp overlay, handwritten message, and posted-from address. Travel and lifestyle brands love this one.

Preview

INDIA₹5

Wish you were here! The Sundarbans at golden hour — absolutely unreal.

Posted from

Sundarbans, WB

Setup

How to use

Free for personal and commercial use. No UI attribution required. Include the MIT copyright notice when copying component source into your project. Read the MIT license.

1
Run in your terminal:
$npm install clsx tailwind-merge lucide-react
2
Copy lib/cn.ts below. Skip if you already have cn().
3
Copy the code below and create components/gallery/stamp-postcard-card.tsx in your project.
4
Import and render:
Example
import { StampPostcardCard } from "@/components/gallery/stamp-postcard-card";
<StampPostcardCard />

lib/cn.ts

1
2
3
4
5
6
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

components/gallery/stamp-postcard-card.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
import Image from "next/image";
import { forwardRef, type ComponentPropsWithoutRef } from "react";
 
import { cn } from "@/lib/cn";
 
export type StampPostcardCardProps = Readonly<
  {
    message?: string;
    location?: string;
    stampValue?: string;
    imageSrc?: string;
  } & ComponentPropsWithoutRef<"div">
>;
 
// Production-ready Stamp Postcard component — styled with Tailwind CSS.
export const StampPostcardCard = forwardRef<
  HTMLDivElement,
  StampPostcardCardProps
>(
  (
    {
      className,
      message = "Wish you were here! The Sundarbans at golden hour — absolutely unreal.",
      location = "Sundarbans, WB",
      stampValue = "₹5",
      imageSrc = "/wallpaper-3.png",
      ...props
    },
    ref,
  ) => (
    <div
      ref={ref}
      data-slot="stamp-postcard-card"
      className={cn("w-sm font-sans", className)}
      {...props}
    >
      <div className="relative overflow-hidden rounded-sm border border-neutral-200 bg-[#fffef8] shadow-md">
        <div className="relative h-32 sm:h-36">
          <Image
            src={imageSrc}
            alt={location}
            fill
            sizes="320px"
            className="object-cover"
          />
          <div className="absolute top-2 right-2 flex h-14 w-11 rotate-3 flex-col items-center justify-center border-2 border-dashed border-[#b4b1ac] bg-[#f6f2eb]">
            <span className="text-[8px] font-bold text-[#979591]">INDIA</span>
            <span className="text-sm font-black text-[#6b6966]">
              {stampValue}
            </span>
          </div>
        </div>
        <div className="grid grid-cols-2 gap-0 border-t border-neutral-200">
          <div className="border-r border-neutral-200 p-3">
            <p className="text-[12px] leading-relaxed text-neutral-700 italic">
              {message}
            </p>
          </div>
          <div className="flex flex-col justify-end p-3">
            <p className="font-mono text-[9px] tracking-wider text-neutral-400 uppercase">
              Posted from
            </p>
            <p className="mt-0.5 text-[11px] font-semibold text-neutral-800">
              {location}
            </p>
            <div className="mt-3 space-y-2">
              <div className="h-px bg-neutral-200" />
              <div className="h-px bg-neutral-200" />
              <div className="h-px bg-neutral-200" />
            </div>
          </div>
        </div>
      </div>
    </div>
  ),
);
 
StampPostcardCard.displayName = "StampPostcardCard";

import Image from "next/image"; import { forwardRef, type ComponentPropsWithoutRef } from "react"; import { cn } from "@/lib/cn"; export type StampPostcardCardProps = Readonly< { message?: string; location?: string; stampValue?: string; imageSrc?: string; } & ComponentPropsWithoutRef<"div"> >; // Production-ready Stamp Postcard component — styled with Tailwind CSS. export const StampPostcardCard = forwardRef< HTMLDivElement, StampPostcardCardProps >( ( { className, message = "Wish you were here! The Sundarbans at golden hour — absolutely unreal.", location = "Sundarbans, WB", stampValue = "₹5", imageSrc = "/wallpaper-3.png", ...props }, ref, ) => ( <div ref={ref} data-slot="stamp-postcard-card" className={cn("w-sm font-sans", className)} {...props} > <div className="relative overflow-hidden rounded-sm border border-neutral-200 bg-[#fffef8] shadow-md"> <div className="relative h-32 sm:h-36"> <Image src={imageSrc} alt={location} fill sizes="320px" className="object-cover" /> <div className="absolute top-2 right-2 flex h-14 w-11 rotate-3 flex-col items-center justify-center border-2 border-dashed border-[#b4b1ac] bg-[#f6f2eb]"> <span className="text-[8px] font-bold text-[#979591]">INDIA</span> <span className="text-sm font-black text-[#6b6966]"> {stampValue} </span> </div> </div> <div className="grid grid-cols-2 gap-0 border-t border-neutral-200"> <div className="border-r border-neutral-200 p-3"> <p className="text-[12px] leading-relaxed text-neutral-700 italic"> {message} </p> </div> <div className="flex flex-col justify-end p-3"> <p className="font-mono text-[9px] tracking-wider text-neutral-400 uppercase"> Posted from </p> <p className="mt-0.5 text-[11px] font-semibold text-neutral-800"> {location} </p> <div className="mt-3 space-y-2"> <div className="h-px bg-neutral-200" /> <div className="h-px bg-neutral-200" /> <div className="h-px bg-neutral-200" /> </div> </div> </div> </div> </div> ), ); StampPostcardCard.displayName = "StampPostcardCard";