The Dialog

Buttons 1

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

'use client'

import { useState } from 'react'

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

const images = [
  {
    id: '1',
    src: 'https://cdn.21st.dev/assets/mirror/df/df287a5facf42325d1f1740d3f7aa5e9e7aba6bab4910ada50131218de00013e.jpg',
    alt: 'Gradient abstract',
  },
  {
    id: '2',
    src: 'https://cdn.21st.dev/assets/mirror/03/037be5b41225085956af0ec4dba27ee2c9ead3f21075854af6ac4e0cccb76217.jpg',
    alt: 'Soft shapes',
  },
  {
    id: '3',
    src: 'https://cdn.21st.dev/assets/mirror/23/238790179018ce18bfa0a92c9aa816b28d0ab23853898e7c67202a8ceee9a26a.jpg',
    alt: 'Blue waves',
  },
  {
    id: '4',
    src: 'https://cdn.21st.dev/assets/mirror/a0/a0ea47db06a3c131378bee578b9a53747fc7c257e607c38600da4a6f58ab3da1.jpg',
    alt: 'Purple flow',
  },
  {
    id: '5',
    src: 'https://cdn.21st.dev/assets/mirror/fa/faa2cc262248881081d074c24f00dfda015f1c01d5dd0410022b645dab730ff1.jpg',
    alt: 'Color mesh',
  },
  {
    id: '6',
    src: 'https://cdn.21st.dev/assets/mirror/7b/7bb2369921c68576c31735a2bcb259ec2aa4c1b497bbadc005b9464bedadfeca.jpg',
    alt: 'Warm gradient',
  },
]

export default function Dialog15() {
  const [selected, setSelected] = useState(images[0].id)

  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="outline">Choose cover</Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Choose image</DialogTitle>
          <DialogDescription>
            Pick a cover image for your project page.
          </DialogDescription>
        </DialogHeader>
        <div className="grid grid-cols-3 gap-2">
          {images.map((image) => (
            <button
              key={image.id}
              type="button"
              onClick={() => setSelected(image.id)}
              className={cn(
                'focus-visible:ring-ring relative aspect-square overflow-hidden rounded-lg border-2 focus-visible:ring-2 focus-visible:outline-none',
                selected === image.id
                  ? 'border-primary ring-primary/20 ring-2'
                  : 'border-transparent',
              )}
            >
              <img
                src={image.src}
                alt={image.alt}
                className="size-full object-cover"
              />
            </button>
          ))}
        </div>
        <DialogFooter>
          <DialogClose asChild>
            <Button variant="outline">Cancel</Button>
          </DialogClose>
          <Button>Choose</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}