A flexible modal component with multiple animation types, positioning options, and accessibility features built with Framer Motion.
Overview
The Modal component creates focused user interactions by overlaying content above the main interface, making it perfect for confirmations, forms, and important announcements that require immediate attention. It supports multiple animation styles and background effects, ensuring smooth transitions that feel natural and polished. Essential for guiding user workflow and preventing accidental actions through controlled interaction patterns.
Installation
pnpm dlx shadcn@latest add https://deltacomponents.dev/r/modal.json
Usage
"use client"
import { useState } from "react"
import { Button } from "@/components/ui/button"
import Modal from "@/registry/components/modal"
export function Component() {
const [isOpen, setIsOpen] = useState(false)
return (
<>
<Button onClick={() => setIsOpen(true)}>Open Modal</Button>
<Modal
isOpen={isOpen}
onClose={() => setIsOpen(false)}
title="Example Modal"
subtitle="This is a subtitle"
>
<p>Modal content goes here...</p>
</Modal>
</>
)
}API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
isOpen | boolean | - | Whether the modal is open (required) |
onClose | () => void | - | Function to call when modal should close (required) |
children | ReactNode | - | Content to display in the modal (required) |
allowEasyClose | boolean | true | Whether clicking overlay or pressing ESC closes modal |
title | string | undefined | Optional title for the modal |
subtitle | string | undefined | Optional subtitle for the modal |
type | "blur" | "overlay" | "none" | "overlay" | Background type for the modal |
showCloseButton | boolean | true | Whether to show the close button |
showEscText | boolean | true | Whether to show ESC text indicator next to close button |
borderBottom | boolean | true | Whether to show border below header |
animationType | "drop" | "scale" | "scale" | Animation type for modal appearance |
position | number | 0 | Vertical position adjustment |
disablePadding | boolean | false | Whether to disable default padding |
className | string | "" | Additional CSS classes |
Examples
Drop Animation
Modal with a gentle drop-in animation from the bottom.
Blur Background
Modal with a blurred background effect for enhanced focus.
No Easy Close
Modal that prevents accidental closing via overlay clicks or ESC key.
Easy Close Enabled
Click overlay or press ESC to close
Easy Close Disabled
Must use close button to close
Custom Header
Modal with custom title and subtitle for structured content presentation.
Basic Header
Simple title and subtitle
Custom Header
Rich content with icons
Minimal Modal
Clean modal design without header or close button, perfect for notifications and simple confirmations.
