# Build your own sign-up page for your React app with Clerk

> There are many routing libraries available for React, but Clerk Docs uses React Router as it's the most popular and well-supported routing library for React. If you're using a different routing library, use these guides as a starting point.

By default, the [<SignIn />](https://clerk.com/docs/react/reference/components/authentication/sign-in.md) component handles signing in and signing up, but if you'd like to have a dedicated sign-up page, this guide shows you how to use the [<SignUp />](https://clerk.com/docs/react/reference/components/authentication/sign-up.md) component to build a custom sign-up page.

**This example assumes you have already set up the sign-in page by following the [custom sign-in-or-up page guide](https://clerk.com/docs/react/guides/development/custom-sign-in-or-up-page.md).**

> If prebuilt components don't meet your specific needs or if you require more control over the logic, you can rebuild the existing Clerk flows using the Clerk API. For more information, see the [custom flow guides](https://clerk.com/docs/guides/development/custom-flows/overview.md?sdk=react).

1. ## Build a sign-up page

   The following example demonstrates how to render the [<SignUp />](https://clerk.com/docs/react/reference/components/authentication/sign-up.md) component on a dedicated sign-up page.

   **React Router**

   > This example assumes you've added React Router to your application. If you haven't, see the [dedicated tutorial](https://clerk.com/docs/react/guides/development/declarative-mode.md).

   Create a `src/sign-up.tsx` file and add the following code:

   filename: src/sign-up.tsx

   ```tsx
   import { SignUp } from '@clerk/react'

   export default function SignUpPage() {
     return <SignUp />
   }
   ```

   **No router**

   > Since this approach uses `window.location.pathname` instead of a routing library, the app will flicker on navigation between pages and steps. For production apps, consider using a routing library like [React Router](https://reactrouter.com/).

   Update your `src/App.tsx` file to add the `SignUpPage()` component and handle the `/sign-up` route.

   filename: src/App.tsx

   ```tsx
   import { Show, SignInButton, SignUpButton, UserButton, SignIn, SignUp } from '@clerk/react'

   function SignInPage() {
     return <SignIn path="/sign-in" />
   }

   function SignUpPage() {
     return <SignUp path="/sign-up" />
   }

   export default function App() {
     const path = window.location.pathname

     if (path === '/sign-in' || path.startsWith('/sign-in/')) {
       return (
         <div>
           <SignInPage />
         </div>
       )
     }

     if (path === '/sign-up' || path.startsWith('/sign-up/')) {
       return (
         <div>
           <SignUpPage />
         </div>
       )
     }

     return (
       <header>
         <Show when="signed-out">
           <SignInButton />
           <SignUpButton />
         </Show>
         <Show when="signed-in">
           <UserButton />
         </Show>
       </header>
     )
   }
   ```
2. ## Configure your sign-up page

   **React Router**

   Update your `src/main.tsx` to import the sign-up page, add a route for it, and add the `signUpUrl` prop to your `<ClerkProvider>`.

   - Set `signUpUrl` to tell Clerk where the `<SignUp />` component is being hosted.
   - Set `signUpFallbackRedirectUrl` as a fallback URL in case users visit the `/sign-up` route directly.
   - Set `signInFallbackRedirectUrl` as a fallback URL in case users select the 'Already have an account? Sign in' link at the bottom of the component.

   Learn more about these props and how to customize Clerk's redirect behavior in the [dedicated guide](https://clerk.com/docs/guides/development/customize-redirect-urls.md?sdk=react).

   filename: src/main.tsx

   ```tsx
   import { StrictMode } from 'react'
   import { createRoot } from 'react-dom/client'
   import { BrowserRouter, Routes, Route, useNavigate } from 'react-router'
   import { ClerkProvider } from '@clerk/react'
   import './index.css'
   import SignInPage from './sign-in.tsx'
   import SignUpPage from './sign-up.tsx'
   import App from './App.tsx'

   function RootLayout() {
     const navigate = useNavigate()

     return (
       <ClerkProvider
         routerPush={(to) => navigate(to)}
         routerReplace={(to) => navigate(to, { replace: true })}
         signInUrl="/sign-in"
         signUpUrl="/sign-up"
         signInFallbackRedirectUrl="/"
         signUpFallbackRedirectUrl="/"
       >
         <Routes>
           <Route path="/" element={<App />} />
           {/* Must be a splat route (catch-all) route to handle nested paths */}
           <Route path="/sign-in/*" element={<SignInPage />} />
           <Route path="/sign-up/*" element={<SignUpPage />} />
         </Routes>
       </ClerkProvider>
     )
   }

   createRoot(document.getElementById('root')!).render(
     <StrictMode>
       <BrowserRouter>
         <RootLayout />
       </BrowserRouter>
     </StrictMode>,
   )
   ```

   **No router**

   Update your `<ClerkProvider>` to add the `signUpUrl` prop alongside the existing props.

   - Set `signUpUrl` to tell Clerk where the `<SignUp />` component is being hosted.
   - Set `signUpFallbackRedirectUrl` as a fallback URL in case users visit the `/sign-up` route directly.
   - Set `signInFallbackRedirectUrl` as a fallback URL in case users select the 'Already have an account? Sign in' link at the bottom of the component.

   Learn more about these props and how to customize Clerk's redirect behavior in the [dedicated guide](https://clerk.com/docs/guides/development/customize-redirect-urls.md?sdk=react).

   filename: src/main.tsx

   ```tsx
   import React from 'react'
   import ReactDOM from 'react-dom/client'
   import App from './App.tsx'
   import { ClerkProvider } from '@clerk/react'

   ReactDOM.createRoot(document.getElementById('root')!).render(
     <React.StrictMode>
       <ClerkProvider
         signInUrl="/sign-in"
         signUpUrl="/sign-up"
         signInFallbackRedirectUrl="/"
         signUpFallbackRedirectUrl="/"
       >
         <App />
       </ClerkProvider>
     </React.StrictMode>,
   )
   ```
3. ## Visit your new page

   Run your project with the following command:

   ```npm
   npm run dev
   ```

   Visit your new custom page locally at [localhost:5173/sign-up](http://localhost:5173/sign-up).

## Next steps

Learn more about Clerk components, how to use them to create custom pages, and how to use Clerk's client-side helpers using the following guides.

- [Protect content and read user data](https://clerk.com/docs/guides/users/reading.md?sdk=react): Learn how to use Clerk's hooks to protect content and read user data in your React app.
- [Prebuilt components](https://clerk.com/docs/reference/components/overview.md?sdk=react): Learn how to quickly add authentication to your app using Clerk's suite of components.
- [Customization & localization](https://clerk.com/docs/guides/customizing-clerk/appearance-prop/overview.md?sdk=react): Learn how to customize and localize the Clerk components.
- [Clerk React SDK Reference](https://clerk.com/docs/reference/react/overview.md?sdk=react): Learn about the Clerk React SDK and how to integrate it into your app.

---

## Sitemap

[Overview of all docs pages](https://clerk.com/docs/llms.txt)