Overlays
Slideover
A panel that slides in over the page from a viewport edge, for larger contextual content.
<UiSlideover />Title
header slot — replaces title/description
Description
description is the secondary line under the title, framing what the panel is for before the reader scans its contents.
Side
side sets which edge the panel slides in from.
Inset
inset adds a margin around the panel and rounds all of its corners, instead of sitting flush against the screen edge.
:inset="false" (flush) removes the margin and rounded corners so the panel sits flush against the screen edge — purely visual, doesn't affect dismiss behavior.
Overlay
overlay renders a dimmed backdrop behind the panel.
Non-dismissible needs its own close control
Like Modal, :dismissible="false" disables both Escape and backdrop-click close on Slideover too — you must provide your own way to close it (e.g. a footer button) or it's stuck open.
Dismissible
dismissible is whether Escape and a click on the backdrop close the panel. It's on by default; turn it off for a slideover holding unsaved work, and pair it with closeButton when you want no way out except your own control.
Like Modal, pairs with :dismissible="false" if you need to force an explicit close action.
Open
default-open — starts open when uncontrolled
Renders open on mount — used sparingly here to avoid stacking slideovers.
Default open
defaultOpen starts the panel open when uncontrolled. Shown as source only here — a slideover that opened itself would cover this page.
Renders open on mount.
`side="right"` (default)
`side="top"`
`side="bottom"`
API Reference
Generated from the component's source — props, slots and emits as the component actually declares them.
Props
booleantrueSlots
headerdefaultfooterEmits
update:open[value: boolean]