Onboarding Checklist

Cards 621

About

Onboarding Checklist Description: A visually engaging card component that displays a checklist of required items alongside a video guide. It's designed to prepare users for an onboarding process, ensuring they have all necessary documents and information ready. The component is fully responsive, theme-adaptive, and includes subtle animations to enhance user experience.

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

Code

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

Usage.tsx

// demo.tsx
import { OnboardingChecklist } from "@/components/ui/onboarding-checklist"; // Adjust the import path

const OnboardingChecklistDemo = () => {
  // Sample data for the component
  const checklistData = {
    title: "Get Started - It only takes 10 minutes",
    description:
      "Please keep these documents and details ready for a smooth sign-up",
    items: [
      { id: 1, text: "PAN card" },
      { id: 2, text: "GST number, if applicable" },
      {
        id: 3,
        text: "FSSAI license",
        helperText: "Don't have a FSSAI license?",
        helperLink: { href: "#", text: "Apply here" },
      },
      {
        id: 4,
        text: "Menu & profile food image",
        helperText: "What is profile food image?",
        helperLink: { href: "#", text: "Refer here" },
      },
      { id: 5, text: "Bank account details" },
    ],
    videoThumbnailUrl: "https://cdn.21st.dev/assets/mirror/1b/1b627f25d3e16b66679cd244e7a7c8d43ec95df26324915c400ee6b230cd9bc6.avif", // Replace with an actual thumbnail URL
    videoUrl: "https://www.youtube.com/embed/3yBgLxgwS1U?si=_MZFE2nm9fevcj76&t=30", // Replace with the embed URL of your video
  };

  return (
    <div className="w-full bg-background flex items-center justify-center p-4">
      <OnboardingChecklist
        title={checklistData.title}
        description={checklistData.description}
        items={checklistData.items}
        videoThumbnailUrl={checklistData.videoThumbnailUrl}
        videoUrl={checklistData.videoUrl}
      />
    </div>
  );
};

export default OnboardingChecklistDemo;