Overlays
Drawer
A panel that slides in from a viewport edge, for mobile-style navigation or actions.
<UiDrawer />Title
direction="bottom" (default), title, description
Description
header slot — replaces title/description
Direction
direction sets which edge the drawer is anchored to and dragged towards to dismiss.
Inset
inset adds a margin on the two sides perpendicular to direction. The anchor edge itself always stays flush — a bottom drawer still meets the bottom of the screen.
Overlay
overlay renders the dimmed backdrop behind the panel. Turning it off leaves the page beneath fully visible and undimmed.
Handle
handle shows the draggable bar at the panel's anchor edge — the affordance that says the drawer can be pulled shut.
Comes with a drag handle by default (handle), which Slideover/Modal don't have — dragging it past a threshold dismisses the drawer, independent of dismissible.
Dismissible
dismissible is whether Escape and a click on the backdrop close the drawer. It's on by default — turn it off for a drawer holding unsaved work, and give the reader a deliberate way out in the footer slot instead.
:dismissible="false" disables the drag-to-dismiss gesture too, not just Escape/backdrop.
Open
default-open — starts open when uncontrolled
Renders open on mount — used sparingly here to avoid stacking drawers.
Default open
defaultOpen starts the drawer open when uncontrolled. Shown as source only here — a drawer that opened itself would cover this page.
Renders open on mount.
`direction="left"`
`direction="right"`
API Reference
Generated from the component's source — props, slots and emits as the component actually declares them.
Props
"top" | "bottom" | "left" | "right"'bottom'booleantruebooleantrueSlots
headerdefaultfooterEmits
update:open[value: boolean]