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

<If sdk="nextjs"> <CodeBlockTabs options={["App Router", "Pages Router"]}> ```tsx {{ filename: 'app/page.tsx' }} import { ClerkLoaded, ClerkLoading, ClerkDegraded, ClerkFailed } from '@clerk/nextjs'

export default function Page() {
  return (
    <>
      <ClerkLoading>
        <p>Clerk is loading...</p>
      </ClerkLoading>
      <ClerkLoaded>
        <p>Clerk has loaded (ready or degraded)</p>
        <MyCustomSignInFlow />
        <ClerkDegraded>
          <p>Clerk is experiencing issues. Please try again later.</p>
        </ClerkDegraded>
      </ClerkLoaded>
      <ClerkFailed>
        <p>Something went wrong with Clerk. Please contact support.</p>
      </ClerkFailed>
    </>
  )
}
```

```tsx {{ filename: 'pages/index.tsx' }}
import { ClerkLoaded, ClerkLoading, ClerkDegraded, ClerkFailed } from '@clerk/nextjs'

export default function Page() {
  return (
    <>
      <ClerkLoading>
        <p>Clerk is loading...</p>
      </ClerkLoading>
      <ClerkLoaded>
        <p>Clerk has loaded (ready or degraded)</p>
        <MyCustomSignInFlow />
        <ClerkDegraded>
          <p>Clerk is experiencing issues. Please try again later.</p>
        </ClerkDegraded>
      </ClerkLoaded>
      <ClerkFailed>
        <p>Something went wrong with Clerk. Please contact support.</p>
      </ClerkFailed>
    </>
  )
}
```

</CodeBlockTabs> </If> <If sdk="react"> ```tsx {{ filename: 'src/App.tsx' }} import { ClerkLoaded, ClerkLoading, ClerkDegraded, ClerkFailed } from '@clerk/clerk-react'

export default function App() { return ( <> <ClerkLoading> <p>Clerk is loading...</p> </ClerkLoading> <ClerkLoaded> <p>Clerk has loaded (ready or degraded)</p> <MyCustomSignInFlow /> <ClerkDegraded> <p>Clerk is experiencing issues. Please try again later.</p> </ClerkDegraded> </ClerkLoaded> <ClerkFailed> <p>Something went wrong with Clerk. Please contact support.</p> </ClerkFailed> </> ) }

export default App

</If>

<If sdk="react-router">
```tsx {{ filename: 'app/routes/example.tsx' }}
import { ClerkLoading, ClerkLoaded, ClerkDegraded, ClerkFailed } from '@clerk/react-router'

export default function Example() {
  return (
    <>
      <ClerkLoading>
        <p>Clerk is loading...</p>
      </ClerkLoading>
      <ClerkLoaded>
        <p>Clerk has loaded (ready or degraded)</p>
        <MyCustomSignInFlow />
        <ClerkDegraded>
          <p>Clerk is experiencing issues. Please try again later.</p>
        </ClerkDegraded>
      </ClerkLoaded>
      <ClerkFailed>
        <p>Something went wrong with Clerk. Please contact support.</p>
      </ClerkFailed>
    </>
  )
}

</If> <If sdk="chrome-extension"> ```jsx {{ filename: 'src/routes/home.tsx' }} import { ClerkLoaded, ClerkLoading, ClerkDegraded, ClerkFailed } from '@clerk/chrome-extension'

export default function Home() { return ( <> <ClerkLoading> <p>Clerk is loading...</p> </ClerkLoading> <ClerkLoaded> <p>Clerk has loaded (ready or degraded)</p> <MyCustomSignInFlow /> <ClerkDegraded> <p>Clerk is experiencing issues. Please try again later.</p> </ClerkDegraded> </ClerkLoaded> <ClerkFailed> <p>Something went wrong with Clerk. Please contact support.</p> </ClerkFailed> </> ) }

</If>

<If sdk="remix">
```tsx {{ filename: 'app/routes/_index.tsx' }}
import { ClerkLoading, ClerkLoaded, ClerkDegraded, ClerkFailed } from '@clerk/remix'

export default function Index() {
  return (
    <>
      <ClerkLoading>
        <p>Clerk is loading...</p>
      </ClerkLoading>
      <ClerkLoaded>
        <p>Clerk has loaded (ready or degraded)</p>
        <MyCustomSignInFlow />
        <ClerkDegraded>
          <p>Clerk is experiencing issues. Please try again later.</p>
        </ClerkDegraded>
      </ClerkLoaded>
      <ClerkFailed>
        <p>Something went wrong with Clerk. Please contact support.</p>
      </ClerkFailed>
    </>
  )
}

</If> <If sdk="tanstack-react-start"> ```tsx {{ filename: 'app/routes/index.tsx' }} import { ClerkLoading, ClerkLoaded, ClerkDegraded, ClerkFailed } from '@clerk/tanstack-react-start' import { createFileRoute } from '@tanstack/react-router'

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

function Home() { return ( <> <ClerkLoading> <p>Clerk is loading...</p> </ClerkLoading> <ClerkLoaded> <p>Clerk has loaded (ready or degraded)</p> <MyCustomSignInFlow /> <ClerkDegraded> <p>Clerk is experiencing issues. Please try again later.</p> </ClerkDegraded> </ClerkLoaded> <ClerkFailed> <p>Something went wrong with Clerk. Please contact support.</p> </ClerkFailed> </> ) }

</If>

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