Login to your account
Enter your email below to login to your account
or continue with
Don't have an account?
import { LoginBlock } from "@/components/ui/b-login";
export const BLoginDemo = () => (
<LoginBlock
layout="card"
social={["google", "github"]}
socialStyle="buttons"
onLogin={(data) => console.log("login", data)}
onForgotPassword={() => console.log("forgot")}
onRegister={() => console.log("switch to register")}
/>
);Layouts
Card
A centered form inside a rounded card. Good default for most apps.
<LoginBlock layout="card" />Split
Two-column — form on the left, image slot on the right. Hidden on mobile.
<LoginBlock
layout="split"
image={<img src="/hero.jpg" className="h-full w-full object-cover" alt="" />}
/>Centered
Full-page without a card. Clean for marketing-style pages.
<LoginBlock layout="centered" />Social login
Pass an array of providers. Order is respected.
<LoginBlock social={["apple", "google", "github"]} />Icon-only style
<LoginBlock social={["apple", "google", "github"]} socialStyle="icons" />Social above the form
<LoginBlock social={["google"]} socialPosition="top" />With logo
import { Logo } from "@/components/site/logo";
<LoginBlock logo={<Logo />} />Terms of service
<LoginBlock showTerms />Props
Specs
# Mint — Login Block Specs
## Component
- name: b-login
- file: registry/mint/b-login.tsx
- installs to: components/ui/b-login.tsx
- dependencies: none
- registryDependencies: button, input, label, e-auth
## What is it
A full-page authentication block for email + password login. Handles 3 layout
variants (card, split, centered) and composes shared auth elements from e-auth.
Use b-login for authentication screens; use individual form components for
inline or embedded login flows.
## Visual identity
Mint's fresh green palette throughout. Card layout has a subtle rounded-xl
border on --card background, with soft glassy (60% opacity) borders. Split
layout uses --muted for the image panel. All interactive elements inherit
their theme via composed components (Button, Input).
## Design tokens
--background: oklch(1 0 0) / oklch(0.145 0 0) — page background
--card: oklch(1 0 0) / oklch(0.205 0 0) — card surface (card layout)
--muted: oklch(0.96 0.02 155) / oklch(0.2 0.03 155) — image panel (split layout)
--border: oklch(0.88 0.04 155 / 60%) / oklch(0.32 0.05 155 / 40%) — card border
--muted-foreground: oklch(0.52 0.06 155) / oklch(0.6 0.06 155) — helper text
## Sub-components
- LoginBlock → root; drives layout switching; data-slot="login-block" data-layout="[layout]"
- LoginForm → internal form with email + password fields; not exported
- AuthHeader → from e-auth: logo + heading + description
- AuthSocial → from e-auth: social provider buttons or icons
- AuthDivider → from e-auth: "or continue with" separator
- AuthFooter → from e-auth: switch link + optional terms
## Variants
- card → centered max-w-sm card with rounded-xl border and shadow-sm
- split → two-column grid; form left, image right (hidden on mobile)
- centered → full-page flex, no card wrapper; logo floats top-center
## States
- submit: calls onLogin with { email, password }; no built-in loading state — handle externally
- social button click: calls onSocialLogin(provider)
- forgot password: calls onForgotPassword or navigates to forgotPasswordHref
- switch: calls onRegister or navigates to registerHref
## Conventions
- Blocks use the b- prefix to distinguish from regular components
- Pair with b-register for a complete auth flow
- Provide either onX callbacks (SPA) or xHref props (multi-page) — not both
- For loading/error states, wrap the onLogin handler with your own state management
- The image slot in split layout is optional — panel shows bg-muted when empty
- social prop order determines render orderInstallation
GIN Design Plugin$ npx shadcn add https://gin-design.vercel.app/b-login