The Dialog

Buttons 2

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 { Field, FieldDescription, FieldLabel } from '@/components/ui/field-1'
import { Input } from '@/components/ui/input'

const CONFIRM_TEXT = 'delete'

export default function Dialog13() {
  const [value, setValue] = useState('')
  const canDelete = value === CONFIRM_TEXT

  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="destructive">Delete project</Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Delete project</DialogTitle>
          <DialogDescription>
            This removes all files, comments, and history. Type{' '}
            <span className="text-foreground font-mono font-medium">
              {CONFIRM_TEXT}
            </span>{' '}
            to confirm.
          </DialogDescription>
        </DialogHeader>
        <Field>
          <FieldLabel htmlFor="dialog-13-confirm">Confirmation</FieldLabel>
          <Input
            id="dialog-13-confirm"
            value={value}
            onChange={(e) => setValue(e.target.value)}
            placeholder={CONFIRM_TEXT}
            autoComplete="off"
          />
          <FieldDescription>
            The destructive action stays disabled until the text matches.
          </FieldDescription>
        </Field>
        <DialogFooter>
          <DialogClose asChild>
            <Button variant="outline">Cancel</Button>
          </DialogClose>
          <Button variant="destructive" disabled={!canDelete}>
            Delete project
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}