āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/clerk/clerk-docs/guides/development/custom-sign-up-page.remix ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
By default, the <SignIn /> 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 /> component to build a custom sign-up page.
To set up a single sign-in-or-up page, follow the custom sign-in-or-up page guide.
<Steps> ## Build a sign-up page[!NOTE] Just getting started with Clerk and Remix? See the quickstart tutorial!
The following example demonstrates how to render the <SignUp /> component on a dedicated sign-up page using the Remix optional route.
import { SignUp } from '@clerk/remix'
export default function Page() {
return <SignUp />
}
<Tabs items={["SSR Mode", "SPA Mode"]}>
<Tab>
- Set the CLERK_SIGN_UP_URL environment variable to tell Clerk where the <SignUp /> component is being hosted.
- Set CLERK_SIGN_UP_FALLBACK_REDIRECT_URL as a fallback URL incase users visit the /sign-up route directly.
- Set CLERK_SIGN_IN_FALLBACK_REDIRECT_URL as a fallback URL incase users select the 'Already have an account? Sign in' link at the bottom of the component.
Learn more about these environment variables and how to customize Clerk's redirect behavior in the [dedicated guide](/docs/guides/development/customize-redirect-urls).
```env {{ filename: '.env' }}
CLERK_SIGN_UP_URL=/sign-up
CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=/
CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=/
```
</Tab>
<Tab>
- Set the `signUpUrl` property to your `ClerkApp` options to tell Clerk where the `<SignUp />` component is being hosted.
- Set the `signUpFallbackRedirectUrl` property to a fallback URL incase users visit the `/sign-up` route directly.
- Set the `signInFallbackRedirectUrl` property to a fallback URL incase users select the 'Already have an account? Sign in' link at the bottom of the component.
Learn more about these environment variables and how to customize Clerk's redirect behavior in the [dedicated guide](/docs/guides/development/customize-redirect-urls).
```ts {{ filename: 'app/root.tsx' }}
export default ClerkApp(App, {
publishableKey: PUBLISHABLE_KEY,
signUpUrl: '/sign-up',
signUpFallbackRedirectUrl: '/',
signInFallbackRedirectUrl: '/',
})
```
</Tab>
Run your project with the following command:
<CodeBlockTabs options={["npm", "yarn", "pnpm", "bun"]}>
bash {{ filename: 'terminal' }} npm run dev
```bash {{ filename: 'terminal' }}
yarn dev
```
```bash {{ filename: 'terminal' }}
pnpm dev
```
```bash {{ filename: 'terminal' }}
bun dev
```
Visit your new custom page locally at localhost:3000/sign-up. </Steps>
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā