Clerk logo

Clerk Docs

Ctrl + K
Go to clerk.dev

<SignUp />

A beautiful, high-conversion sign-up flow with your choice of required fields and social sign-up providers.

Overview

The <SignUp/> component is used to render a beautiful, high-conversion sign-up flow with your choice of required fields and social sign-up providers. Learn more about the <SignUp/> component, what it does, and how it is used by reading our Sign Up component guide.

Embedding a <SignUp/> component

Using the Next.js optional catch all route, you can embed the <SignUp/> component. This allows you to redirect the user inside your application and handle any redirects.

1

Redirect Example

In some cases you may need to redirect your user to a specific page. In this case, you will want to use the redirectUrl prop.

1

Props

NameTypeDescription
appearance?object

Controls the overall look and feel

routing?RoutingStrategy

The routing strategy for your pages. Supported values are:

-hash (default): Hash based routing.

-path: Path based routing.

path?string

The root URL where the component is mounted on.

redirectUrl?string

Full URL or path to navigate after successful sign in or sign up. The same as setting afterSignInUrl and afterSignUpUrl to the same value.

afterSignUpUrl?string

The full URL or path to navigate after a successful sign up.

afterSignInUrl?string

The full URL or path to navigate after a successful sign in.

signInUrl?string

Full URL or path to the sign up page. Use this property to provide the target of the "Sign In" link that's rendered at the bottom of the component.

Custom Styling

The <SignUp/> component can be highly customized through the appearance prop and can be styled using CSS ModulesTailwindinline CSS objects, or global CSS.

Localization

The <SignUp/> component can be localized using the localization prop. This allows you to customize the language used within the <SignUp/> component.

Was this helpful?

Clerk © 2022