drawer

Drawer

A panel that slides in from any edge and closes with a swipe, with snap points for a half-open state, such as filters or a mini cart on a phone.

States: Default

Parts

Part	File	Does
Drawer	Drawer.vue	Groups all parts of the drawer.
DrawerBody	DrawerBody.vue	Holds the drawer's main content and scrolls it when the drawer reaches its height cap, keeping the header and footer in view.
DrawerClose	DrawerClose.vue	Closes the drawer.
DrawerContent	DrawerContent.vue	Holds what the drawer shows while open.
DrawerDescription	DrawerDescription.vue	Explains the purpose of the drawer below its title.
DrawerFooter	DrawerFooter.vue	Holds the actions of the drawer, such as apply and cancel buttons.
DrawerHeader	DrawerHeader.vue	Groups the title and description at the top of the drawer.
DrawerOverlay	DrawerOverlay.vue	Covers the page behind the open drawer.
DrawerTitle	DrawerTitle.vue	Names the drawer.
DrawerTrigger	DrawerTrigger.vue	Opens the drawer.

Anatomy

<Drawer>
  <DrawerTrigger />
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle />
      <DrawerDescription />
    </DrawerHeader>
    <DrawerBody />
    <DrawerFooter>
      <DrawerClose />
    </DrawerFooter>
  </DrawerContent>
</Drawer>

Styling

Part	Recipe
DrawerBody	drawer-body
DrawerContent	drawer-handle
DrawerContent	drawer-content
DrawerDescription	drawer-description
DrawerFooter	drawer-footer
DrawerHeader	drawer-header
DrawerOverlay	drawer-overlay
DrawerTitle	drawer-title

Install

Writes 11 files into components/ui/drawer/. For agents, npx @frontic/ui docs drawer prints this reference as markdown; the MCP server serves the same.

npm packages: @vueuse/core; class-variance-authority; reka-ui

API reference

Drawer Drawer.vue

Groups all parts of the drawer.

Prop	Type	Default
open	boolean	—

defaultOpen	boolean	false

modal	DrawerModal	true

swipeDirection	SwipeDirection	'down'

snapPoints	DrawerSnapPoint[]	—

snapPoint	DrawerSnapPoint \| null	—

defaultSnapPoint	DrawerSnapPoint \| null	—

snapToSequentialPoints	boolean	false

Event	Payload
update:open	value: boolean, details: DrawerOpenChangeDetails

update:openComplete	value: boolean

update:snapPoint	value: DrawerSnapPoint \| null

Slot	Slot props
default	{ open: boolean; close: () => void; }

Parts

Anatomy

Styling

Install

API reference

Drawer Drawer.vue

DrawerBody DrawerBody.vue

DrawerClose DrawerClose.vue

DrawerContent DrawerContent.vue

DrawerDescription DrawerDescription.vue

DrawerFooter DrawerFooter.vue

DrawerHeader DrawerHeader.vue

DrawerOverlay DrawerOverlay.vue

DrawerTitle DrawerTitle.vue

DrawerTrigger DrawerTrigger.vue