> ## Documentation Index
> Fetch the complete documentation index at: https://iam-docs.razi.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# <SignUp />

## Overview

**SignUp** component is a user interface element for handling user sign-up. It includes steps for sign-up,
email verification, and provides callbacks for handling sign-up completion and navigation to sign-in page.

<Warning>You can not customize this component layout structure, design or content.</Warning>

<Frame caption="<SignUp /> component first step">
  <img width="400" noZoom src="https://mintlify.s3-us-west-1.amazonaws.com/locai-a2c1f1e4/libraries/react/components/images/sign-up/sign-up-form.webp" alt="<SignUp /> component first step" />
</Frame>

<br />

<Frame caption="<SignUp /> component verify step">
  <img width="400" noZoom src="https://mintlify.s3-us-west-1.amazonaws.com/locai-a2c1f1e4/libraries/react/components/images/sign-up/sign-up-verify.webp" alt="<SignUp /> component verify step" />
</Frame>

## Props

<ResponseField name="onComplete" type="callback" required>
  A callback function that is called when the sign-up process is successfully completed.
</ResponseField>

<ResponseField name="onSignInClick" type="callback">
  An optional callback function that is called when the user clicks the sign-in link.
</ResponseField>

## Example Usage

<Note>
  **Reference**:

  * Demo Next.js project [source code](https://github.com/LocAI1/iam-javascript-sdk/blob/main/apps/iam-react-example)
  * SignUp page demo [source code](https://github.com/LocAI1/iam-javascript-sdk/blob/main/apps/iam-react-example/src/components/sign-up.tsx)
</Note>

```typescript sign-up.tsx

'use client';

import { useCallback } from 'react';
import { useRouter } from 'next/navigation';

import { SignUp } from "@locai1/iam-react";

import { HOME_PAGE, SIGN_IN_PAGE } from '@/const';

export const SignUpComponent = () => {
  const { push } = useRouter();

  const handleSignUpComplete = useCallback(() => {
    push(HOME_PAGE);
  }, []);

  const handleSignInClick = useCallback(() => {
    push(SIGN_IN_PAGE);
  }, []);

  return (
    <div className="flex items-center justify-center min-h-screen bg-gray-100">
      <SignUp
        onComplete={handleSignUpComplete}
        onSignInClick={handleSignInClick}
      />
    </div>
  );
};

```