---
title: Collapse
description: "`Collapse` is a component that allows you to expand or collapse an element for display."
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/collapse/collapse.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/collapse
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-collapse--basic
---

```tsx
const [open, { toggle }] = useBoolean()

return (
  <VStack align="flex-start" gap="0">
    <Button onClick={toggle}>Please Click</Button>

    <Collapse open={open}>
      <Box borderWidth={1} mt="lg" p="md" rounded="l2" w="full">
        クリリンのことか……クリリンのことかーーーっ！！！！！
      </Box>
    </Collapse>
  </VStack>
)
```

## Usage

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

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

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

```tsx
<Collapse />
```

### Change the Duration

To change the duration, set a number (in seconds) to `duration`.

```tsx
const [open, { toggle }] = useBoolean()

return (
  <VStack align="flex-start" gap="0">
    <Button onClick={toggle}>Please Click</Button>

    <Collapse open={open} duration={0.7}>
      <Box borderWidth={1} mt="lg" p="md" rounded="l2" w="full">
        クリリンのことか……クリリンのことかーーーっ！！！！！
      </Box>
    </Collapse>
  </VStack>
)
```

### Unmount on Exit

To unmount the component when it is not visible, set `unmountOnExit` to `true`.

```tsx
const [open, { toggle }] = useBoolean()

return (
  <VStack align="flex-start" gap="0">
    <Button onClick={toggle}>Please Click</Button>

    <Collapse open={open} unmountOnExit>
      <Box borderWidth={1} mt="lg" p="md" rounded="l2" w="full">
        クリリンのことか……クリリンのことかーーーっ！！！！！
      </Box>
    </Collapse>

    <Box borderWidth={1} mt="lg" p="md" rounded="l2" w="full">
      私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
    </Box>
  </VStack>
)
```

### Disable Opacity Animation

To disable the opacity animation, set `animationOpacity` to `false`.

```tsx
const [open, { toggle }] = useBoolean()

return (
  <VStack align="flex-start" gap="0">
    <Button onClick={toggle}>Please Click</Button>

    <Collapse animationOpacity={false} open={open}>
      <Box borderWidth={1} mt="lg" p="md" rounded="l2" w="full">
        クリリンのことか……クリリンのことかーーーっ！！！！！
      </Box>
    </Collapse>

    <Box borderWidth={1} mt="lg" p="md" rounded="l2" w="full">
      私の戦闘力は530000です。ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
    </Box>
  </VStack>
)
```

### Add a Starting Height

To add a starting height, set a string or number to `startingHeight`.

```tsx
const [open, { toggle }] = useBoolean()

return (
  <VStack alignItems="flex-start">
    <Button onClick={toggle}>Please Click</Button>

    <Collapse open={open} startingHeight={23}>
      <Box>
        私の戦闘力は530000です。
        <br />
        ですがもちろんフルパワーであなたと戦う気はありませんからご心配なく……
      </Box>
    </Collapse>
  </VStack>
)
```

## Props

| Prop               | Default  | Type                                                                                                                      | Description                                                                                                                                                                                                                                                                                                                                                                                                  |
| ------------------ | -------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `as`               | -        | `keyof IntrinsicElements`                                                                                                 | The HTML element to render.                                                                                                                                                                                                                                                                                                                                                                                  |
| `asChild`          | -        | `boolean`                                                                                                                 | Merges its props onto its immediate child.                                                                                                                                                                                                                                                                                                                                                                   |
| `css`              | -        | `CSSObject \| CSSObject[]`                                                                                                | The CSS object.                                                                                                                                                                                                                                                                                                                                                                                              |
| `colorScheme`      | -        | `"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` | Set color scheme variables.                                                                                                                                                                                                                                                                                                                                                                                  |
| `enter`            | -        | `any`                                                                                                                     | Custom `enter`.                                                                                                                                                                                                                                                                                                                                                                                              |
| `exit`             | -        | `any`                                                                                                                     | Custom `exit`. A target to animate to when this component is removed from the tree. This component **must** be the first animatable child of an `AnimatePresence` to enable this exit animation. This limitation exists because React doesn't allow components to defer unmounting until after an animation is complete. Once this limitation is fixed, the `AnimatePresence` component will be unnecessary. |
| `initial`          | -        | `any`                                                                                                                     | Custom `initial`. Properties, variant label or array of variant labels to start in. Set to `false` to initialise with the values in `animate` (disabling the mount animation)                                                                                                                                                                                                                                |
| `animationOpacity` | `true`   | `boolean`                                                                                                                 | If `true`, the opacity of the content will be animated.                                                                                                                                                                                                                                                                                                                                                      |
| `delay`            | `0`      | `MotionLifecycleProps<number> \| number`                                                                                  | Custom `delay` definition for `enter` and `exit`.                                                                                                                                                                                                                                                                                                                                                            |
| `duration`         | `0.2`    | `MotionLifecycleProps<number> \| number`                                                                                  | Custom `duration` definition for `enter` and `exit`.                                                                                                                                                                                                                                                                                                                                                         |
| `endingHeight`     | `"auto"` | `number \| string`                                                                                                        | The height you want the content in its expanded state.                                                                                                                                                                                                                                                                                                                                                       |
| `open`             | -        | `boolean`                                                                                                                 | Show the component. triggers when enter or exit states.                                                                                                                                                                                                                                                                                                                                                      |
| `startingHeight`   | `0`      | `number \| string`                                                                                                        | The height you want the content in its collapsed state.                                                                                                                                                                                                                                                                                                                                                      |
| `transition`       | -        | `MotionLifecycleProps<Transition>`                                                                                        | Custom `transition` definition for `enter` and `exit`.                                                                                                                                                                                                                                                                                                                                                       |
| `transitionEnd`    | -        | `MotionLifecycleProps<ResolvedValues>`                                                                                    | Custom `transitionEnd` definition for `enter` and `exit`.                                                                                                                                                                                                                                                                                                                                                    |
| `unmountOnExit`    | -        | `boolean`                                                                                                                 | If `true`, the element will unmount when `open={false}` and animation is done.                                                                                                                                                                                                                                                                                                                               |