<SignUp />
A beautiful, high-conversion sign-up flow with your choice of required fields and social sign-up providers.
Embedding a <SignUp/> component
You can embed the <SignUp/> component using the Next.js optional catch all route. This allows you to redirect the user inside your application. The <SignUp/> component should be mounted on a public page. An example of this can be found here.
The example below shows the Sign In page mounted on the url /sign-in. For more information on how to implement this, check out our <SignIn/> UI page.
1import { SignUp } from "@clerk/nextjs";2345const SignUpPage = () => (6<SignUp path="/sign-up" routing="path" signInUrl="/sign-in" />7);89export default SignUpPage;
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.
1import { SignUp } from "@clerk/nextjs";2345const SignUpPage = () => (6<SignUp path="/sign-up" routing="path" signInUrl="/sign-in"7redirectUrl="/protectedPage"/>8);910export default SignUpPage;
Props
| Name | Type | Description |
|---|---|---|
| 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. -virtual: Virtual based routing. |
| path? | string | The path where the component is mounted when path-based routing is used. -e.g. /sign-up. This prop is ignored in hash and virtual based routing. |
| 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 Modules, Tailwind, inline 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.