127 Components

Modal Popup

Overlays

Animated popup modal dialog with spring scale transitions, top-level portal rendering, danger/confirm variants, and Escape dismissal.

Installation

Install directly into your project using the shadcn CLI or copy the source code manually.

Requires:framer-motionlucide-reactclsxtailwind-merge

$npx shadcn@latest add "https://boseui.site/r/modal-popup.json"

TypeScript props supported by <ModalPopup />.

13 props

Prop	Type	Default	Description
open	`boolean`	—	Controlled open state.
defaultOpen	`boolean`	`false`	Initial open state when used uncontrolled.
onOpenChange	`(open: boolean) => void`	—	Callback fired when the modal open state changes.
title	`string`	`"Confirm Deployment"`	Primary heading text inside the modal dialog.
description	`string`	—	Supporting description text below the title.
size	`"sm" \| "md" \| "lg"`	`"md"`	Maximum width preset of the modal card.
variant	`"default" \| "danger"`	`"default"`	Visual style for the primary confirmation button.
triggerLabel	`string`	`"Open Popup"`	Label for the default trigger button.
confirmLabel	`string`	`"Confirm"`	Text label for the primary action button.
cancelLabel	`string`	`"Cancel"`	Text label for the cancel button.
hideFooter	`boolean`	`false`	Hides default Cancel/Confirm footer buttons when rendering a custom form.
onConfirm	`() => void`	—	Callback executed when the user clicks the confirm button.
trigger	`React.ReactNode`	—	Custom trigger element used to toggle modal open state

Renders into document.body via React portal at z-[9999] with background scroll locking.
Supports sm, md, and lg width presets plus default and danger confirmation variants.
Works both controlled and uncontrolled with custom trigger and optional hideFooter.