Components
Loading preview...
A two-sided card component that flips on hover, revealing content on its back face. Ideal for interactive displays or showcasing additional information.
npx shadcn@latest add https://21st.dev/r/aghasisahakyan1/flipping-cardimport { FlippingCard } from "@/components/ui/flipping-card";
interface CardData {
id: string;
front: {
imageSrc: string;
imageAlt: string;
title: string;
description: string;
};
back: {
description: string;
buttonText: string;
};
}
const cardsData: CardData[] = [
{
id: "design-excellence",
front: {
imageSrc: "https://images.unsplash.com/photo-1561070791-2526d30994b5?w=400&h=300&fit=crop",
imageAlt: "Design Excellence",
title: "Design Excellence",
description: "Beautiful, intuitive designs that create meaningful connections with users.",
},
back: {
description: "We craft exceptional user experiences through thoughtful design, user research, and modern design systems that ensure consistency and accessibility.",
buttonText: "View Portfolio",
},
},
{
id: "data-analytics",
front: {
imageSrc: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=400&h=300&fit=crop",
imageAlt: "Data Analytics",
title: "Data Analytics",
description: "Transform raw data into actionable insights that drive informed decision-making.",
},
back: {
description: "Our data analytics platform provides real-time insights, predictive modeling, and interactive dashboards to help businesses make data-driven decisions.",
buttonText: "Learn More",
},
},
];
export default function FlippingCardDemo() {
return (
<div className="flex gap-4 flex-wrap justify-center p-8">
{cardsData.map((card) => (
<FlippingCard
key={card.id}
width={300}
frontContent={<GenericCardFront data={card.front} />}
backContent={<GenericCardBack data={card.back} />}
/>
))}
</div>
);
}
interface GenericCardFrontProps {
data: CardData["front"];
}
function GenericCardFront({ data }: GenericCardFrontProps) {
return (
<div className="flex flex-col h-full w-full p-4">
<img
src={data.imageSrc}
alt={data.imageAlt}
className="w-full h-auto object-cover flex-grow min-h-0 rounded-md"
/>
<div className="p-2">
<h3 className="text-base font-semibold mt-2">{data.title}</h3>
<p className="text-[13.5px] mt-2 text-muted-foreground">
{data.description}
</p>
</div>
</div>
);
}
interface GenericCardBackProps {
data: CardData["back"];
}
function GenericCardBack({ data }: GenericCardBackProps) {
return (
<div className="flex flex-col items-center justify-center h-full w-full p-6">
<p className="text-[13.5px] mt-2 text-muted-foreground text-center">
{data.description}
</p>
<button className="mt-6 bg-foreground text-background px-4 py-2 rounded-md text-[13.5px] w-min whitespace-nowrap h-8 flex items-center justify-center">
{data.buttonText}
</button>
</div>
);
}