Sections

Components

Utilities

Forms

Hooks

useIsMobile

Drawer

Copy Markdown

A sliding panel with swipe support.

PreviewCode

Open

Installation#

CLIManual

pnpmbunnpmyarn

pnpm dlx shadcn@latest add @shark/drawer

Anatomy#

Drawer
├── DrawerTrigger
└── DrawerContent
    ├── DrawerGrabber
    ├── drawer-main
    │ ├── DrawerHeader
    │ ├── DrawerBody
    │ └── DrawerFooter
    │ └── DrawerClose

Usage#

import {
  Drawer,
  DrawerTrigger,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
  DrawerDescription,
  DrawerBody,
  DrawerFooter,
  DrawerClose,
} from "@/components/ui/drawer";

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

Controlled#

Use open and onOpenChange on the root to control the drawer state.

PreviewCode

Open ControlledOpen Uncontrolled

Title & Description#

DrawerHeader supports two usage patterns:

Using props#

Pass title and description props directly to DrawerHeader.

<DrawerHeader 
  title="Allow accessory to connect?" 
  description="Do you want to allow the USB accessory to connect to this device?"
/>

This approach does not require DrawerTitle or DrawerDescription components.

Using components#

Use DrawerTitle and DrawerDescription as children for more control.

<DrawerHeader>
  <DrawerTitle>Allow accessory to connect?</DrawerTitle>
  <DrawerDescription>
    Do you want to allow the USB accessory to connect to this device?
  </DrawerDescription>
</DrawerHeader>

Examples#

Inset Variant#

Use variant="inset" on DrawerContent so the drawer appears as a floating card rather than edge-to-edge.

PreviewCode

Open

Swipe Directions#

Control which direction the drawer slides and swipes using swipeDirection on the root.

PreviewCode

BottomTopLeftRight

Snap Points#

Use snapPoints to allow the drawer to snap to multiple heights.

PreviewCode

Open

Use modal={false} to allow interaction with elements outside the drawer.

PreviewCode

Open

Close button#

Use the showCloseButton prop to show a close button in the top-right corner.

PreviewCode

Open

No Drag Area#

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

PreviewCode

Open

Non Draggable#

Set draggable={false} on DrawerContent to disable drag-to-dismiss on the panel.

The drawer can still be dragged by the grabber.

PreviewCode

Open

Custom spacing#

Use [--space:--spacing("value")] on DrawerContent to adjust internal spacing.

Default spacing is --spacing(6).

PreviewCode

Open

You can use breakpoint utilities to change the internal spacing at different screen sizes.

md:[--space:--spacing(6)] lg:[--space:--spacing(8)]

API Reference#

Drawer#

Root element of the drawer.

Prop	Type	Default
`open`	`boolean`	`-`
`defaultOpen`	`boolean`	`false`
`onOpenChange`	`({ open }: OpenChangeDetails) => void`	`-`
`swipeDirection`	`"up"	"down"
`snapPoints`	`(number	string)[]`
`defaultSnapPoint`	`number	string
`snapToSequentialPoints`	`boolean`	`false`
`closeThreshold`	`number`	`0.25`
`swipeVelocityThreshold`	`number`	`700`
`preventDragOnScroll`	`boolean`	`true`
`modal`	`boolean`	`true`
`closeOnEscape`	`boolean`	`true`
`closeOnInteractOutside`	`boolean`	`true`
`className`	`string`	`-`

DrawerTrigger#

Opens the drawer on click. Use asChild for custom trigger elements.

Prop	Type	Default
`asChild`	`boolean`	`false`
`className`	`string`	`-`

DrawerContent#

Holds the drawer panel. Supports swipe-to-close; direction inherited from root swipeDirection.

Prop	Type	Default
`variant`	`"default"	"inset"`
`showBar`	`boolean`	`true`
`showCloseButton`	`boolean`	`false`
`draggable`	`boolean`	`true`
`className`	`string`	`-`

Attribute	Default
`--bleed`	`--spacing(12)`
`--space`	`--spacing(4)`

DrawerHeader#

Header area for title and description. Accepts props or children.

Prop	Type	Default
`title`	`string`	`-`
`description`	`string`	`-`
`className`	`string`	`-`

DrawerTitle#

Accessible title for the drawer. Announced to screen readers.

Prop	Type	Default
`asChild`	`boolean`	`false`
`className`	`string`	`-`

DrawerDescription#

Accessible description for the drawer. Announced to screen readers.

Prop	Type	Default
`asChild`	`boolean`	`false`
`className`	`string`	`-`

DrawerBody#

Scrollable body content. Uses ScrollArea for overflow. Supports scrollFade for gradient edges.

Prop	Type	Default
`scrollFade`	`boolean`	`false`
`className`	`string`	`-`

DrawerFooter#

Footer area for action buttons.

Prop	Type	Default
`className`	`string`	`-`

DrawerClose#

Closes the drawer on click. Use asChild for custom close elements.

Prop	Type	Default
`asChild`	`boolean`	`false`
`className`	`string`	`-`

For a complete list of props, see the Ark UI documentation.

[

Dialog ](/docs/components/dialog)[

Editable ](/docs/components/editable)

On This Page

Installation Anatomy Usage Controlled Title & Description Using props Using components Examples Inset Variant Swipe Directions Snap Points Non-Modal Close button No Drag Area Non Draggable Custom spacing API Reference Drawer DrawerTrigger DrawerContent DrawerHeader DrawerTitle DrawerDescription DrawerBody DrawerFooter DrawerClose