Meadow split card

Usage

import { SignInCard } from '@/components/blocks/sign-in-01'


<SignInCard />


// Wire it to your auth
<SignInCard
  brandName="Acme"
  providers={['google', 'github']}
  forgotPasswordHref="/forgot-password"
  signUpHref="/sign-up"
  onSubmit={async ({ email, password, remember }) => {
    await signIn(email, password, { remember })
  }}
  onSocialSignIn={(provider) => signInWith(provider)}
/>

Install

pnpm dlx shadcn@latest add @pastaui-pro/sign-in-01

npx shadcn@latest add @pastaui-pro/sign-in-01

yarn dlx shadcn@latest add @pastaui-pro/sign-in-01

bunx --bun shadcn@latest add @pastaui-pro/sign-in-01

Source

Props

Meadow split card props
Prop	Type	Default	Description
brandName	string	= 'Meadow'	Name shown next to the logo mark and in the app preview.
brandHref	string	= '/'	Where the brand mark links to.
eyebrow	string	= '01 / Sign in'	Mono label above the title. Text after the slash is dimmed. Pass an empty string to hide it.
title	string	= 'Welcome back'	Main heading.
description	string	= Short welcome line	Supporting text under the heading.
providers	('google' \| 'github' \| 'apple')[]	= ['google', 'github', 'apple']	Social sign-in buttons to show. Pass [] to hide them and the divider.
onSubmit	(values: { email: string; password: string; remember: boolean }) => void \| Promise<void>	= —	Called with the form values once they pass validation. The button shows a loading state until it settles.
onSocialSignIn	(provider: 'google' \| 'github' \| 'apple') => void	= —	Called when a social button is pressed.
forgotPasswordHref	string	= '#forgot-password'	Link for the forgot password action.
signUpHref	string	= '#sign-up'	Link for the create account action.
emailLabel / passwordLabel / rememberLabel / submitLabel	string	= 'Email' / 'Password' / 'Keep me signed in' / 'Sign in'	Form labels.
forgotPasswordLabel / signUpPrompt / signUpLabel	string	= 'Forgot password?' / 'New here?' / 'Create an account'	Link text.
className	string	= —	Additional classes for the section.