Logout Modal
A beautiful animated logout confirmation modal with glass-morphic design.
Installation
Required Dependencies:
First, install the necessary dependencies:
npm install framer-motion
Then install the required shadcn/ui components:
npx shadcn-ui@latest add button
Update
tailwind.config.js
No additional Tailwind configuration is required for this component.
Props
| Prop | Type | Description | Default |
|---|---|---|---|
| isOpen | boolean | Controls the visibility of the modal | false |
| onClose | function | Callback function when modal closes | - |
| onLogout | function | Callback function when sign out is confirmed | - |
| className | string | Additional classes to style the modal | - |
Features
- 🎨 Glass-morphic design with dark theme
- 🔄 Smooth animations using Framer Motion
- 🌫️ Backdrop blur effect
- ✨ Clean and minimal interface
- 📱 Responsive layout
- 🎯 Focus and hover states
- 🎨 Clean typography
- 🔒 Confirmation before logout
- ⚡ Lightweight and performant
Customization
You can customize the appearance of the modal by modifying the following classes:
- Background color:
bg-[#0A0F1C]/90 - Border color:
border-slate-800/50 - Button colors:
bg-slate-800/50 - Icon background:
bg-slate-800/50
The animation parameters can be adjusted through the Framer Motion props:
<motion.div
initial={{ opacity: 0, scale: 0.95 }}
animate={{ opacity: 1, scale: 1 }}
exit={{ opacity: 0, scale: 0.95 }}
transition={{ type: "spring", duration: 0.5 }}
>
The modal width can be adjusted by modifying the max-w-sm class in the modal container. For a wider modal, you can use classes like max-w-md or max-w-lg.