GitHub55X

Drawer

Vue drawer panel that slides in from the edge for navigation, filters, or secondary content.

API Reference
PreviousNext

Installation

Install from the Vuzeno registry:

      
      bunx --bun shadcn-vue@latest add https://vuzeno.com/r/drawer.json

Usage

      
      <script setup lang="ts">
import { Drawer } from "@/components/ui/drawer";
</script>

<template>
  <Drawer.Root>
    <!-- … -->
  </Drawer.Root>
</template>

Composition

      
      Drawer.Root
├── Drawer.CloseTrigger
├── Drawer.Content
├── Drawer.Description
├── Drawer.Context
├── Drawer.Grabber
├── Drawer.GrabberIndicator
├── Drawer.Indent
├── Drawer.IndentBackground
├── Drawer.RootProvider
├── Drawer.Stack
├── Drawer.SwipeArea
├── Drawer.Title
├── Drawer.Trigger

Examples

Swipe Direction

Use the swipeDirection prop to control which edge the drawer slides in from.

Snap Points

Use the snapPoints prop to define intermediate positions the drawer can snap to.

Modal

Set modal to false to allow interaction with the rest of the page while the drawer is open.

Controlled

Use the open and onOpenChange props to control the drawer state.

Scrollable

No Drag Area

Apply the data-no-drag attribute to any element inside the drawer to prevent dragging from starting on it.

Non Draggable

Set draggable to false to disable drag-to-dismiss entirely.

Indent Background

Use Drawer.IndentBackground to create a visual indent effect on the page behind the drawer.

Multiple Triggers

Use the value prop on Drawer.Trigger to share a single drawer across multiple trigger elements. The onTriggerValueChange callback fires when a different trigger is activated.

Using the Root Provider

Use the useDrawer hook and Drawer.RootProvider to control the drawer from outside the component tree.

API

See Ark UI Drawer docs for full props and examples.

DialogCallerEditable