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
import { cn } from '@/lib/cn';
 
// Full source is available in the repository checkout.

components/gallery/stamp-postcard-card.tsx

1
2
// Full source: components/components/gallery/stamp-postcard-card.tsx
// The Cloudflare worker does not expose the source tree at request time.

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
import { cn } from '@/lib/cn';
 
// Full source is available in the repository checkout.

components/gallery/stamp-postcard-card.tsx

1
2
// Full source: components/components/gallery/stamp-postcard-card.tsx
// The Cloudflare worker does not expose the source tree at request time.