WelcomeDialog() — ui Function Reference

Architecture documentation for the WelcomeDialog() function in welcome-dialog.tsx from the ui codebase.

Function tsx DesignEngine PreviewSystem

Entity Profile

DesignEngine→ PreviewSystem→ WelcomeDialog() — ui Function Reference

Dependency Diagram

graph TD
  ce5d9c3c_6349_eddc_b26e_029132a93d5f["WelcomeDialog()"]
  4099d823_3d75_f333_e8a0_0c31c755634b["welcome-dialog.tsx"]
  ce5d9c3c_6349_eddc_b26e_029132a93d5f -->|defined in| 4099d823_3d75_f333_e8a0_0c31c755634b
  style ce5d9c3c_6349_eddc_b26e_029132a93d5f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(create)/components/welcome-dialog.tsx lines 19–69

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

  React.useEffect(() => {
    const dismissed = localStorage.getItem(STORAGE_KEY)
    if (!dismissed) {
      setIsOpen(true)
    }
  }, [])

  const handleOpenChange = (open: boolean) => {
    setIsOpen(open)
    if (!open) {
      localStorage.setItem(STORAGE_KEY, "true")
    }
  }

  return (
    <Dialog open={isOpen} onOpenChange={handleOpenChange}>
      <DialogContent
        showCloseButton={false}
        className="dialog-ring max-w-[23rem] min-w-0 gap-0 overflow-hidden rounded-xl p-0 sm:max-w-sm dark:bg-neutral-900"
      >
        <div className="flex aspect-[2/1.2] w-full items-center justify-center rounded-t-xl bg-neutral-950 text-center text-neutral-100 sm:aspect-[2/1]">
          <div className="font-mono text-2xl font-bold">
            <Icons.logo className="size-12" />
          </div>
        </div>
        <DialogHeader className="gap-1 p-4">
          <DialogTitle className="text-left text-base">
            Build your own shadcn/ui
          </DialogTitle>
          <DialogDescription className="text-foreground text-left leading-relaxed">
            Customize everything from the ground up. Pick your component
            library, font, color scheme, and more.
          </DialogDescription>
          <DialogDescription className="text-foreground mt-2 text-left leading-relaxed font-medium">
            Available for Next.js, Vite, TanStack Start, and v0.
          </DialogDescription>
        </DialogHeader>
        <DialogFooter className="p-4 pt-0">
          <DialogClose asChild>
            <Button className="w-full rounded-lg shadow-none">
              Get Started
            </Button>
          </DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}