1# Overlays
2 
3Patterns for modals, slideovers, drawers, and command palettes.
4 
5## Confirmation dialog
6 
7```vue
8<script setup lang="ts">
9const isOpen = ref(false)
10 
11function confirmDelete() {
12  // perform delete
13  isOpen.value = false
14}
15</script>
16 
17<template>
18  <UButton label="Delete" color="error" variant="soft" @click="isOpen = true" />
19 
20  <UModal v-model:open="isOpen" title="Delete item" description="This action cannot be undone. Are you sure?" :ui="{ footer: 'justify-end' }">
21    <template #footer="{ close }">
22      <UButton label="Cancel" color="neutral" variant="outline" @click="close" />
23      <UButton label="Delete" color="error" @click="confirmDelete" />
24    </template>
25  </UModal>
26</template>
27```
28 
29## Programmatic confirmation (useOverlay)
30 
31Reusable pattern — no template state needed at the call site.
32 
33```vue [components/ConfirmModal.vue]
34<script setup lang="ts">
35defineProps<{
36  title: string
37  description?: string
38}>()
39 
40const emit = defineEmits<{
41  close: [confirmed: boolean]
42}>()
43</script>
44 
45<template>
46  <UModal :close="{ onClick: () => emit('close', false) }" :title="title" :description="description">
47    <template #footer>
48      <UButton label="Cancel" color="neutral" variant="outline" @click="emit('close', false)" />
49      <UButton label="Confirm" color="error" @click="emit('close', true)" />
50    </template>
51  </UModal>
52</template>
53```
54 
55```ts
56// Usage anywhere
57const overlay = useOverlay()
58const confirm = overlay.create(ConfirmModal)
59 
60async function deleteItem(item) {
61  const instance = confirm.open({
62    title: 'Delete item',
63    description: `Are you sure you want to delete "${item.name}"?`
64  })
65 
66  if (await instance.result) {
67    // user confirmed
68  }
69}
70```
71 
72## Form in a slideover
73 
74```vue
75<script setup lang="ts">
76import * as z from 'zod'
77 
78const isOpen = ref(false)
79 
80const schema = z.object({
81  name: z.string().min(1),
82  email: z.email()
83})
84 
85type Schema = z.output<typeof schema>
86const state = reactive<Partial<Schema>>({})
87 
88function onSave() {
89  // save user
90  isOpen.value = false
91}
92</script>
93 
94<template>
95  <UButton label="Add user" @click="isOpen = true" />
96 
97  <USlideover v-model:open="isOpen" title="Add user" description="Fill in the details below.">
98    <template #body>
99      <UForm id="user-form" :schema="schema" :state="state" class="space-y-4" @submit="onSave">
100        <UFormField name="name" label="Name">
101          <UInput v-model="state.name" />
102        </UFormField>
103        <UFormField name="email" label="Email">
104          <UInput v-model="state.email" type="email" />
105        </UFormField>
106      </UForm>
107    </template>
108 
109    <template #footer="{ close }">
110      <UButton label="Cancel" color="neutral" variant="outline" @click="close" />
111      <UButton type="submit" form="user-form" label="Save" />
112    </template>
113  </USlideover>
114</template>
115```
116 
117## Command palette
118 
119```vue
120<script setup lang="ts">
121const isOpen = ref(false)
122 
123defineShortcuts({
124  meta_k: () => { isOpen.value = true }
125})
126 
127const groups = [{
128  id: 'actions',
129  label: 'Actions',
130  items: [
131    { label: 'New file', icon: 'i-lucide-file-plus', kbds: ['meta', 'n'], onSelect: () => newFile() },
132    { label: 'New folder', icon: 'i-lucide-folder-plus', onSelect: () => newFolder() }
133  ]
134}, {
135  id: 'navigation',
136  label: 'Navigation',
137  items: [
138    { label: 'Dashboard', icon: 'i-lucide-house', to: '/dashboard' },
139    { label: 'Settings', icon: 'i-lucide-settings', to: '/settings' }
140  ]
141}]
142</script>
143 
144<template>
145  <UButton label="Search..." icon="i-lucide-search" color="neutral" variant="outline" @click="isOpen = true" />
146 
147  <UCommandPalette v-model:open="isOpen" :groups="groups" placeholder="Type a command or search..." />
148</template>
149```
150 
151## Drawer (bottom sheet)
152 
153```vue
154<script setup lang="ts">
155const isOpen = ref(false)
156</script>
157 
158<template>
159  <UButton label="Options" @click="isOpen = true" />
160 
161  <UDrawer v-model:open="isOpen" title="Options">
162    <template #body>
163      <div class="space-y-2 p-4">
164        <UButton label="Share" icon="i-lucide-share" block variant="ghost" />
165        <UButton label="Export" icon="i-lucide-download" block variant="ghost" />
166        <USeparator />
167        <UButton label="Delete" icon="i-lucide-trash" block variant="ghost" color="error" />
168      </div>
169    </template>
170  </UDrawer>
171</template>
172```
173 
174