---
title: Slide
description: "`Slide` is a component that shows or hides an element from the corners of the page."
links:
  - style: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/slide/slide.style.ts
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/components/slide
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/components-slide--basic
---

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

return (
  <>
    <Button onClick={toggle}>Please Click</Button>

    <Slide open={open} placement="block-end">
      <VStack bg="bg.panel" p="md" w="full">
        <Text color="bg.contrast">
          クリリンのことか……クリリンのことかーーーっ！！！！！
        </Text>

        <Button alignSelf="flex-end" onClick={toggle}>
          Close
        </Button>
      </VStack>
    </Slide>
  </>
)
```

## Usage

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

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

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

```tsx
<Slide />
```

### Change Placement

To change the placement, set `placement` to `"block-start"`, `"block-end"`, `"inline-start"`, or `"inline-end"`. Default is `"inline-end"`.

```tsx
const placements = ["block-start", "block-end", "inline-start", "inline-end"]
const [placement, setPlacement] = useState("inline-end")
const [open, { toggle }] = useBoolean()

return (
  <VStack>
    <Wrap gap="md">
      {placements.map((value) => (
        <Button
          key={value}
          onClick={() => setPlacement(value)}
          variant={placement === value ? "solid" : "outline"}
        >
          {value}
        </Button>
      ))}
    </Wrap>

    <Button onClick={toggle} alignSelf="flex-start">
      Please Click
    </Button>

    <Portal>
      <Slide open={open} placement={placement}>
        <VStack
          bg="bg.panel"
          h={placement.startsWith("inline") ? "full" : undefined}
          p="md"
          w={placement.startsWith("block") ? "full" : undefined}
        >
          <Text color="bg.contrast">
            クリリンのことか……クリリンのことかーーーっ！！！！！
          </Text>

          <Button alignSelf="flex-end" onClick={toggle}>
            Close
          </Button>
        </VStack>
      </Slide>
    </Portal>
  </VStack>
)
```

### Change Duration

To change the duration, set a number (in seconds) to `duration`. Default is `{ enter: 0.4, exit: 0.3 }`.

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

return (
  <>
    <Button onClick={toggle}>Please Click</Button>

    <Slide duration={0.7} open={open} placement="block-end">
      <VStack bg="bg.panel" p="md" w="full">
        <Text color="bg.contrast">
          クリリンのことか……クリリンのことかーーーっ！！！！！
        </Text>

        <Button alignSelf="flex-end" onClick={toggle}>
          Close
        </Button>
      </VStack>
    </Slide>
  </>
)
```

### Unmount on Exit

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

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

return (
  <>
    <Button onClick={toggle}>Please Click</Button>

    <Slide open={open} placement="block-end" unmountOnExit>
      <VStack bg="bg.panel" p="md" w="full">
        <Text color="bg.contrast">
          クリリンのことか……クリリンのことかーーーっ！！！！！
        </Text>

        <Button alignSelf="flex-end" onClick={toggle}>
          Close
        </Button>
      </VStack>
    </Slide>
  </>
)
```

### Delay

If you want to delay the switch, set a numerical value (seconds) to `delay`.

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

return (
  <>
    <Button onClick={toggle}>Please Click</Button>

    <Slide delay={0.3} open={open} placement="block-end">
      <VStack bg="bg.panel" p="md" w="full">
        <Text color="bg.contrast">
          クリリンのことか……クリリンのことかーーーっ！！！！！
        </Text>

        <Button alignSelf="flex-end" onClick={toggle}>
          Close
        </Button>
      </VStack>
    </Slide>
  </>
)
```

## 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)                                                                                                                                                                                                                                |
| `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`.                                                                                                                                                                                                                                                                                                                                                         |
| `open`          | -              | `boolean`                                                                                                                 | Show the component. triggers when enter or exit states.                                                                                                                                                                                                                                                                                                                                                      |
| `placement`     | `"inline-end"` | `"block-end" \| "block-start" \| "inline-end" \| "inline-start" ...`                                                      | The placement of the slide.                                                                                                                                                                                                                                                                                                                                                                                  |
| `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.                                                                                                                                                                                                                                                                                                                               |