Sign-in Modal
A beautiful animated sign-in modal with social authentication options and glass-morphic design.
Installation
Required Dependencies:
First, install the necessary dependencies:
npm install framer-motion lucide-react
Then install the required shadcn/ui components:
npx shadcn-ui@latest add button input
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 | - |
| className | string | Additional classes to style the modal | - |
Features
- 🎨 Glass-morphic design with dark theme
- 🔄 Smooth animations using Framer Motion
- 🌫️ Backdrop blur effect
- 🔑 Social sign-in buttons
- 📱 Responsive layout
- 🎯 Focus and hover states
- 🎨 Clean typography
- 🔒 Password input with "Forgot Password" link
- 📝 Sign-up option for new users
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 - Input background:
bg-slate-800/25
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 }}
>