Login and sign up
Sign in and sign up pages, from a compact code card to full screen split and immersive layouts.
pnpm dlx shadcn@latest add @uiarc/signup-formSign upAn account creation flow with field validation, password strength, and a clear completion state.
Live block · sample data
- The client side of an email and password sign-up.
- Sign-up pages that should show password strength and a product updates opt-in.
- Flows that want an in-place success panel after the account is created.
- Use sign-in or login-split for returning users.
- Use password-field alone when the form is already built.
- Use otp-input for passwordless or code-based sign-up.
Installation
Add Login and sign up (Sign up) with the shadcn CLI, or copy the source by hand.
pnpm dlx shadcn@latest add @uiarc/signup-formAdds the block and its local dependencies, and installs motion, lucide-react. First time? Add the @uiarc registry to components.json, or use the full URL:
Usage
Use this as the client side of an account flow. Supply an onSubmit handler that creates the account and handles server errors.
example.tsx
import { SignupForm, type SignupDetails } from "@/components/arc/blocks/signup-form/signup-form"; export function SignUpPage() { const [error, setError] = useState<string | null>(null); async function create(details: SignupDetails) { const res = await fetch("/api/sign-up", { method: "POST", body: JSON.stringify(details) }); if (!res.ok) setError("That email is already registered."); } return <SignupForm onSubmit={create} serverError={error} onProvider={provider => signIn(provider.toLowerCase())} />;}API reference
2 parts. The first is the root.
SignupForm
An account creation card: Google, Apple, and GitHub buttons, then name, email, password with strength, a product updates opt-in, and a completion state whose check draws itself in.
PropTypeDefaultDescription
onSubmit(details: SignupDetails) => void | Promise<void>–Called with valid details. Awaited; a thrown error shows a submit error.serverErrorstring | null–External error message shown under the form, for example from your auth API.onProvider(provider: "Google" | "Apple" | "GitHub") => void–Called when a provider button is pressed. Start your OAuth redirect here. Without a redirect, the block simulates the provider and shows the completion state after 900ms.SignupDetails
Type passed to onSubmit.
PropTypeDefaultDescription
nameRequiredstring–Full name, at least 2 characters.emailRequiredstring–Email that passed a basic format check.passwordRequiredstring–Password of 8 or more characters.productUpdatesRequiredboolean–Opt-in checkbox state.- Invalid fields set aria-invalid and point aria-describedby at their message.
- Field and submit errors use role="alert"; the success panel uses role="status".
- Provider buttons have labels like "Sign up with Google"; while one is busy the others are aria-disabled.
- Password strength is shown as text, not only color.
- The card height springs between the form and the completion panel, which slides in while the form exits.
- The completion ring and check draw themselves in with pathLength.
- Reduced motion drops the offsets and blur and uses zero durations.
- Container query: below 380px of card width the padding, heading, and provider button text shrink so fields keep their width.
- Below 480px viewport width the card uses the smaller panel radius.
- Validation is local and synchronous; the card height is a motion value measured with a layout effect, so swapping steps does not reflow the page.
- Strength bars animate with CSS transitions, turned off under reduced motion.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use as the client side of an email and password sign-up with optional social providers.
- Wire onProvider to your auth library's OAuth sign-in; the built-in provider flow is a simulation.
- Validation is local; keep server checks in onSubmit and pass their message through serverError.
- Composes Arc Button, Checkbox, Input, and PasswordField.
The full library index for assistants is at /llms.txt.
Onboarding illustrationProBlockA compact onboarding card whose line illustration morphs from folder to files, team, and badge.Two-factor setupProBlockA two-factor setup card where you scan a real, working authenticator QR code, type the 6-digit code into slots that move to the next box on their own, and save your backup codes before it turns on. Every step shares one fixed-size card, so it moves between steps with a short slide and never changes size.Magic linkProBlockA passwordless sign in card where an email with inline validation and typo fixes sends a magic link, and the card crossfades in place to a check your inbox step with a sealing envelope, Gmail and Outlook shortcuts and a resend countdown. Google and GitHub sign in sit above, with their real marks.