Sheet

Overlay

A side panel that slides in from any edge. Useful for drawers, menus, or settings panels.

Props

Prop	Type	Default	Description
`modelValue`*	`boolean`	—	Open state (v-model).
`side`	`'left' \| 'right' \| 'bottom' \| 'top'`	`'right'`	Slide-in edge.
`size`	`'sm' \| 'md' \| 'lg' \| 'full'`	`'md'`	Panel width (or height for top/bottom).
`title`	`string`	—	Sheet title in the header.
`description`	`string`	—	Subtitle below the title.

Examples

Side options

vue

<script setup lang="ts">
const open = ref(false)
</script>
<template>
  <DsButton @click="open = true">Open sheet</DsButton>
  <DsSheet v-model="open" title="Settings" description="Manage your preferences." side="right">
    <p class="text-sm text-ds-fg-muted">Sheet content goes here.</p>
    <template #footer>
      <DsButton variant="ghost" @click="open = false">Cancel</DsButton>
      <DsButton @click="open = false">Save</DsButton>
    </template>
  </DsSheet>
</template>

Accessibility

role="dialog" with aria-modal="true".
ESC key closes the sheet.
Backdrop click closes.
Scrollable body if content exceeds height.

Popover