Onboarding Card

Buttons 30

About

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.

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

Code

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

Usage.tsx

import { 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;