Slide
SlidePanel
Low-level slide panel using Teleport with all four sides, overlay backdrop, and CSS transitions.
Slide
The Slide category provides off-canvas drawer components. XASlide is the high-level wrapper built on Nuxt UI's USlideover, offering built-in header, body, footer layout and optional trigger button. XASlidePanel is the lower-level primitive that teleports directly to <body> and supports all four entry directions.
Components
<XASlidePanel />
A lightweight, low-level slide panel that teleports to <body>. Supports all four entry sides (left, right, top, bottom) and manages transitions, overlay backdrop, and dismissal internally. Use this when you need full layout control without the opinionated header/body/footer structure of XASlide.
<XASlidePanel
v-model="showPanel"
side="bottom"
size="md"
:overlay="true"
:dismissible="true"
>
<div class="p-6">
<h2>Custom panel content</h2>
</div>
</XASlidePanel>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | Boolean | false | Controls panel visibility via v-model. |
side | String | 'right' | Entry direction — 'left', 'right', 'top', or 'bottom'. |
size | String | 'md' | Panel dimension — 'sm', 'md', 'lg', 'xl', or 'full'. For top/bottom sides this controls height; for left/right it controls width. |
overlay | Boolean | true | Show dark backdrop overlay behind the panel. |
dismissible | Boolean | true | Allow closing the panel by clicking the overlay. |
AI Context
component: XASlidePanel
package: "@xenterprises/nuxt-x-app"
category: Slide
use-when: >
Use XASlidePanel when you need a bare teleported panel (e.g. mobile bottom
sheets, custom side drawers) with full control over internal layout. Supports
all four sides including top and bottom. Use XASlide instead when you want
the standard header/body/footer structure.