Card

Cards 285

About

LinkCard This component is designed to be a reusable, animated link card. It accepts props for the href, title, description, and imageUrl to allow for easy customization and reuse across your application. The animation is handled by framer-motion for a smooth user experience.

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

// file: demo.tsx
import { LinkCard } from '@/components/ui/card-26'; // Adjust the import path as needed

// Data for the cards to demonstrate reusability
const cardData = [
  {
    title: 'LinkedIn',
    description: "I am not posting that often on LinkedIn, but hey, let's connect.",
    imageUrl: 'https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-DtrNxOB0jqKQ31PsOtpWE6sbvajnjM.png&w=320&q=75', // Replace with your image URL
    href: 'https://www.linkedin.com/',
  },
  {
    title: 'Instagram',
    description: 'No design stuff here. Everyday life, hobbies and my daughter Marta.',
    imageUrl: 'https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-iz7IqPk6hVuaRd4cYUxWTnK6M1CN9Q.png&w=320&q=75', // Replace with your image URL
    href: 'https://www.instagram.com/',
  },
  {
    title: 'Pudding Studio',
    description: 'Check Puddings website. You will find some designs there too.',
    imageUrl: 'https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-PBC8rCnk8vraLCfYgyCEoHw0TJSCGY.png&w=320&q=75', // Replace with your image URL
    href: 'https://pudding.cool/',
  },
];

export default function LinkCardDemo() {
  return (
    <div className="flex h-full w-full items-center justify-center bg-background p-4 md:p-8">
      <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
        {cardData.map((card) => (
          <LinkCard
            key={card.title}
            title={card.title}
            description={card.description}
            imageUrl={card.imageUrl}
            href={card.href}
          />
        ))}
      </div>
    </div>
  );
}