Drawer

A panel that slides in from the side of the screen. Use for contextual detail views, settings panels, and secondary workflows that don't require a full page.

ExamplesCodeUsageChangelog

Basic

Tailwind v4

<script setup>
const open = ref(false)
</script>

<Button @click="open = true">Open Drawer</Button>

<Drawer :open="open" title="Drawer Title" @close="open = false">
  <p>Drawer body content goes here.</p>
</Drawer>

Wide

Tailwind v4

<Drawer :open="open" title="Wide" width="wide" @close="open = false">
  <!-- content -->
</Drawer>

Right side

Tailwind v4

<Drawer :open="open" title="Settings" side="right" @close="open = false">
  <!-- settings content -->
</Drawer>

Props

Prop	Type	Default	Description
open	boolean	false	Controls visibility
title	string	—	Header title text
width	'narrow' | 'medium' | 'wide' | 'extended' | 'full'	'medium'	Panel width
side	'left' | 'right'	'left'	Which side the drawer slides from
closable	boolean	true	Whether to show the close (X) button

Events

Event	Description
close	Emitted when the X button or blanket is clicked, or Escape is pressed

Slots

Slot	Description
default	Scrollable body content
header	Override the default title bar entirely
footer	Optional footer (pinned to bottom, with top border)