Skip to Content
BlocksLoginBlock

LoginBlock

A complete authentication form with email/password fields and social login options.

Import

import { LoginBlock } from "@raydenui/ui/blocks";

Usage

Card Variant

Log In

Enter your credentials to access your account

Or
Are you new here?
<LoginBlock
  variant="card"
  onForgotPassword={() => navigate("/forgot-password")}
  onSubmit={(data) => signIn(data.email, data.password)}
  onSignUp={() => navigate("/sign-up")}
/>

Standard Variant

Log In

Enter your credentials to access your account

Or
Are you new here?
<LoginBlock
  variant="standard"
  onForgotPassword={() => navigate("/forgot-password")}
  onSubmit={(data) => signIn(data.email, data.password)}
  onSignUp={() => navigate("/sign-up")}
/>

Work Email Variant

<LoginBlock
  variant="work-email"
  onForgotPassword={() => navigate("/forgot-password")}
  onSubmit={(data) => signIn(data.email, data.password)}
  onSignUp={() => navigate("/sign-up")}
  showRememberMe={false}
/>

With Social Providers

<LoginBlock
  variant="card"
  socialProviders={["google", "github", "apple"]}
  onSocialLogin={(provider) => handleSocialAuth(provider)}
  onSubmit={(data) => signIn(data.email, data.password)}
/>

Props

PropTypeDefaultDescription
variant"standard" | "card" | "work-email""standard"Form variant
titlestring—Header title
subtitlestring—Header subtitle
onSubmit(data: { email, password }) => void—Form submit handler
socialProviders("google" | "github" | "apple")[]—Social login buttons
onSocialLogin(provider: string) => void—Social login handler
onForgotPassword() => void—Forgot password handler
onSignUp() => void—Sign up link handler
showRememberMebooleantrueShow remember me checkbox
classNamestring—Additional CSS classes

Accessibility

  • Form inputs have proper labels
  • Error messages are announced to screen readers
  • Social login buttons have descriptive labels
  • Focus management on form submission
Last updated on
NotificationsBlockTableBlock