About
A beautiful, responsive pin/marker directory component with search, filter, categories, star ratings, and four layout variants (default, compact, grid, card). Perfect for travel guides, location directories, and geo-tagged collections.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds PinList to your project and fits it to your theme.
Code
How PinList is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import PinList from "@/components/ui/pinlist";
import type { PinItem } from "@/components/ui/pinlist";
const demoPins: PinItem[] = [
{
id: "1",
title: "Eiffel Tower",
description:
"Iconic wrought-iron lattice tower on the Champ de Mars in Paris, France.",
category: "Landmark",
location: "Paris, France",
rating: 4.7,
tags: ["iconic", "france"],
},
{
id: "2",
title: "Sukiyabashi Jiro",
description:
"World-renowned three-Michelin-star sushi restaurant in Ginza, Tokyo.",
category: "Restaurant",
location: "Tokyo, Japan",
rating: 4.9,
tags: ["sushi", "michelin"],
},
{
id: "3",
title: "Marina Bay Sands",
description:
"Luxury integrated resort with iconic infinity pool overlooking Singapore.",
category: "Hotel",
location: "Singapore",
rating: 4.5,
tags: ["luxury"],
},
{
id: "4",
title: "Blue Bottle Coffee - Aoyama",
description:
"Minimalist third-wave coffee shop in Tokyo's Aoyama district.",
category: "Cafe",
location: "Tokyo, Japan",
rating: 4.3,
tags: ["coffee", "japan"],
},
{
id: "5",
title: "Central Park",
description:
"Expansive urban park in Manhattan featuring lakes, trails, and recreational areas.",
category: "Park",
location: "New York City, USA",
rating: 4.6,
tags: ["nature", "urban"],
},
{
id: "6",
title: "Louvre Museum",
description:
"The world's largest art museum, home to the Mona Lisa and Venus de Milo.",
category: "Museum",
location: "Paris, France",
rating: 4.8,
tags: ["art", "history"],
},
];
export default function Demo() {
return (
<div className="mx-auto max-w-3xl p-6">
<PinList pins={demoPins} searchable filterable />
</div>
);
}