Signup Card

A responsive and styled signup component with form handling and button customization.

Overview

The Signup card component is a beautifully designed UI element that allows users to create an account with a clean and responsive form. It includes:

Email, Password & Confirm Password fields
Terms & Conditions checkbox
Customizable Button (from our UI system)
Smooth hover and transition effects

Create a new account

Already have an account? Log in

CLI Installation

Ensure your project is using ShadCN and the custom UI system. Then run:

npx shadcn@latest add https://ui-chaiui.vercel.app/registry/signup.json

Manual Installation

To manually set up the SignUp component in your project, follow these steps:

Go to your src directory.
Create a folder structure: components/ui/signupCard.
Inside the signupCard folder, create a file named signup.tsx.
Paste the following code into signup.tsx.

"use client";
 
import React, { FormEvent } from "react";
import Buttons from "../buttons/basicButton";
 
type SignupProps = {
  title?: string;
  className?: string;
};
 
const Signup: React.FC<SignupProps> = ({
  title = "Create a new account",
  className = "",
}) => {
  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
 
    const fullName = (e.currentTarget.elements.namedItem("full-name") as HTMLInputElement)?.value;
    const email = (e.currentTarget.elements.namedItem("email") as HTMLInputElement)?.value;
    const password = (e.currentTarget.elements.namedItem("password") as HTMLInputElement)?.value;
    const confirmPassword = (e.currentTarget.elements.namedItem("confirm-password") as HTMLInputElement)?.value;
 
  };
 
  return (
    <div className={`flex items-center justify-center min-h-screen bg-gray-100 ${className}`}>
      <div className="w-full max-w-md p-8 space-y-6 bg-white rounded-lg shadow-lg transform transition-all duration-500 hover:shadow-2xl hover:scale-105">
        <h2 className="text-2xl font-bold text-center text-gray-900">{title}</h2>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label htmlFor="full-name" className="block text-sm font-medium text-gray-700">
              Full Name
            </label>
            <input
              id="full-name"
              name="full-name"
              type="text"
              required
              placeholder="Enter your full name"
              className="block w-full px-4 py-2 mt-1 text-gray-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
            />
          </div>
          <div>
            <label htmlFor="email" className="block text-sm font-medium text-gray-700">
              Email Address
            </label>
            <input
              id="email"
              name="email"
              type="email"
              required
              placeholder="Enter your email"
              className="block w-full px-4 py-2 mt-1 text-gray-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
            />
          </div>
          <div>
            <label htmlFor="password" className="block text-sm font-medium text-gray-700">
              Password
            </label>
            <input
              id="password"
              name="password"
              type="password"
              required
              placeholder="Create a password"
              className="block w-full px-4 py-2 mt-1 text-gray-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
            />
          </div>
          <div>
            <label htmlFor="confirm-password" className="block text-sm font-medium text-gray-700">
              Confirm Password
            </label>
            <input
              id="confirm-password"
              name="confirm-password"
              type="password"
              required
              placeholder="Confirm your password"
              className="block w-full px-4 py-2 mt-1 text-gray-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
            />
          </div>
          <Buttons type="submit" variant="primary" size="m" className="w-full">
            Sign Up
          </Buttons>
        </form>
        <p className="text-sm text-center text-gray-600">
          Already have an account?{" "}
          <a href="#" className="font-medium text-indigo-600 hover:text-indigo-500">
            Log in
          </a>
        </p>
      </div>
    </div>
  );
};
 
export default Signup;

Usage

Import and use the SignUp component like this:

 
import Signup from "@/components/ui/cards/signup";
 
export default function App() {
  return <Signup title="Create a new account" />;
}

Props

Prop	Type	Description	Default
`title`	`string`	Heading displayed on the signup card	`"Create your account"`
`className`	`string`	Additional Tailwind classes for outer container	`""`