Animated Modal
A customizable, compound modal component with animated transitions
Installation
Run the following command
npx shadcn@latest add @aceternity/animated-modalprops
ModalProvider
| Prop | Type | Description |
|---|---|---|
| children | ReactNode | The content to be wrapped by the provider. |
Modal
| Prop | Type | Description |
|---|---|---|
| children | ReactNode | The content to be displayed inside the modal. |
ModalTrigger
| Prop | Type | Description |
|---|---|---|
| children | ReactNode | The content to be displayed inside the trigger button. |
| className | string? | Optional additional class names for the trigger button. |
ModalBody
| Prop | Type | Description |
|---|---|---|
| children | ReactNode | The content to be displayed inside the modal body. |
| className | string? | Optional additional class names for the modal body. |
ModalContent
| Prop | Type | Description |
|---|---|---|
| children | ReactNode | The content to be displayed inside the modal content. |
| className | string? | Optional additional class names for the modal content. |
ModalFooter
| Prop | Type | Description |
|---|---|---|
| children | ReactNode | The content to be displayed inside the modal footer. |
| className | string? | Optional additional class names for the modal footer. |
Overlay
| Prop | Type | Description |
|---|---|---|
| className | string? | Optional additional class names for the overlay. |
useOutsideClick
| Prop | Type | Description |
|---|---|---|
| ref | React.RefObject<HTMLDivElement> | The reference to the element to detect outside clicks. |
| callback | Function | The callback function to be called when an outside click is detected. |
Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
70+ templates and component blocks combined
Ready to copy paste component blocks, save days of development time
