+ ## Build a sign-in-or-up page
+
+ The following example demonstrates how to render the [``](/docs/components/authentication/sign-up) component to allow users to both sign-in or sign-up from a single flow.
+
+ ```tsx {{ filename: 'app/routes/sign-in.tsx' }}
+ import { SignIn } from '@clerk/react-router'
+
+ export default function SignInPage() {
+ return (
+
+
Sign in or up route
+
+
+ )
+ }
+ ```
+
+ ## Configure routes
+
+ React Router expects you to define routes in [`app/routes.ts`](https://reactrouter.com/start/framework/routing). Add the previously created sign-in-or-up page to your route configuration.
+
+ ```tsx {{ filename: 'app/routes.ts', mark: [5] }}
+ import { type RouteConfig, index, route } from '@react-router/dev/routes'
+
+ export default [
+ index('routes/home.tsx'),
+ route('sign-in/*', 'routes/sign-in.tsx'),
+ ] satisfies RouteConfig
+ ```
+
+ ## Configure redirect behavior
+
+ Update your environment variables to point to your custom sign-in-or-up page. Learn more about the available [environment variables](/docs/deployments/clerk-environment-variables).
+
+ ```env {{ filename: '.env' }}
+ CLERK_SIGN_IN_FALLBACK_URL=/
+ CLERK_SIGN_IN_URL=/sign-in
+ ```
+
+ ## Visit your new page
+
+ Run your project with the following command:
+
+
+ ```bash {{ filename: 'terminal' }}
+ npm run dev
+ ```
+
+ ```bash {{ filename: 'terminal' }}
+ yarn dev
+ ```
+
+ ```bash {{ filename: 'terminal' }}
+ pnpm dev
+ ```
+
+
+ Visit your new custom page locally at [localhost:5173/sign-in](http://localhost:5173/sign-in).
+
+
+## Next steps
+
+