Signup Form

A comprehensive signup form component with user registration fields, validation hints, and social login options.

A fully-featured signup form component designed for user registration. Includes fields for name, username, email, and password with built-in validation hints, password visibility toggle, and social authentication buttons for Google and X (Twitter).

Acme

Name

Or continue with

Installation

npx shadcn@latest add @grenish/signup-form

This requires the @grenish registry in your components.json. See the installation guide for setup.

Manual Dependencies

If you prefer manual installation, add the base components:

npx shadcn@latest add button field input-group

Usage

import SignupForm from "@/components/tools/blocks/signup-form"

export default function SignupPage() {
  return <SignupForm />
}

Features

Comprehensive Fields: First name, last name, username, email, and password inputs
Input Validation: Required fields with descriptive placeholders and hints
Password Security: Password visibility toggle and minimum length requirement
Social Authentication: Integrated Google and X (Twitter) login buttons
Responsive Design: Adapts to all screen sizes with proper spacing
Accessible: Semantic HTML with proper labels, descriptions, and ARIA attributes
Icon Integration: Phosphor icons for visual clarity in input groups
Form Structure: Organized with field groups and separators for better UX

Component Code

import { Button } from "@/components/ui/button";
import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldSeparator,
  FieldSet,
} from "@/components/ui/field";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";
import {
  AtIcon,
  PasswordIcon,
  PersonIcon,
  UserIcon,
} from "@phosphor-icons/react/dist/ssr";
import Link from "next/link";
import { GoogleButton } from "../google-button";
import ViewPasswordButton from "../view-password";
import XButton from "../x-button";

export default function SignupForm() {
  return (
    <div className="w-full min-h-dvh flex items-center justify-center">
      <FieldSet className="max-w-sm w-full">
        <h2 className="text-xl font-bold">Acme</h2>
        <FieldGroup>
          <FieldGroup>
            <FieldLabel>Name</FieldLabel>
            <InputGroup>
              <InputGroupAddon>
                <PersonIcon />
              </InputGroupAddon>
              <InputGroupInput placeholder="First Name" required />
              <InputGroupInput placeholder="Last Name" required />
            </InputGroup>
          </FieldGroup>
          <Field>
            <FieldLabel>Username</FieldLabel>
            <InputGroup>
              <InputGroupAddon>
                <UserIcon />
              </InputGroupAddon>
              <InputGroupInput placeholder="username" required />
            </InputGroup>
            <FieldDescription>
              Choose a unique username to identify yourself
            </FieldDescription>
          </Field>
          <Field>
            <FieldLabel>Email</FieldLabel>
            <InputGroup>
              <InputGroupAddon>
                <AtIcon />
              </InputGroupAddon>
              <InputGroupInput type="email" placeholder="email" required />
            </InputGroup>
            <FieldDescription>
              We&apos;ll use this to contact you. We will not share your email
              with anyone else.
            </FieldDescription>
          </Field>
          <Field>
            <FieldLabel>Password</FieldLabel>
            <FieldDescription>
              Must be at least 8 characters long.
            </FieldDescription>
            <InputGroup>
              <InputGroupAddon>
                <PasswordIcon />
              </InputGroupAddon>
              <InputGroupInput
                type="password"
                placeholder="password"
                id="password"
                required
              />
              <ViewPasswordButton inputId="password" />
            </InputGroup>
          </Field>
        </FieldGroup>
        <FieldSet>
          <Field orientation={"horizontal"}>
            <Button>Create Account</Button>
            <Link href={"/signin"}>
              <Button variant={"outline"}>Already have an account?</Button>
            </Link>
          </Field>
        </FieldSet>
        <FieldSeparator />
        <FieldSet>
          <FieldGroup>
            <Field orientation={"horizontal"}>
              <FieldLabel>Or continue with</FieldLabel>
              <GoogleButton />
              <XButton />
            </Field>
          </FieldGroup>
        </FieldSet>
      </FieldSet>
    </div>
  );
}

Notes

The component is a self-contained signup form and does not handle form submission logic
Social login buttons (Google and X) require separate implementation for authentication
Password visibility toggle is handled by the ViewPasswordButton component
Form validation should be implemented in the parent component or via form libraries
The component uses Next.js Link for navigation to the signin page