---
github: true
description: Display a dialog that slides in from the edge of the screen.
headlessui:
  label: 'Dialog'
  to: 'https://headlessui.com/vue/dialog'
---

## Usage

::component-example
#default
:slideover-example
#code
```vue
<script setup>
const isOpen = ref(false)
</script>

<template>
  <div>
    <UButton label="Open" @click="isOpen = true" />

    <USlideover v-model="isOpen">
      <!-- Content -->
    </USlideover>
  </div>
</template>
```
::

## Props

:component-props

## Preset

:component-preset