Components
Loading preview...
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.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/card-26// 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>
);
}