Frosted Card

Cards 39

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Frosted Card to your project and fits it to your theme.

Code

How Frosted Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { 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://cdn.21st.dev/assets/mirror/65/65c09f1ee7b85295ee2cc5afc7a995ba2605ea15c8acb53adf1eb48d4f164b22.jpg"
        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>
  );
}