Drawer

Installation

bunnpmpnpmyarn
pnpm dlx shadcn@latest add https://shark.vini.one/r/drawer.json

Usage

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

<Drawer>
  <DrawerTrigger />
  <DrawerContent>
    <DrawerContentInner>
      <DrawerHeader>
        <DrawerTitle />
        <DrawerDescription />
      </DrawerHeader>
      <DrawerBody>
        {/** your content here */}
      </DrawerBody>
    </DrawerContentInner>
    <DrawerFooter>
      <DrawerContentInner>
        <DrawerClose />
      </DrawerContentInner>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

Examples

Container

Use <DrawerContentInner /> to constrain drawer content width to max-w-sm.

Inset Variant

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

Swipe Directions

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

Snap Points

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

Custom spacing

Use [--space:--spacing("value")] and [--bleed:…] on <DrawerContent /> to tune padding and bottom bleed (defaults --spacing(4) and 3rem).

API Reference

Drawer

Root element of the drawer.

DrawerTrigger

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

DrawerContent

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

DrawerContentInner

Wrapper that constrains content to max-w-sm and centers it. Use to wrap the main body (header + body) or footer actions. When used inside DrawerFooter, inherits flex-col-reverse and gap-2 for button layout.

DrawerHeader

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

DrawerTitle

Accessible title for the drawer. Announced to screen readers.

DrawerDescription

Accessible description for the drawer. Announced to screen readers.

DrawerBody

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

DrawerFooter

Footer area for action buttons.

DrawerClose

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

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