Components
Loading preview...
This is a dialog component
npx shadcn@latest add https://21st.dev/r/lyanchouss/one-dialogimport { Trash2Icon } from 'lucide-react'
import { Button } from '@/components/ui/button'
import {
Dialog,
DialogClose,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from '@/components/ui/dialog'
export function Dialog03() {
return (
<Dialog>
<DialogTrigger asChild>
<Button variant="destructive">Delete account</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-md">
<DialogHeader className="items-center text-center">
<div className="bg-destructive/10 text-destructive flex size-12 items-center justify-center rounded-full mb-3">
<Trash2Icon className="size-6" />
</div>
<DialogTitle className="text-xl">Delete account</DialogTitle>
<DialogDescription className="text-center">
This permanently removes your profile, projects, and billing
history.{' '}
<span className="text-foreground font-medium">
This cannot be undone.
</span>
</DialogDescription>
</DialogHeader>
<DialogFooter className="flex-col gap-2 sm:flex-col">
<Button variant="destructive" className="w-full">
Delete account
</Button>
<DialogClose asChild>
<Button variant="outline" className="w-full">
Cancel
</Button>
</DialogClose>
</DialogFooter>
</DialogContent>
</Dialog>
)
}
export default Dialog03