About
Interactive Card A visually engaging card component that features an icon group with hover animations, a step indicator, title, and description. It's designed to be reusable and adapt seamlessly to light and dark themes.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Card to your project and fits it to your theme.
Code
How Card is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { InteractiveCard } from "@/components/ui/card-11"; // Adjust the import path
// This is the demonstration component
export default function InteractiveCardDemo() {
return (
<div className="flex min-h-[500px] w-full items-center justify-center bg-background p-4">
<InteractiveCard
step="STEP 3"
title="Export and Share"
description="Export your video in the best quality and share it on your social media or website."
/>
</div>
);
}