Drawer

Installation#

pnpmbunnpmyarn
pnpm dlx shadcn@latest add @shark/drawer

Anatomy#

Drawer
├── DrawerTrigger
└── DrawerContent
    ├── DrawerGrabber
    ├── DrawerContentInner
    │   ├── DrawerHeader
    │   └── DrawerBody
    └── DrawerFooter
        └── DrawerClose

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")] on DrawerContent to adjust internal spacing.

Default spacing is --spacing(6).

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.

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.