Show
Declarative control-flow components for conditional rendering.
Installation
npx vayu-ui-cli@latest add showUsage
Show / Hide
✅ Content is visible!
Show with render prop (type-safe value)
Hello from Show!
Switch / Case
Idle — pick a status above.
Features
<Show>— renders children when thewhenprop is truthy, otherwise rendersfallback- Render-prop — pass a function as children to receive the type-narrowed truthy value
<Match>/<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 |
Match Props
| Component | Prop | Type | Description |
|---|---|---|---|
Match | 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 |