Components
Loading preview...
Frosted Card A visually polished card component that displays an image with layered, stylized text. It features an interactive 3D tilt effect on mouse hover and is fully responsive and theme-adaptive.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/frosted-cardimport { FrostedCard } from "@/components/ui/frosted-card"; // Adjust the import path as needed
/**
* A demo component to showcase the FrostedCard.
*/
export default function FrostedCardDemo() {
return (
<div className="flex h-screen w-full items-center justify-center bg-background p-4">
<FrostedCard
imageUrl="https://plus.unsplash.com/premium_photo-1669799891975-8f668765be09?w=900&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NDF8fEElMjBmcm9zdHklMjBibHVlJTIwaG91c2UlMjByb29mJTIwY292ZXJlZCUyMGluJTIwc25vd3xlbnwwfHwwfHx8MA%3D%3D?q=80&w=1965&auto=format&fit=crop"
title="Frost"
preTitle="Elegance in"
date="06.12.2024"
alt="A frosty blue house roof covered in snow."
// You can control the size of the card from here
className="w-full max-w-[350px] h-[350px] md:max-w-sm md:h-96"
/>
</div>
);
}