The Dialog

Heroes 12

About

Here is Dialog components

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

Code

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

Usage.tsx

import { Button } from '@/components/ui/button'
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from '@/components/ui/dialog'

const heroImage =
  'https://cdn.21st.dev/assets/mirror/ca/ca5878587606595e310f942bc6a7a308d80c7819aa5339f9f1093541aff5195c.jpg'

export default function Dialog09() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="outline">Welcome tour</Button>
      </DialogTrigger>
      <DialogContent
        className="gap-0 overflow-hidden p-0 sm:max-w-sm"
        showCloseButton={false}
      >
        <div className="h-50 w-full overflow-hidden">
          <img
            src={heroImage}
            alt="Abstract gradient workspace"
            className="size-full object-cover"
          />
        </div>
        <div className="flex flex-col gap-6 px-6 pt-5 pb-6">
          <DialogHeader className="gap-1.5 text-left">
            <DialogTitle>Welcome to Flexnative</DialogTitle>
            <DialogDescription>
              Copy-paste patterns and blocks for Next.js. Start from the gallery
              or install with the CLI.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter className="flex-col gap-2 sm:flex-col">
            <Button className="w-full">Get started</Button>
            <DialogClose asChild>
              <Button variant="ghost" className="w-full">
                Skip for now
              </Button>
            </DialogClose>
          </DialogFooter>
        </div>
      </DialogContent>
    </Dialog>
  )
}