Preview

Installation

npx sigma-ui@latest add drawer

Usage

Drawer is built on top of the Reka UI Drawer.

<script setup lang="ts">
import { Button } from '@/components/ui/button';
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from '@/components/ui/drawer';
</script>

<template>
  <Drawer>
    <DrawerTrigger>Open</DrawerTrigger>
    <DrawerContent>
      <DrawerHeader>
        <DrawerTitle>Are you absolutely sure?</DrawerTitle>
        <DrawerDescription>This action cannot be undone.</DrawerDescription>
      </DrawerHeader>
      <DrawerFooter>
        <Button>Submit</Button>
        <DrawerClose as-child>
          <Button variant="outline">
            Cancel
          </Button>
        </DrawerClose>
      </DrawerFooter>
    </DrawerContent>
  </Drawer>
</template>

• Use v-model:open on <Drawer> to control the open state.
• swipeDirection is down by default. Set it to up, left, or right to anchor the panel to another edge.
• The user can close the drawer by dragging it toward its edge, clicking the overlay, or pressing Esc.

Examples

Responsive Dialog

Combine the Dialog and Drawer components to create a responsive dialog. It renders a Dialog on desktop and a Drawer on mobile.

API Reference

Drawer

Props

Prop	Type	Default
open v-model:open	boolean	-
defaultOpen	boolean	-
modal Modality of the drawer. true (default): modal with focus trap, scroll lock, and outside-press dismiss 'trap-focus': traps focus but allows outside pointer events (non-modal side panels) false: non-modal	DrawerModal	-
swipeDirection Direction to swipe to dismiss.	SwipeDirection$1	'down'
snapPoints Preset snap positions (fractions 0-1, pixels >1, or '148px'/'30rem' strings)	DrawerSnapPoint[]	-
snapPoint v-model:snapPoint	DrawerSnapPoint | null	-
defaultSnapPoint	DrawerSnapPoint | null	-
snapToSequentialPoints When true, snaps to the next sequential snap point (one step at a time). When false, snaps to the nearest snap point by distance.	boolean	false

Events

Event	Payload
update:open	[value: boolean, details: DrawerOpenChangeDetails]
update:openComplete	[value: boolean]
update:snapPoint	[value: DrawerSnapPoint | null]

Slots

Slot	Scope
default Trigger and content.	-

DrawerContent

Props

Prop	Type	Default
forceMount	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	-
initialFocus Initial focus target when the drawer opens. true / default: focus the first focusable element inside false: do not focus anything element ref: focus that specific element	boolean | HTMLElement | null	-
finalFocus Final focus target when the drawer closes. true / default: focus the trigger false: do not restore focus element ref: focus that specific element	boolean | HTMLElement | null	-

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: Event]
closeAutoFocus	[event: Event]

Slots

Slot	Scope
default The content of the component.	-

DrawerDescription

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.	-

DrawerFooter

Slots

Slot	Scope
default The content of the component.	-

DrawerHeader

Slots

Slot	Scope
default The content of the component.	-

DrawerOverlay

Props

Prop	Type	Default
forceMount Keep mounted for animation control.	boolean	-
forceRender Render even when inside a nested drawer.	boolean	false
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"

DrawerTitle

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.	-

Accessibility

Renders as a modal dialog following the Dialog (Modal) WAI-ARIA design pattern. Focus stays inside the drawer and returns to the trigger on close.

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