`<ClerkLoaded>`

The <ClerkLoaded> component guarantees that the Clerk object has loaded and will be available under window.Clerk. This allows you to wrap child components to access the Clerk object without the need to check it exists.

Usage

It's not recommended to wrap the entire app in the <ClerkLoaded> component; instead, only wrap the components that need access to the Clerk object.

Next.js

React

Remix

Expo

App Router

Pages Router

app/page.tsx

import { ClerkLoaded } from '@clerk/nextjs'

export default function Page() {
  return (
    <ClerkLoaded>
      <p>Clerk has loaded</p>
      <MyCustomSignInFlow />
    </ClerkLoaded>
  )
}

pages/index.tsx

import { ClerkLoaded } from '@clerk/nextjs'

export default function Page() {
  return (
    <ClerkLoaded>
      <p>Clerk has loaded</p>
      <MyCustomSignInFlow />
    </ClerkLoaded>
  )
}

example.tsx

import { ClerkLoaded } from '@clerk/clerk-react'

declare global {
  interface Window {
    Clerk: any
  }
}

export default function Example() {
  return (
    <ClerkLoaded>
      <p>Clerk has loaded</p>
    </ClerkLoaded>
  )
}

routes/index.tsx

import { ClerkLoaded } from '@clerk/remix'

declare global {
  interface Window {
    Clerk: any
  }
}

export default function Index() {
  return (
    <div>
      <ClerkLoaded>
        <p>Clerk has loaded</p>
      </ClerkLoaded>
    </div>
  )
}

app/index.tsx

import { ClerkLoaded } from '@clerk/clerk-expo'
import { Text, View } from 'react-native'

export default function Screen() {
  return (
    <View>
      <ClerkLoaded>
        <Text>Clerk has loaded</Text>
      </ClerkLoaded>
    </View>
  )
}

Edit this page on GitHub

Last updated on Apr 7, 2025

<ClerkLoaded>

Usage

Feedback

`<ClerkLoaded>`