Cards

Cards 162

About

Interactive Travel Card A visually polished card component that uses framer-motion for a 3D hover effect. It's designed to be fully responsive and reusable, with all content and actions supplied through props. The styling is theme-adaptive, using shadcn CSS variables for the outer frame, while the inner "glass" elements are designed to overlay a background image beautifully in both light and dark modes.

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

Code

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

Usage.tsx

import { ProductCard } from "@/components/ui/cards-1";

// Sample data for demonstration
const products = [
  {
    title: "AER Duffle Pack 3",
    category: "Backpacks",
    imageUrl: "https://cdn.21st.dev/assets/mirror/f2/f2c2a8725b51964b7ae8bd7ba2c38b1f5b011cb6a5ce7a80db786233ec2bbf75.jpg",
    href: "#",
  },
  {
    title: "Minimalist Mechanical Watch",
    category: "Watches",
    imageUrl: "https://cdn.21st.dev/assets/mirror/56/56afe16fc413b77d3086d250e07115aaa2f9b135202f555feecf3e01c5514f3f.jpg",
    href: "#",
  },
  {
    title: "Wireless Charging Stand",
    category: "Tech Accessories",
    imageUrl: "https://cdn.21st.dev/assets/mirror/07/077410911e9db97af883f8e39da2f92b70cb2776602ec2cf7bcd34e01f51ff31.jpg",
    href: "#",
  },
  {
    title: "Artisan Ceramic Mug",
    category: "Home Goods",
    imageUrl: "https://cdn.21st.dev/assets/mirror/6c/6cc8a6688e9f188e03c705fb3cee656f87497d177fdcff655b2abfdf8723287e.jpg",
    href: "#",
  },
];

export default function ProductCardDemo() {
  const handleSave = (title: string) => {
    // In a real app, you would handle the save logic here
    console.log(`Saved: ${title}`);
  };

  return (
    <div className="w-full bg-background p-4 sm:p-6 md:p-8">
      <div className="mx-auto max-w-7xl">
        {/* Responsive grid layout */}
        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
          {products.map((product) => (
            <ProductCard
              key={product.title}
              title={product.title}
              category={product.category}
              imageUrl={product.imageUrl}
              href={product.href}
              onSave={() => handleSave(product.title)}
            />
          ))}
        </div>
      </div>
    </div>
  );
}