Welcome Modal

CTAs 71

About

Welcome modal for new and existing users. Highlights expanded access to premium templates and $299 value lifetime license. Includes clear CTAs like "View templates" and "Get login assistance." Perfect for onboarding or upgrade announcements.

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

Code

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

Usage.tsx

"use client"

import * as React from "react"
import { WelcomeModal } from "@/components/ui/welcome-modal" // Adjust the import path
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"

export default function WelcomeModalDemo() {
  const [isOpen, setIsOpen] = React.useState(false)

  const handleMainAction = () => {
    console.log("Main action clicked!")
    setIsOpen(false)
  }

  const handleHelpAction = () => {
    console.log("Help action clicked!")
    // You can add any action here, like opening a support chat
  }

  return (
    <div className="flex items-center justify-center h-screen bg-background p-4">
      <Button onClick={() => setIsOpen(true)}>Show Welcome Modal</Button>
      <WelcomeModal
        open={isOpen}
        onOpenChange={setIsOpen}
        title={
          <>
            <span role="img" aria-label="wave" className="mr-3 text-3xl">🤘</span>
            Welcome Newcult.co Users
          </>
        }
        description="All newcult.co templates are now included with cult pro"
        mainActionText="View templates"
        onMainActionClick={handleMainAction}
        onHelpClick={handleHelpAction}
      >
        <div className="space-y-4">
          <div>
            <h3 className="font-semibold text-lg">For new users</h3>
            <p className="text-muted-foreground">
              You can find all 9 full stack templates <span className="underline font-medium text-primary cursor-pointer">here</span>. Ship full stack products using faster with our expanded collection.
            </p>
          </div>
          <div>
            <h3 className="font-semibold text-lg flex items-center">
              For existing users
              <Badge variant="secondary" className="ml-2 border border-border font-semibold">$299 Value</Badge>
            </h3>
            <p className="text-muted-foreground">
              All OG newcult.co members have been given the $299 Lifetime License for free. No action required.
            </p>
          </div>
        </div>
      </WelcomeModal>
    </div>
  )
}