Components
Loading preview...
Here is Modal component
@deltacomponents
npx shadcn@latest add https://21st.dev/r/deltacomponents/modal-drop"use client"
import * as React from "react"
import { useState } from "react"
import Modal from "@/components/ui/modal-drop"
import { Button } from "@/components/ui/button"
export default function ModalBlurDemo() {
const [isOpen, setIsOpen] = useState(false)
const openModal = () => setIsOpen(true)
const closeModal = () => setIsOpen(false)
return (
<div className="flex flex-col items-center justify-center w-full gap-4">
<Button onClick={openModal} className="w-40">
Open Blur Modal
</Button>
<Modal
isOpen={isOpen}
onClose={closeModal}
title="Blur Modal"
subtitle="This modal uses blur background effect"
type="blur"
animationType="scale"
borderBottom
showCloseButton
>
<p className="mb-4 text-muted-foreground">
This modal uses a blur effect for the background. Instead of a dark
overlay, it applies a semi-transparent blur to the content behind the
modal.
</p>
<p className="mb-6 text-muted-foreground">
This creates a frosted glass effect that keeps the context visible but
out of focus, directing attention to the modal content while
maintaining visual connection with the page.
</p>
<div className="flex justify-end">
<Button onClick={closeModal} variant="outline" className="mr-2">
Cancel
</Button>
<Button onClick={closeModal}>Confirm</Button>
</div>
</Modal>
</div>
)
}