Modal

A versatile, accessible dialog component with built-in design variants. Choose from pre-configured variants (standard, confirmation, form, fullscreen, glass, liquid-glass) to instantly get complete layout, responsive sizing, and interactive buttons—or use composable subcomponents for custom dialogs.

Modal manages all dialog complexities—portals, focus traps, backdrop dismissal, Escape key handling, body scroll locking, and smooth enter/exit animations.

Standard

Complete modal layout with title, badge, body description, and action buttons.

Passvariant"standard": to get the standard update & alert dialog with built-in primary and cancel action triggers.

Active Color

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

npx shadcn@latest add @algorize-ui/modal

components/custom/blocks/ModalBlock.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Step 1 installs this for you. Run it yourself only if you are adding Modal to an existing project by hand. The cn helper and lucide-react are not listed — the installation guide covers them once for every component.

select is a component, not a package — the shadcn CLI installs it as source files.

npx shadcn@latest add @algorize-ui/select

Examples

Form

Header and footer actions with custom form inputs as children.

Passvariant"form": to automatically get header and footer action bars while passing form inputs directly as children.

Confirmation

Compact centered delete confirmation dialog with danger badge.

Passvariant"confirmation": for a centered destructive confirmation prompt with danger icon and confirm/cancel buttons.

Fullscreen

Wide layout with pinned header and multi-action responsive footer.

Passvariant"fullscreen": to get a wide configuration dialog with pinned header, scrollable body, and multi-action footer.

Glass

Translucent frosted-glass treatment with backdrop blur.

Passvariant"glass": to get a translucent card with backdrop blur and glass border highlights.

Liquid Glass

Fluid glassmorphism featuring real SVG displacement mapping, multi-layer specular highlights, and fluid reflections.

Passvariant"liquid-glass": for real liquid glass refraction using SVG displacement mapping, multi-layer specular highlights, and liquid glass buttons.

Features

Discover the Modal's flexible overlay features, designed for important user prompts with accessible focus management and animations.

Variant Presets

Pre-styled variants (standard, confirmation, form, fullscreen, glass, liquid-glass) eliminate boilerplate styling.

Accessible

Built with aria dialog roles, label connections, Escape dismissal, and body scroll locking.

Responsive

Optimized sizing and wrapped action rows that adapt seamlessly across mobile, tablet, and desktop.

Composable

Supports optional subcomponents (ModalHeader, ModalBody, ModalFooter) for fully custom layouts.

Best Practices & Guidelines

Usage Guidelines

Pass variant with title, description, and button labels for fast implementation without manual styling. If you need complete layout freedom, use ModalHeader, ModalBody, and ModalFooter subcomponents directly.

Props Reference

Component	Prop	Type	Default	Description
`Modal`	`isOpen`	`boolean`	required	The open state. Modal is fully controlled — it never holds this itself, so the same modal can be driven by a button, a route or the end of an async call.
`Modal`	`onClose`	`() => void`	required	Called once the close transition has finished, whether it was started by the built-in X, the `Escape` key or a backdrop click. Set `isOpen` to `false` here.
`Modal`	`variant`	`"standard" \| "confirmation" \| "form" \| "fullscreen" \| "glass" \| "liquid-glass" \| "custom"`	`"standard"`	Pre-configured design variant. Automatically styles the layout, sizing, header icon, and action buttons.
`Modal`	`title`	`React.ReactNode`	`undefined`	Dialog headline or title.
`Modal`	`description`	`React.ReactNode`	`undefined`	Body copy or subtitle text.
`Modal`	`badge`	`React.ReactNode`	`undefined`	Status badge or version text displayed in the header.
`Modal`	`icon`	`React.ReactNode`	`undefined`	Custom icon element to override the variant's default icon.
`Modal`	`confirmText`	`string`	`undefined`	Label for the primary confirmation button.
`Modal`	`cancelText`	`string`	`undefined`	Label for the secondary cancel/dismiss button.
`Modal`	`deleteText`	`string`	`undefined`	Label for destructive action button in fullscreen variant.
`Modal`	`onConfirm`	`() => void`	`undefined`	Callback when the confirm button is clicked. Defaults to `onClose`.
`Modal`	`onCancel`	`() => void`	`undefined`	Callback when the cancel button is clicked. Defaults to `onClose`.
`Modal`	`contentClassName`	`string`	`undefined`	Custom CSS classes for the modal panel. Merged with variant defaults.
`Modal`	`overlayClassName`	`string`	`undefined`	Custom CSS classes for the backdrop overlay.
`Modal`	`hideCloseButton`	`boolean`	`false`	Removes the top-right X button (automatically true for `confirmation` variant).
`ModalHeader / Body / Footer`	`children`	`React.ReactNode`	`undefined`	Optional subcomponents for building completely custom modal layouts.