# Sign-up components

> This feature is deprecated. With the release of [Clerk Core 3](https://clerk.com/changelog/2026-03-03-core-3.md), the redesigned [hooks](https://clerk.com/docs/reference/hooks/overview.md) are the recommended replacement for building custom flows. They expose stateful objects, step methods that map directly to the flow, and structured field-level errors out of the box, so you no longer need to manage attempt status, loading states, or error parsing yourself.

The following components are used when creating sign-up flows. They are imported from `@clerk/elements/sign-up`. It is recommended to import them all under the `SignUp` namespace to make discovery easier and reduce naming conflicts with other components throughout your application. The code snippets on this page assume you have imported the components this way.

filename: Anatomy
```tsx
import * as SignUp from '@clerk/elements/sign-up'

export default function SignUpPage() {
  return (
    <SignUp.Root>
      <SignUp.Step name="start" />
      <SignUp.Step name="continue" />
      <SignUp.Step name="verifications" />
    </SignUp.Root>
  )
}
```

## `<Root>`

The root sign-up component. Sets up providers and state management for the sign-up flow. Must wrap all other sign-up components. `<Root>` will validate your built sign-up flow to ensure the implementation is correct based on instance settings and best practices.

### Properties {{ toc: false }}

| Name      | Type                | Description                                                                                                                                                                      |
| --------- | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| path?     | string              | The root path the sign-up flow is mounted at. If not provided, will be automatically inferred (either through the current pathname or environment variables). Fallback: /sign-up |
| fallback? | React.ReactNode     | Fallback markup to render while Clerk is loading. Default: null                                                                                                                  |
| routing?  | 'path' | 'virtual' | If you want to render Clerk Elements in e.g. a modal, use the 'virtual' routing mode. Default: 'path'                                                                            |

The following data attributes are also added to the underlying element:

- `data-global-error` - Refers to the [`<GlobalError>`](https://clerk.com/docs/guides/customizing-clerk/elements/reference/common.md#global-error) status

## `<Step>`

A step in the sign-up flow. Controls conditionally rendering its children based on the status of the current sign up attempt. `start` is the initial step.

### Properties {{ toc: false }}

| Name | Type                                     | Description                                                   |
| ---- | ---------------------------------------- | ------------------------------------------------------------- |
| name | 'start' | 'continue' | 'verifications' | The name of the step for which its children will be rendered. |

### `<Step name="start">`

Renders the beginning sign-up form. Once a sign up attempt has been created from this step, the `continue` or `verification` step will be rendered. The exact fields that should be rendered depend on your instance configuration.

#### Usage

filename: page.tsx
```tsx
<SignUp.Step name="start">
  <Clerk.Connection name="google">Sign up with Google</Clerk.Connection>
  <Clerk.Field name="identifier">
    <Clerk.Label>Email</Clerk.Label>
    <Clerk.Input />
    <Clerk.FieldError />
  </Clerk.Field>

  <SignUp.Captcha />

  <SignUp.Action submit>Sign up</SignUp.Action>
</SignUp.Step>
```

### `<Step name="continue">`

Collects additional required fields from the user during a sign up attempt. This step will be rendered if a user initiates a sign up, but does not provide all required fields (e.g. through social connection).

#### Usage

filename: page.tsx
```tsx
<SignUp.Step name="continue">
  <Clerk.Field name="username">
    <Clerk.Label>Username</Clerk.Label>
    <Clerk.Input />
    <Clerk.FieldError />
  </Clerk.Field>

  <SignUp.Action submit>Sign up</SignUp.Action>
</SignUp.Step>
```

### `<Step name="verifications">`

Verifies certain fields provided during sign up. Will render if your instance is configured to require verification of emails or phone numbers.

#### Usage

filename: page.tsx
```tsx
<SignUp.Step name="verifications">
  <SignUp.Strategy name="email_code">
    <Clerk.Field name="code">
      <Clerk.Label>Email code</Clerk.Label>
      <Clerk.Input />
      <Clerk.FieldError />
    </Clerk.Field>

    <SignUp.Action submit>Verify email</SignUp.Action>
  </SignUp.Strategy>
</SignUp.Step>
```

## `<Strategy>`

Conditionally renders its children depending on the authentication strategy that needs to be verified. Does not render any markup on its own.

### Properties {{ toc: false }}

| Name | Type                                                      | Description                                                       |
| ---- | --------------------------------------------------------- | ----------------------------------------------------------------- |
| name | 'code' | 'email\_code' | 'email\_link' | 'phone\_code' | The name of the strategy for which its children will be rendered. |

### Usage {{ toc: false }}

filename: page.tsx
```tsx
<SignUp.Strategy name="email_code">
  <Clerk.Field name="code">
    <Clerk.Label>Code</Clerk.Label>
    <Clerk.Input />
    <Clerk.FieldError />
  </Clerk.Field>

  <SignUp.Action submit>Verify</SignUp.Action>
</SignUp.Strategy>
```

## `<Action>`

Exposes various flow-related actions. It can be used to submit forms, navigate between steps, and re-trigger sending of verification codes. By default, renders a `<button>`.

### Properties {{ toc: false }}

| Name      | Type                                              | Description                                                                                                                         |
| --------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| submit?   | boolean                                           | If true, the action will submit the form. Default: false                                                                            |
| navigate? | 'start' | 'previous'                             | The name of the step to navigate to. Default: undefined                                                                             |
| resend?   | boolean                                           | If true, the action will resend the verification code for the currently active strategy, if applicable. Default: false              |
| fallback? | ({ resendableAfter: number }) => React.ReactNode | Only used when resend is true. If provided, the fallback markup will be rendered before the resend delay has expired. Default: null |

### Usage {{ toc: false }}

#### `<Action submit>`

filename: page.tsx
```tsx
<SignUp.Step name="start">
  <Clerk.Field name="identifier">
    <Clerk.Label>Email</Clerk.Label>
    <Clerk.Input />
    <Clerk.FieldError />
  </Clerk.Field>

  <SignUp.Action submit>Sign up</SignUp.Action>
</SignUp.Step>
```

#### `<Action navigate>`

filename: page.tsx
```tsx
<SignUp.Step name="continue">
  <Clerk.Field name="username">
    <Clerk.Label>Username</Clerk.Label>
    <Clerk.Input />
    <Clerk.FieldError />
  </Clerk.Field>

  <SignUp.Action submit>Sign up</SignUp.Action>
  <SignUp.Action navigate="start">Go back</SignUp.Action>
</SignUp.Step>
```

#### `<Action resend>`

filename: page.tsx
```tsx
<SignUp.Step name="verifications">
  <SignUp.Strategy name="email_code">
    <Clerk.Field name="code">
      <Clerk.Label>Code</Clerk.Label>
      <Clerk.Input />
      <Clerk.FieldError />
    </Clerk.Field>

    <SignUp.Action submit>Verify</SignUp.Action>
    <SignUp.Action
      resend
      fallback={({ resendableAfter }) => <p>Resend code in {resendableAfter} second(s)</p>}
    >
      Resend code
    </SignUp.Action>
  </SignUp.Strategy>
</SignUp.Step>
```

## `<Captcha>`

Renders the Cloudflare Turnstile widget. It must be used within the `<Step name="start">` component. By default, renders a `<div>`.

### Properties {{ toc: false }}

| Name     | Type    | Description                                                                                                                                                                                                       |
| -------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| asChild? | boolean | If true, <Captcha> will render as its child element. The element must be a self-closing element or component. Any children passed to the immediate child component of <Captcha> will be ignored. Default: false |

### `<Captcha>` usage

filename: page.tsx
```tsx
<SignUp.Step name="start">
  <SignUp.Captcha />

  <SignUp.Action submit>Sign up</SignUp.Action>
</SignUp.Step>
```

#### With `asChild`

filename: page.tsx
```tsx
<SignUp.Step name="start">
  <SignUp.Captcha asChild>
    <aside />
  </SignUp.Captcha>

  <SignUp.Action submit>Sign up</SignUp.Action>
</SignUp.Step>
```

---

## Sitemap

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