Slideover

Interactive documentation for the slideover component. Change props in the playground, inspect positions and width behavior, and copy the generated example.

close events: 0

Preview

Code

<Slideover
  v-model="isOpen"
  title="Slideover title"
  @close="handleClose">
  <PrimaryButton @click="isOpen = true">Open slideover</PrimaryButton>

  <template #body>
    Content
  </template>
</Slideover>

Positions

Examples for left and right slideovers.

Left

Right

Width

Example with custom widthClasses.

Slots

Slideover exposes default, head, and body slots.

Slot	Description
default	Trigger content rendered outside the modal.
head	Overrides the default header and close button area.
body	Main slideover content area.

Props

This table matches the current SlideoverProps interface.

Prop	Type	Default	Description
modelValue	boolean	false	Controls the open state of the slideover. Supports v-model binding.
title	string	undefined	Optional title rendered inside the default slideover header.
closeOnClickOutside	boolean	true	Allows closing the slideover when clicking on the overlay backdrop.
position	'left' \| 'right'	'left'	Controls the side from which the slideover enters the viewport.
widthClasses	string	'w-full sm:max-w-1/2'	Custom Tailwind width classes applied to the slideover content container.