Skip to content

Signup Page

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.

3 blocks34 lineslucide-reactAdded 9 Sept 2026

What's included

  • app/signup-page.tsx
  • 3 blocks it is built from, installed with it
  • Needs lucide-react

Works with

  • React
  • Next.js
  • Tailwind CSS
  • TypeScript

npx hoverlab add signup-page

Or over MCP, from your editor's agent — no account needed.

License

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.

Was this useful?

Preview

Create your account

Free to start. No card required.

  • At least 8 characters— not yet met
  • One number— not yet met
  • One uppercase letter— not yet met

By continuing you agree to the Terms and Privacy Policy.

Already have an account? Sign in

Trusted by teams shipping every day

NorthwindContosoInitechUmbrellaGlobexSoylentHooliVandelay

Rated by the people paying for it

4.8out of 5

from 2,298 verified reviews

5 stars
1,783
4 stars
402
3 stars
71
2 stars
24
1 star
18
  • 4.8on G2
  • 4.7on Capterra
  • 4.9on Product Hunt

The real page, rendered in your current theme — every section below is a live block, not a screenshot.

Built from

All blocks
  1. Split Signup With ProofRegistration form beside a testimonial panel, with live password rules and a proof column that drops rather than stacks on mobile.
  2. Seamless Logo MarqueeAn infinite horizontal logo scroll with masked edges, a pause-on-hover affordance and a reduced-motion fallback that wraps instead of moving.
  3. Aggregate Rating BreakdownA mean score over a stated sample with all five rating bands left visible, including the one-star row — proof that survives the objection every hand-picked quote wall invites.

Only want one section? Open it and copy that block instead — browse Authentication.

Shipped in these templates

Want the whole project rather than this one screen? A template ships every route, the theme tokens and the layout.

Source

app/signup-page.tsx
/**
 * 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>
  )
}

How to use it

  1. 1. Copy each of the 3 blocks above into components/ — each block page has its own copy button.
  2. 2. Drop this file at app/signup-page.tsx. The imports already point at @/components/…, so they resolve with no edits.
  3. 3. Delete the sections you do not want. Every block takes props, so the copy changes without the layout moving.

For AI

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.

See the prompt

More Auth Screens

Open the full page for this page

Forgot Password

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.

Auth Screens2 blocks46 lines
Open the full page for this page

Two-Factor Challenge

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.

Auth Screens2 blocks40 lines
Open the full page for this page

SSO Sign In

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.

Auth Screens2 blocks31 lines
Open the full page for this page

Reset Password

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>.

Auth Screens2 blocks36 lines