Overlays
Slideover
A panel that slides in over the page from a viewport edge, for larger contextual content — or, with `dock`, into the layout beside it.
<UiSlideover />Options
One block per prop — what it does, and what it looks like set.
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.
Size
size sets the panel's size along its cross axis — width for a left/right panel, height for a top/bottom one.
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.
Dock
dock slides the panel into the layout beside the page instead of over it, with no backdrop, so the page stays usable — pick another row and the panel just changes content. It needs a SlideoverOutlet in the layout (this site has one next to its content) and a wide enough viewport: true docks a md panel from xl (1280px). Below that, it's the usual overlay.
Docking needs both a viewport at least as wide as the dock breakpoint and a SlideoverOutlet somewhere in the layout. Without an outlet the panel silently stays an overlay (a dev-only warning says so).
Only one panel docks at a time: a second docked Slideover opening closes the first (it gets update:open(false)).
Docked, an outside click never closes the panel — the page is meant to stay usable. Escape (with focus inside) and the close button still do. There's no backdrop, no scroll lock and no focus trap, and the panel is a complementary region rather than a modal dialog.
The breakpoints are hard-coded to the preset's defaults (xl 1280px, 2xl 1536px, …). An app that overrides breakpoints in its UnoCSS config docks at the default widths regardless.
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.
Examples
The component in real use: compositions that answer "how do I build X with this", rather than one prop at a time.
`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
"sm" | "md" | "lg" | "xl"'md'booleantrueboolean | "lg" | "xl" | "2xl" | "3xl" | "4xl"falseSlots
headerdefaultfooterEmits
update:open[value: boolean]update:docked[value: boolean]