Login 5 - Social provider buttons stacked above emailPro

A centered sign-in page that leads with a grid of generic social provider buttons using simple line icons, followed by an "or" divider and an email and password form. Use it for consumer or developer products where most people sign in with an existing provider account.

About Login 5

A centered sign-in page that leads with a grid of generic social provider buttons using simple line icons, followed by an "or" divider and an email and password form. Use it for consumer or developer products where most people sign in with an existing provider account.

Login 5 is a pro login block for React, built on shadcn/ui and Tailwind CSS. It ships as 118 lines of TypeScript you own: every piece of copy is a prop with a sensible default, so you can drop it in and replace the content without touching the layout.

  • login
  • sign in
  • social login
  • providers
  • email
  • centered
  • auth

Installation

  1. Add the Chocolate UI registry to your components.json (see the installation guide).
  2. Run the shadcn CLI:
npx shadcn@latest add @chocolate/login-05

Dependencies installed automatically: lucide-react.

Uses: button, input, label, reveal, utils.

Usage

import Login05 from "@/components/blocks/login-05"

export default function Page() {
  return <Login05 />
}

FAQ