Card

Cards 132

About

Displays location-specific highlights with imagery, title, and subtle UI elements like a "like" icon. Ideal for showcasing top destinations, promoting tours, or suggesting user-curated travel picks.

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

Code

How Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import { DestinationCard } from "@/components/ui/card"; // Adjust path as needed

export default function DestinationCardDemo() {
  const [isLiked, setIsLiked] = React.useState(false);

  const handleLike = () => {
    setIsLiked((prev) => !prev);
  };

  return (
    <div className="flex h-screen w-full items-center justify-center bg-background p-4">
      <div className="w-full max-w-sm h-[500px]">
        <DestinationCard
          imageUrl="https://cdn.21st.dev/assets/mirror/d2/d2a2004c38a187a60141a3954f734f3e354a3aebf715c13ded5b4e076765e5df.jpg"
          category="Paris"
          title="Tours France"
          isLiked={isLiked}
          onLike={handleLike}
          aria-label="View details for a tour in Paris, France"
        />
      </div>
    </div>
  );
}