Two-step Setup: free React block

Install

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

npx shadcn@latest add https://devl.dev/r/two-step-setup.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 { TwoStepSetup } from "@/components/two-step-setup";

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

Built with

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

coss ui: button, checkbox, otp-field
npm: lucide-react, motion

Props

Read from the Two-step Setup source. Everything is optional unless it says required.

Prop	Type	Default
account	string	"jo@quillstack.io"
issuer	string	"Quillstack"
secret	string	"JBSWY3DPEHPK3PXP"
backupCodes	string[]	["k7q2-9xmd", "p4tn-v8wc", "3hzr-m2ke", "w9fb-q6ys", "a5lc-t7np", "m8dj-4rvx", "z2ke-h9gq", "c6yw-n3fb", "r4mx-8tlz", "e7pv-2jdc"]
verify	(code: string) => Promise<boolean>	async () => true
onCancel	() => void	—
onDone	() => void	—
className	string	—

More in Auth

161

Sign-in Card

Email and password sign-in with a peek toggle, a one-tap switch to magic links, passkey and SSO buttons, a gentle shake on errors and a calm check-your-inbox state.

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.

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.