Sign-In Screen
A full auth page that deliberately contains almost nothing but the form — no nav, no marketing, nothing competing with the one job.
The signup form with the proof under it rather than above it — the person who arrived here has already decided, and scrolling past testimonials is friction applied to the wrong reader.
app/signup-page.tsxnpx hoverlab add signup-page
Or over MCP, from your editor's agent — no account needed.
Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.
Trusted by teams shipping every day
4.8out of 5
from 2,298 verified reviews
The real page, rendered in your current theme — every section below is a live block, not a screenshot.
Only want one section? Open it and copy that block instead — browse Authentication.
Want the whole project rather than this one screen? A template ships every route, the theme tokens and the layout.
/**
* The signup screen, with the two things that reduce abandonment on it.
*
* A signup page is usually the form alone, which treats the decision as
* already made. It is not: this is the last screen before someone commits,
* and the objection at that moment is "is this real". So the form sits
* first and the proof sits under it — the logos of people already using it
* and the ratings — rather than on the marketing page the visitor has
* already left.
*
* Order matters and the obvious wrong one is proof first. Somebody who
* arrived here has decided to sign up; making them scroll past a
* testimonial wall to reach the form is friction applied to the person who
* needed the least of it. The form is above the fold and the reassurance
* is there for the person who hesitates.
*/
import * as React from 'react'
import { AuthSignupSplit } from '@/components/auth-signup-split'
import { LogoCloud } from '@/components/logo-cloud'
import { TestimonialRatings } from '@/components/testimonial-ratings'
export default function SignupPage() {
return (
<main className="min-h-screen bg-background text-foreground">
<AuthSignupSplit />
{/* Below the fold on purpose — see the note above. */}
<LogoCloud />
<TestimonialRatings />
</main>
)
}
components/ — each block page has its own copy button.app/signup-page.tsx. The imports already point at @/components/…, so they resolve with no edits.The component, its props, the design tokens it expects and the command that installs it — as one prompt. Paste it into Claude, Cursor, v0 or ChatGPT and what they build around it will match the rest of the catalog instead of inventing its own system.
A full auth page that deliberately contains almost nothing but the form — no nav, no marketing, nothing competing with the one job.
Password reset, plus the magic link beside it — the moment after a password has failed is when somebody is most willing to stop using one.
The second factor with its fallback on the same screen, because a 2FA prompt with no recovery route is a lockout screen wearing a security screen.
A domain field for the employee who signs in daily, and the capability detail below the fold for the IT reviewer who reads it once.
The end of the forgot-password flow, shipped with the state it reaches more than any other screen: a focused error summary linking to each field, beside a strength meter that is a real <meter>.