Show & Switch
Declarative control-flow components for conditional rendering.
Usage
Show / Hide
✅ Content is visible!
Show with render prop (type-safe value)
Hello from Show!
Switch / Case
Idle — pick a status above.
import { Show, Switch, Case, Default } from "@/components/ui/show"
// Show / Hide
<Show when={isLoggedIn} fallback={<LoginForm />}>
<Dashboard />
</Show>
// Render-prop (type-narrowed value)
<Show when={user}>
{(u) => <span>{u.name}</span>}
</Show>
// Multi-condition
<Switch>
<Case condition={status === "loading"}>
<Spinner />
</Case>
<Case condition={status === "error"}>
<ErrorBanner />
</Case>
<Default>
<Content />
</Default>
</Switch>Features
<Show>— renders children when thewhenprop is truthy, otherwise rendersfallback- Render-prop — pass a function as children to receive the type-narrowed truthy value
<Switch>/<Case>/<Default>— evaluates cases in order, renders first match- Zero runtime overhead — no extra DOM nodes or styles
- Server component compatible (no
"use client"in the component file)
Show Props
| Prop | Type | Default | Description |
|---|---|---|---|
when | T | undefined | null | false | — | Condition to check |
fallback | ReactNode | null | Rendered when when is falsy |
children | ReactNode | (value: T) => ReactNode | — | Content or render function |
Switch Props
| Component | Prop | Type | Description |
|---|---|---|---|
Switch | children | ReactNode | Must contain Case and/or Default |
Case | condition | boolean | Renders if truthy (first match wins) |
Default | children | ReactNode | Rendered if no Case matches |