Product Definition Card

Cards

About

Product Definition Card A visually engaging card component designed to guide users through a definition or setup process. It features a prominent icon, clear headings, a content card, and a call-to-action button. The component uses framer-motion for smooth, staggered animations and is styled with shadcn/ui theme variables for seamless light and dark mode support.

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

Code

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

Usage.tsx

import { ProductDefinitionCard } from "@/components/ui/product-definition-card";
import { ListChecks, ListTodo } from "lucide-react"; // Using lucide-react for icons

const ProductDefinitionDemo = () => {
  return (
    <div className="flex min-h-[600px] w-full items-center justify-center bg-background">
      <ProductDefinitionCard
        icon={<ListTodo size={28} />}
        title="Define your product"
        description="Provide your product name, description, pricing method, and how customers will receive it."
        cardHeaderIcon={<ListChecks size={14} />}
        cardHeaderText="Define your product"
        cardTitle="Set name, type, and pricing."
        cardDescription="Add a title, short description, and choose file or link as your delivery method."
        buttonText="Share Product"
        onButtonClick={() => alert("Button clicked!")}
      />
    </div>
  );
};

export default ProductDefinitionDemo;