/clerk-custom-ui

<Show> Component

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

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

Props

when Prop Variants

Authentication State

// 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>

Role Check

<Show when={{ role: 'org:admin' }}>
  <AdminPanel />
</Show>

Permission Check

<Show when={{ permission: 'org:billing:manage' }}>
  <BillingSettings />
</Show>

Billing Feature Check

<Show when={{ feature: 'widgets' }}>
  <WidgetBuilder />
</Show>

Billing Plan Check

<Show when={{ plan: 'gold' }}>
  <PremiumContent />
</Show>

Custom Condition (Function)

<Show when={(has) => has({ role: 'org:admin' }) || has({ permission: 'org:billing:manage' })}>
  <SettingsPanel />
</Show>

Fallback Content

Show alternative content when the condition fails:

<Show when="signed-in" fallback={<p>Please sign in to continue.</p>}>
  <Dashboard />
</Show>

Session Tasks and Pending State

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>

Security Caveat

<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.

Migration from Core 2

Docs

• Show component reference