Components
Loading preview...
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.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/welcome-modal"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>
)
}