---
title: Show
description: "`Show` is a component that shows or hides its children based on a condition."
links:
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/show
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-show--basic
---

```tsx
<Show when={true}>
  <Text>インビジブルガール 葉隠透</Text>
</Show>
```

## Usage

```tsx
import { Show } from "@yamada-ui/react"
```

```tsx
import { Show } from "@/components/ui"
```

```tsx
import { Show } from "@workspaces/ui"
```

```tsx
<Show />
```

### Render Conditionally

To conditionally render content, set the `when` prop to a boolean value.

```tsx
const [isVisible, setIsVisible] = useState(true)

return (
  <VStack>
    <Button onClick={() => setIsVisible((prev) => !prev)}>
      {isVisible ? "Hide" : "Show"} Content
    </Button>
    <Show when={isVisible}>
      <Text>インビジブルガール 葉隠透</Text>
    </Show>
  </VStack>
)
```

### With Fallback

To render fallback content when the condition is false, use the `fallback` prop.

```tsx
const [isVisible, setIsVisible] = useState(false)

return (
  <VStack>
    <Button onClick={() => setIsVisible(!isVisible)}>Toggle Content</Button>
    <Show when={isVisible} fallback={<Text color="gray.500">衣服</Text>}>
      <Text color="green.500">インビジブルガール 葉隠透</Text>
    </Show>
  </VStack>
)
```

## Props

| Prop       | Default | Type                     | Description                                         |
| ---------- | ------- | ------------------------ | --------------------------------------------------- |
| `children` | -       | `ReactNodeOrFunction<Y>` | The children to render if `when` is `true`          |
| `fallback` | -       | `ReactNode`              | The fallback content to render if `when` is `false` |
| `when`     | -       | `null \| Y`              | If `true`, it'll render the `children` prop         |