Sign-in Card: free React block

Install

Run this in any project set up for the shadcn CLI. It copies the Sign-in Card source into your components folder, so the code is yours to change.

npx shadcn@latest add https://devl.dev/r/sign-in-card.json

Use it

Import it and render it. Every prop has a typed default, so it works straight away, and you pass your own data when you’re ready.

import { SignInCard } from "@/components/sign-in-card";

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

Built with

A free React block in the Auth collection, written in TypeScript with Tailwind CSS on coss ui. MIT licensed.

coss ui: button, input, input-group, spinner
npm: lucide-react, motion

Props

Read from the Sign-in Card source. Everything is optional unless it says required.

Prop	Type	Default
product	string	"Larkspur"
logo	ReactNode	—
providers	SignInProvider[]	[]
defaultEmail	string	""
defaultMethod	SignInMethod	"password"
resendAfter	number	30
onPasswordSignIn	(email: string, password: string) => Promise<SignInResult>	async () => ({ ok: true })
onSendLink	(email: string) => Promise<void>	async () => {}
onProvider	(provider: SignInProvider) => void	—
onForgotPassword	(email: string) => void	—
onCreateAccount	() => void	—
className	string	—

More in Auth

162

Split Sign-up

A two-panel sign-up: the form validates as you go (live email check, password rules that tick off, a strength bar) beside a product glimpse and rotating customer quotes that fold below on phones.

163

Two-step Setup

Turn on authenticator-app 2FA in three calm steps: scan a coded QR or copy the setup key, type the six digits, then copy or download backup codes before you can finish.

164

Waitlist

A join-the-line card: your position rolls down digit by digit, a referral link to copy, and friends who sign up drop into slots while you jump toward the next wave.