Preview

Installation

npx sigma-ui@latest add sheet

Usage

<script setup lang="ts">
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from '@/components/ui/sheet';
</script>

<template>
  <Sheet>
    <SheetTrigger>Open</SheetTrigger>
    <SheetContent>
      <SheetHeader>
        <SheetTitle>Are you absolutely sure?</SheetTitle>
        <SheetDescription>
          This action cannot be undone. This will permanently delete your account
          and remove your data from our servers.
        </SheetDescription>
      </SheetHeader>
    </SheetContent>
  </Sheet>
</template>

Use v-model:open on Sheet to control the open state.

Examples

Side

Use the side property to <SheetContent /> to indicate the edge of the screen where the component will appear. The values can be top, right, bottom or left.

Size

You can adjust the size of the sheet using CSS classes:

<template>
  <Sheet>
    <SheetTrigger>Open</SheetTrigger>
    <SheetContent class="w-[400px] sm:w-[540px]">
      <SheetHeader>
        <SheetTitle>Are you absolutely sure?</SheetTitle>
        <SheetDescription>
          This action cannot be undone. This will permanently delete your account
          and remove your data from our servers.
        </SheetDescription>
      </SheetHeader>
    </SheetContent>
  </Sheet>
</template>

API Reference

Sheet

Props

Prop	Type	Default
open The controlled open state of the dialog. Can be binded as v-model:open.	boolean	-
defaultOpen The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.	boolean	-
modal The modality of the dialog When set to true, <br> interaction with outside elements will be disabled and only dialog content will be visible to screen readers.	boolean	-
unmountOnHide When set to false, the dialog content will not be unmounted when closed, but instead hidden with CSS. <br> Useful for SEO or when you want to improve performance by not remounting the component on every open.	boolean	true

Events

Event	Payload
update:open Event handler called when the open state of the dialog changes.	[value: boolean]

Slots

Slot	Scope
default The content of the component.	-

SheetTrigger

Props

Prop	Type	Default
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	-

SheetClose

Props

Prop	Type	Default
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	-

SheetContent

Props

Prop	Type	Default
side Edge of the screen the sheet slides in from.	"top" | "right" | "bottom" | "left" | null	-
forceMount Used to force mounting when more control is needed. Useful when controlling animation with Vue animation libraries.	boolean	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"
disableOutsidePointerEvents When true, hover/focus/click interactions will be disabled on elements outside the DismissableLayer. Users will need to click twice on outside elements to interact with them: once to close the DismissableLayer, and again to trigger the element.	boolean	-

Events

Event	Payload
escapeKeyDown Event handler called when the escape key is down. Can be prevented.	[event: KeyboardEvent]
pointerDownOutside Event handler called when a pointerdown event happens outside of the DismissableLayer. Can be prevented.	[event: PointerDownOutsideEvent]
focusOutside Event handler called when the focus moves outside of the DismissableLayer. Can be prevented.	[event: FocusOutsideEvent]
interactOutside Event handler called when an interaction happens outside the DismissableLayer. Specifically, when a pointerdown event happens outside or focus moves outside of it. Can be prevented.	[event: PointerDownOutsideEvent | FocusOutsideEvent]
openAutoFocus Event handler called when auto-focusing on open. Can be prevented.	[event: Event]
closeAutoFocus Event handler called when auto-focusing on close. Can be prevented.	[event: Event]

Slots

Slot	Scope
default The content of the component.	-

SheetHeader

Slots

Slot	Scope
default The content of the component.	-

SheetTitle

Props

Prop	Type	Default
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	-

SheetDescription

Props

Prop	Type	Default
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	-

SheetFooter

Slots

Slot	Scope
default The content of the component.	-

Accessibility

Adheres to the Dialog WAI-ARIA design pattern. Reka UI traps focus inside the open sheet and returns it to the trigger on close. SheetTitle and SheetDescription label the content.

Key	Description
Space	Opens or closes the sheet.
Enter	Opens or closes the sheet.
Tab	Moves focus to the next focusable element.
Shift + Tab	Moves focus to the previous focusable element.
Esc	Closes the sheet and moves focus to the trigger.