║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: '<RedirectToSignUp />' description: The <RedirectToSignUp /> component will navigate to the sign up URL which has been configured in your application instance. The behavior will be just like a server-side (3xx) redirect, and will override the current location in the history stack. sdk: chrome-extension, nextjs, nuxt, react, react-router, remix, tanstack-react-start, vue

The <RedirectToSignUp /> component will navigate to the sign up URL which has been configured in your application instance. The behavior will be just like a server-side (3xx) redirect, and will override the current location in the history stack.

Example

<If sdk="nextjs"> ```tsx {{ filename: 'app/page.tsx' }} import { SignedIn, SignedOut, RedirectToSignUp, UserButton } from '@clerk/nextjs'

export default function Page() { return ( <> <SignedIn> <UserButton /> </SignedIn> <SignedOut> <RedirectToSignUp /> </SignedOut> </> ) }

</If>

<If sdk="react">
```tsx {{ filename: 'pages/index.tsx' }}
import { SignedIn, SignedOut, RedirectToSignUp, UserButton } from '@clerk/clerk-react'

export default function Page() {
  return (
    <>
      <SignedIn>
        <UserButton />
      </SignedIn>
      <SignedOut>
        <RedirectToSignUp />
      </SignedOut>
    </>
  )
}

</If> <If sdk="react-router"> ```tsx {{ filename: 'app/routes/home.tsx' }} import { SignedIn, SignedOut, RedirectToSignUp, UserButton } from '@clerk/react-router'

export default function Home() { return ( <> <SignedIn> <UserButton /> </SignedIn> <SignedOut> <RedirectToSignUp /> </SignedOut> </> ) }

</If>

<If sdk="chrome-extension">
> [!NOTE]
> This component relies on React Router for navigation. Ensure that you have integrated React Router into your Chrome Extension application before using it. [Learn how to add React Router to your Chrome Extension](/docs/guides/development/add-react-router).

```jsx {{ filename: 'src/routes/home.tsx' }}
import { SignedIn, SignedOut, RedirectToSignUp, UserButton } from '@clerk/chrome-extension'

export default function Home() {
  return (
    <>
      <SignedIn>
        <UserButton />
      </SignedIn>
      <SignedOut>
        <RedirectToSignUp />
      </SignedOut>
    </>
  )
}

</If> <If sdk="remix"> ```tsx {{ filename: 'app/routes/_index.tsx' }} import { SignedIn, SignedOut, RedirectToSignUp, UserButton } from '@clerk/remix'

export default function Index() { return ( <div> <SignedIn> <UserButton /> </SignedIn> <SignedOut> <RedirectToSignUp /> </SignedOut> </div> ) }

</If>

<If sdk="tanstack-react-start">
```tsx {{ filename: 'app/routes/index.tsx' }}
import { SignedIn, SignedOut, RedirectToSignUp, UserButton } from '@clerk/tanstack-react-start'
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/')({
  component: Home,
})

function Home() {
  return (
    <div>
      <SignedIn>
        <UserButton />
      </SignedIn>
      <SignedOut>
        <RedirectToSignUp />
      </SignedOut>
    </div>
  )
}

</If> <If sdk="vue"> ```vue {{ filename: 'App.vue' }} <script setup lang="ts"> import { SignedIn, SignedOut, RedirectToSignUp, UserButton } from '@clerk/vue' </script> <template> <SignedIn> <UserButton /> </SignedIn> <SignedOut> <RedirectToSignUp /> </SignedOut> </template> ``` </If> <If sdk="nuxt"> ```vue {{ filename: 'App.vue' }} <script setup lang="ts"> // Components are automatically imported </script> <template> <SignedIn> <UserButton /> </SignedIn> <SignedOut> <RedirectToSignUp /> </SignedOut> </template> ``` </If>

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║