Components
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.
Loading preview...
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;