Login Card
Modern login card with animated background, social auth options, and elegant design
Install the component using the shadcn CLI:
npx shadcn@latest add @uimix/login-cardThis will automatically add the component to your project.
Copy and paste the following code into your project:
Loading source…
Make sure you have the required animations in your tailwind.config.js:
// No additional configuration needed// Animations are included inline in the componentAdd the required classes to your global stylesheet:
/* Animations are dynamically generated within the component */Dependencies
npm install lucide-reactFeatures
- Animated Background: Particle effects and geometric lines create visual interest
- Social Authentication: GitHub and Google login options
- Password Visibility Toggle: Eye icon to show/hide password
- Remember Me: Checkbox for persistent sessions
- Responsive Design: Adapts perfectly to all screen sizes
- Dark Theme: Modern monochrome design with zinc color palette
- Backdrop Blur: Glass morphism effect on the card
Usage
Loading source…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | undefined | Additional CSS classes to apply to the root element |