Card

Features 105

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>
  );
}