Show

Used to conditional render part of the view based on a condition.

AI TipWant to skip the docs? Use the MCP Server

"use client"  import { Button, Show, Stack } from "@chakra-ui/react" import { useState } from "react"  const Demo = () => {  const [count, setCount] = useState(0)  return (  <Stack align="flex-start">  <Button variant="outline" onClick={() => setCount(count + 1)}>  Value: {count}  </Button>  <Show when={count > 3}>  <div>My Content</div>  </Show>  </Stack>  ) }

Usage

The Show component renders its children when the when value is truthy, otherwise it renders the fallback prop.

import { Show } from "@chakra-ui/react"

<Show when={...} fallback={...}>  <div>Content</div> </Show>

Examples

Fallback

Use the fallback prop to render a fallback component when the array is empty or undefined.

Not there yet. Keep clicking...

"use client"  import { Button, Show, Stack, Text } from "@chakra-ui/react" import { useState } from "react"  const Demo = () => {  const [count, setCount] = useState(0)  return (  <Stack align="flex-start">  <Button variant="outline" onClick={() => setCount(count + 1)}>  Value: {count}  </Button>  <Show  when={count > 3}  fallback={<Text>Not there yet. Keep clicking...</Text>}  >  <div>Congrats! I am here</div>  </Show>  </Stack>  ) }

Render Prop

Use the children render prop to narrow the type of the when value and remove undefined | null

Value: 10

import { Show } from "@chakra-ui/react"  const Demo = () => {  const value: number | undefined = 10  return <Show when={value}>{(value) => <div>Value: {value}</div>}</Show> }

Props

Prop	Default	Type
`when`		`T \| null \| undefined` If `true`, it'll render the `children` prop
`fallback`		`React.ReactNode \| undefined` The fallback content to render if `when` is `false`
`as`		`React.ElementType` The underlying element to render.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Radiomark

Skip Nav