Components
Loading preview...
Product Onboarding Card This component provides a structured layout for a feature or step in a process, guiding the user with a clear title, description, and call-to-action.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/onboarding-cardimport { ProductOnboardingCard } from "@/components/ui/onboarding-card";
import { Menu, FileText } from "lucide-react"; // Using lucide-react for icons
const ProductOnboardingDemo = () => {
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background">
<ProductOnboardingCard
mainIcon={<Menu className="h-7 w-7 text-white" />}
title="Define your product"
description="Provide your product name, description, pricing method, and how customers will receive it."
cardIcon={<FileText className="h-4 w-4 text-muted-foreground" />}
cardHeaderLabel="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 ProductOnboardingDemo;