<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.

Usage

1
import { ClerkProvider, SignUp } from '@clerk/clerk-react';
2

3
function MySignUpPage() {
4
  // Render the SignUp component
5
  // somewhere in your app
6
  return <SignUp />;
7
}
8

9
function App() {
10
  return (
11
    // Your app needs to be wrapped with ClerkProvider
12
    <ClerkProvider publishableKey="clerk-pub-key">
13
      <MySignUpPage />
14
    </ClerkProvider>
15
  );
16
}
17
export default App;

1
<html>
2
<body>
3
    <div id="sign-up"></div>
4
    
5
    <script>
6
        const el = document.getElementById("sign-up");
7
        // Mount the pre-built Clerk SignUp component
8
        // in an HTMLElement on your page. 
9
        window.Clerk.mountSignUp(el);
10
    </script>
11
</body>
12
</html>

Interested in path-based routing (instead of the default hash-based routing) or presenting <SignUp/> as a modal? Check out the example code here.

The <SignUp/> component should be public. An example of this can be found here: https://clerk.dev/docs/nextjs/control-components

Props

Name	Type	Description
appearance?	Theme	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.

Customization

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.