Control Components
Components that manage authentication behaviors, control content visibility, and handle Clerk loading lifecycle states.
Authentication State Components
Conditionally render content based on user authentication status.
<Show when="signed-in">
Renders its children only when the user is authenticated.
<Show when="signed-out">
Renders its children only when the user is not authenticated.
Authorization with Show
Use the Show component with permissions, roles, or custom predicates for access control.
<Show when={{ permission }}>
Control access with permissions, roles, features, or plans.
Clerk Loading Lifecycle Components
Components that respond to different states of Clerk's loading lifecycle.
<ClerkLoading>
Renders its children while Clerk is initializing and loading.
Clerk is loading...
<ClerkLoaded>
Renders its children after Clerk has finished loading.
This component only renders after Clerk has loaded.
<ClerkDegraded>
Shows content when Clerk is in a degraded state.
This component only renders when Clerk detects degraded performance or connectivity issues.
<ClerkFailed>
Shows content when Clerk fails to load or encounters critical errors.
This component only renders when Clerk completely fails to load or encounters critical errors.