Authentication
The six screens of an auth flow: sign in, sign up, password recovery, email verification, and 2FA.
These blocks hold their own form state and validation so they can be dropped into a route and demoed immediately, but they never talk to an auth provider. Everything real happens in the callbacks you pass: onSubmit, onResend, onVerify.
Statuses
initialStatus covers the states an auth screen actually passes through, including skeleton for the gap before your provider has initialised. It's the initial value — the block manages the status itself afterwards, so drive real failures by re-mounting with a new status or by owning the form yourself.
Welcome back
Enter your credentials to access your account
Sign up
Create an account
Get started — it only takes a minute.
Recovery and verification
Reset password
Enter your email and we’ll send you a link to reset your password.
Set new password
Your new password must be different from previous passwords.
Verify your email
We sent a 6-digit code to sam@sakani.com.
Two-factor authentication
Enter the 6-digit code from your authenticator app.
Copy the source
Blocks are composition examples, not configurable components. Rather than adding props for a layout they don't support, copy the file into your own project and edit it: change the columns, swap the sample data, delete the parts you don't need. Nothing here introduces a primitive you can't already import on its own.