Components
Loading preview...
Here is Dialog component
@jollyshopland
npx shadcn@latest add https://21st.dev/r/jollyshopland/dialog-2import { Button } from "@/components/ui/button-1"
import {
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogOverlay,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog-2"
export default function AlertDialogDemo() {
return (
<DialogTrigger>
<Button variant="outline">Delete...</Button>
<DialogOverlay isDismissable={false}>
<DialogContent role="alertdialog" className="sm:max-w-[425px]">
{({ close }) => (
<>
<DialogHeader>
<DialogTitle>Delete file</DialogTitle>
</DialogHeader>
<DialogDescription>
This will permanently delete the selected file. Continue?
</DialogDescription>
<DialogFooter>
<Button onPress={close}>Cancel</Button>
<Button variant="destructive" onPress={close}>
Delete
</Button>
</DialogFooter>
</>
)}
</DialogContent>
</DialogOverlay>
</DialogTrigger>
)
}