Modal Dialog Components

Sleek modal dialogs with neon effects, customizable content, and smooth animations. Perfect for confirmations, alerts, and user interactions.

💡 Interactive Demo

Click on the buttons below to open and interact with the modal examples!

Neon Modals

Electric modal dialogs with glowing neon effects in multiple vibrant colors

Feature-rich modals with icons, custom actions, and flexible content layouts

Clean and simple modal variants for everyday use with standard styling

Different modal sizes to fit various content types and design contexts

Install required dependencies:

npm install framer-motion clsx tailwind-merge lucide-react

Import the component: import { Modal } from "@/components/modal"

For compound components, also import: import { ModalTrigger, ModalContent } from "@/components/modal"

Ensure the cn utility exists. See complete installation guide.