Sign in with a one-time code: ask for an email, then a six-digit code that auto-advances, accepts a paste and can be resent.
Installation
pnpm dlx shadcn@latest add https://kagadmodyaa.vercel.app/r/login-04.jsonNeeds a React + Tailwind project set up with shadcn. Copies the block's files into your project, along with the components it uses, so you can edit all of it.
Files
What the command adds to your project, and where.
app/login-04/page.tsxThe page itself, at the route it is meant for. Move or rename it to suit your app.
components/login-04/code-sign-in.tsxA component the page imports. Edit it freely.
It also installs the components it is built from, unless you already have them: Button, Field, Input OTP, Label, Spinner.
Links, copy and the product name are placeholders; swap in your own. Where a block has a form, its submit handler is a stub for your own request.
More in Login
- Login 01A two-column sign-in page: the form on one side, a customer quote on the other.
- Login 02A compact sign-in card on a muted page, with a remember-me option and a real error banner: type "wrong" as the password to see it.
- Login 03Passwordless sign-in: ask for an email, confirm the link is on its way, and resend it after a 30-second timer.
- Login 05Enterprise sign-in: a work email finds the company's SAML single sign-on, with a password as the fallback and a calm security panel beside it.