Skip to main content
Docs

<ClerkDegraded>

The <ClerkDegraded> component indicates that Clerk is partially operational.

Example

It's not recommended to wrap the entire app in control components; instead, only wrap the components that need access to the Clerk object, such as custom flows.

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

Feedback

GitHubEdit on GitHub

Last updated on