A visually appealing stacked card layout with hover animations and grayscale effects.
Features: • Stacked card layout • Hover animations • Grayscale effects • Custom icons • Responsive design • Dark mode support • Customizable styles • Accessible markup
Notes: • Built with Tailwind CSS for responsive design • Uses CSS Grid for stacking cards • Implements smooth hover animations • Supports custom icons from any library • Includes grayscale hover effects • Maintains consistent spacing • Supports dark mode • TypeScript support with proper types
"use client";
import DisplayCards from "@/components/ui/display-cards";
import { Sparkles } from "lucide-react";
const defaultCards = [
{
icon: <Sparkles className="size-4 text-blue-300" />,
title: "Featured",
description: "Discover amazing content",
date: "Just now",
iconClassName: "text-blue-500",
titleClassName: "text-blue-500",
className:
"[grid-area:stack] hover:-translate-y-10 before:absolute before:w-[100%] before:outline-1 before:rounded-xl before:outline-border before:h-[100%] before:content-[''] before:bg-blend-overlay before:bg-background/50 grayscale-[100%] hover:before:opacity-0 before:transition-opacity before:duration-700 hover:grayscale-0 before:left-0 before:top-0",
},
{
icon: <Sparkles className="size-4 text-blue-300" />,
title: "Popular",
description: "Trending this week",
date: "2 days ago",
iconClassName: "text-blue-500",
titleClassName: "text-blue-500",
className:
"[grid-area:stack] translate-x-12 translate-y-10 hover:-translate-y-1 before:absolute before:w-[100%] before:outline-1 before:rounded-xl before:outline-border before:h-[100%] before:content-[''] before:bg-blend-overlay before:bg-background/50 grayscale-[100%] hover:before:opacity-0 before:transition-opacity before:duration-700 hover:grayscale-0 before:left-0 before:top-0",
},
{
icon: <Sparkles className="size-4 text-blue-300" />,
title: "New",
description: "Latest updates and features",
date: "Today",
iconClassName: "text-blue-500",
titleClassName: "text-blue-500",
className:
"[grid-area:stack] translate-x-24 translate-y-20 hover:translate-y-10",
},
];
function DisplayCardsDemo() {
return (
<div className="flex min-h-[400px] w-full items-center justify-center py-20">
<div className="w-full max-w-3xl">
<DisplayCards cards={defaultCards} />
</div>
</div>
);
}
export { DisplayCardsDemo };
Part of Prism UI — browse the full library on 21st.dev.