Login with Social Buttons

​

Installation

npx shadcn@latest add https://blocks.so/r/login-04

​

Dependencies

• button
• input
• label
• separator

​

Usage

import Login04 from "@/components/login-04";

export default function LoginPage() {
  return <Login04 />;
}

​

Features

• Custom logo component with brand name
• Dual social login buttons (GitHub and Google)
• Side-by-side social button layout on desktop
• Email and password form fields
• Sign-up link in header
• Password reset link
• Custom SVG icons for GitHub and Google
• Responsive flex layout
• Dark mode support
• Accessible button labels

​

Component Structure

• Header with logo and brand name “Acme”
• Main heading and sign-up prompt
• Two-column social login buttons
• Horizontal separator with “or” text
• Traditional email/password form
• Bottom password reset link
• Professional spacing and typography

​

Social Login Options

​

GitHub Button

• Custom GitHub icon
• “Login with GitHub” label
• Outline button style

​

Google Button

• Custom Google icon
• “Login with Google” label
• Outline button style

​

Customization

• Replacing the logo with your brand
• Adding more social providers
• Modifying button arrangement
• Customizing color scheme
• Adding form validation
• Implementing OAuth flows
• Adjusting responsive breakpoints