Components
Loading preview...
Here is Modal component
@deltacomponents
npx shadcn@latest add https://21st.dev/r/deltacomponents/modal-drop"use client"
import React, { useState } from "react"
import Modal from "@/components/ui/modal-drop"
import { Button } from "@/components/ui/button"
export default function ModalNoOverlayCloseDemo() {
const [isEasyCloseOpen, setIsEasyCloseOpen] = useState(false)
const [isNoEasyCloseOpen, setIsNoEasyCloseOpen] = useState(false)
return (
<div className="flex flex-col items-center justify-center w-full gap-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full max-w-2xl">
{/* Easy Close Modal */}
<div className="flex flex-col items-center gap-3">
<h3 className="text-sm font-medium text-center">
Easy Close Enabled
</h3>
<Button onClick={() => setIsEasyCloseOpen(true)} className="w-40">
Open Modal
</Button>
<p className="text-xs text-muted-foreground text-center">
Click overlay or press ESC to close
</p>
</div>
{/* No Easy Close Modal */}
<div className="flex flex-col items-center gap-3">
<h3 className="text-sm font-medium text-center">
Easy Close Disabled
</h3>
<Button onClick={() => setIsNoEasyCloseOpen(true)} className="w-40">
Open Modal
</Button>
<p className="text-xs text-muted-foreground text-center">
Must use close button to close
</p>
</div>
</div>
{/* Easy Close Modal */}
<Modal
isOpen={isEasyCloseOpen}
onClose={() => setIsEasyCloseOpen(false)}
title="Easy Close Modal"
subtitle="Click overlay or press ESC to close"
allowEasyClose={true}
>
<p className="mb-4 text-muted-foreground">
This modal can be closed by clicking the overlay background or
pressing the ESC key.
</p>
<p className="mb-6 text-muted-foreground">
Try clicking outside the modal or pressing ESC to see it in action.
</p>
<div className="flex justify-end">
<Button onClick={() => setIsEasyCloseOpen(false)} variant="outline">
Close with Button
</Button>
</div>
</Modal>
{/* No Easy Close Modal */}
<Modal
isOpen={isNoEasyCloseOpen}
onClose={() => setIsNoEasyCloseOpen(false)}
title="No Easy Close Modal"
subtitle="Only the close button will work"
allowEasyClose={false}
>
<p className="mb-4 text-muted-foreground">
This modal cannot be closed by clicking the overlay or pressing ESC.
</p>
<p className="mb-6 text-muted-foreground">
Try clicking outside or pressing ESC - nothing will happen. You must
use the close button.
</p>
<div className="flex justify-end">
<Button onClick={() => setIsNoEasyCloseOpen(false)}>
Close Modal
</Button>
</div>
</Modal>
</div>
)
}