Setting the file. One moment.
Subchapter 5.5
core-3/show-component.mdMarkdown3 KBView on GitHub
The <Show> component conditionally renders content based on authentication state, roles, permissions, billing plans, and features.
Core 2 ONLY (skip if current SDK): The
<Show>component does not exist in Core 2. Use<SignedIn>,<SignedOut>, and<Protect>instead. See migration table below.
import { Show } from '@clerk/nextjs' // Next.js
import { Show } from '@clerk/react' // React
import { Show } from '@clerk/react-router' // React Router
import { Show } from '@clerk/expo' // Expo| Prop | Type | Description |
|---|---|---|
when | string | object | function | Condition for rendering children |
fallback? | ReactNode | Content shown when condition fails |
treatPendingAsSignedOut? | boolean | Treat pending sessions as signed-out (default: true) |
// Show content only when signed in
<Show when="signed-in">
<p>Welcome back!</p>
</Show>
// Show content only when signed out
<Show when="signed-out">
<p>Please sign in.</p>
</Show><Show when={{ role: 'org:admin' }}>
<AdminPanel />
</Show><Show when={{ permission: 'org:billing:manage' }}>
<BillingSettings />
</Show><Show when={{ feature: 'widgets' }}>
<WidgetBuilder />
</Show><Show when={{ plan: 'gold' }}>
<PremiumContent />
</Show><Show when={(has) => has({ role: 'org:admin' }) || has({ permission: 'org:billing:manage' })}>
<SettingsPanel />
</Show>Show alternative content when the condition fails:
<Show when="signed-in" fallback={<p>Please sign in to continue.</p>}>
<Dashboard />
</Show>The treatPendingAsSignedOut prop controls how pending sessions (sessions with incomplete tasks) are handled:
// Default: pending sessions are treated as signed-out
<Show when="signed-in" treatPendingAsSignedOut>
<Dashboard />
</Show>
// Treat pending sessions as signed-in (e.g., to show task completion UI)
<Show when="signed-in" treatPendingAsSignedOut={false}>
<TaskCompletionFlow />
</Show><Show> only visually hides content — it remains in browser source. It is not a security boundary. For protecting sensitive data, always verify authentication server-side with auth() or use auth.protect() in middleware.
| Core 2 | Current |
|---|---|
<SignedIn> | <Show when="signed-in"> |
<SignedOut> | <Show when="signed-out"> |
<Protect role="org:admin"> | <Show when={{ role: 'org:admin' }}> |
<Protect permission="org:billing:manage"> | <Show when={{ permission: 'org:billing:manage' }}> |
<Protect condition={(has) => expr}> | <Show when={(has) => expr}> |
<Protect fallback={...}> | <Show when={...} fallback={...}> |
| (no equivalent) | <Show when={{ feature: 'widgets' }}> |
| (no equivalent) | <Show when={{ plan: 'gold' }}> |