Overlay

Slideover

A slide-in panel from any edge of the screen for quick actions, forms, or navigation. Supports all four sides, inset mode, and customizable close behavior.

Playground

Experiment with different props in real-time.

Side

Inset

Dismissible

Basic Usage

Import and use the Slideover component with bind:open, a title, and description.

<script lang="ts">
  import { Slideover, Button } from 'sv5ui';

  let open = $state(false);
</script>

<Button label="Open Slideover" onclick={() => (open = true)} />

<Slideover
  bind:open
  title="Basic Slideover"
  description="This is a simple slideover panel."
>
  {#snippet body()}
    <p>This is the body content of the slideover.</p>
  {/snippet}
</Slideover>

With Footer

Add action buttons using the footer snippet.

<script lang="ts">
  import { Slideover, Button } from 'sv5ui';

  let open = $state(false);
</script>

<Button label="Open Slideover" onclick={() => (open = true)} />

<Slideover
  bind:open
  title="Edit Profile"
  description="Make changes to your profile here."
>
  {#snippet body()}
    <p>Form fields go here...</p>
  {/snippet}

  {#snippet footer()}
    <Button variant="outline" color="surface" label="Cancel" onclick={() => (open = false)} />
    <Button label="Save Changes" onclick={() => (open = false)} />
  {/snippet}
</Slideover>

Sides

Use the side prop to control which edge the slideover appears from.

<Slideover side="right" title="Right" bind:open>...</Slideover>
<Slideover side="left" title="Left" bind:open>...</Slideover>
<Slideover side="top" title="Top" bind:open>...</Slideover>
<Slideover side="bottom" title="Bottom" bind:open>...</Slideover>

Inset

Enable the inset prop for a slideover with margins and rounded corners.

<script lang="ts">
  import { Slideover, Button } from 'sv5ui';

  let open = $state(false);
</script>

<Button label="Open Inset" onclick={() => (open = true)} />

<Slideover
  bind:open
  title="Inset Slideover"
  description="Displayed with inset margins and rounded corners."
  inset
>
  {#snippet body()}
    <p>This slideover has inset margins and rounded corners.</p>
  {/snippet}
</Slideover>

Non-dismissible

Set dismissible={false} to prevent closing by clicking outside or pressing Escape.

<script lang="ts">
  import { Slideover, Button } from 'sv5ui';

  let open = $state(false);
</script>

<Button label="Open Non-dismissible" onclick={() => (open = true)} />

<Slideover
  bind:open
  title="Important"
  dismissible={false}
>
  {#snippet body()}
    <p>This slideover cannot be closed by clicking outside or pressing Escape.</p>
  {/snippet}

  {#snippet footer()}
    <Button label="I Understand" onclick={() => (open = false)} />
  {/snippet}
</Slideover>

UI Slots

Use the ui prop to override classes on specific internal elements of the Slideover.

Slot	Description
`overlay`	Backdrop behind the slideover — controls background color and opacity
`content`	Main slideover container — controls size, position, background
`header`	Top section containing title and description — controls layout and spacing
`wrapper`	Wraps the title and description text — controls text layout
`title`	Title text — controls font size, weight, color
`description`	Description text below title — controls font size and opacity
`body`	Main content area — controls padding and overflow behavior
`footer`	Bottom section for actions — controls layout, gap, and alignment
`close`	Close button positioning — controls position and size

Snippets

Use Svelte 5 snippets to customize specific parts of the Slideover.

Snippet	Type	Description
`children`	`Snippet`	Trigger element — clicking opens the slideover
`content`	`Snippet`	Custom content replacing the entire default layout
`header`	`Snippet`	Custom header section
`titleSlot`	`Snippet`	Custom title content — overrides title prop
`descriptionSlot`	`Snippet`	Custom description content — overrides description prop
`body`	`Snippet`	Main body content area
`footer`	`Snippet`	Footer area for action buttons
`closeSlot`	`Snippet`	Custom close button — replaces default close icon

Props

Prop	Type	Default	Description
`open`	`boolean`	`false`	Whether the slideover is open (bindable)
`onOpenChange`	`(open: boolean) => void`	`-`	Callback when open state changes
`title`	`string`	`-`	Header title text
`description`	`string`	`-`	Header description text
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	`'right'`	Side of the screen to slide in from
`overlay`	`boolean`	`true`	Show backdrop overlay behind the slideover
`transition`	`boolean`	`true`	Animate open and close transitions
`inset`	`boolean`	`false`	Display with inset margins and rounded corners
`close`	`boolean \| SlideoverCloseProps`	`true`	Show close button in header
`dismissible`	`boolean`	`true`	Allow closing by clicking outside or pressing Escape
`trapFocus`	`boolean`	`true`	Trap keyboard focus inside the slideover
`preventScroll`	`boolean`	`true`	Prevent body scroll when slideover is open
`portal`	`boolean`	`true`	Render the slideover content in a portal
`class`	`string`	`-`	Additional CSS classes
`ui`	`Record<Slot, Class>`	`-`	Override classes on internal UI slots

Popover Tooltip