Drawer

Preview

Installation

npx shadcn@latest add @cubby-ui/drawer

Usage

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

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

Examples

Directions

Open drawer from different screen edges.

Snap Points

Configure multiple snap points for the drawer to rest at different heights.

Pixel-Based Snap Points

Use pixel values for fixed snap heights that don't depend on content size.

Sequential Snap Points

Enable sequentialSnap to prevent skipping snap points during fast swipes.

Floating Variant

Use the floating variant for a more elevated, modal-like appearance with rounded corners and shadow.

Music Player

A music player demonstrating progressive disclosure with snap points: mini player, expanded controls, and full queue view.

Scrollable Content

Use DrawerBody for scrollable content that works seamlessly with swipe gestures.

With Form

Include form elements within the drawer.

Inset Footer

Use the footerVariant="inset" prop on DrawerContent for a visually separated footer with a muted background and top border.

Sticky Footer

Add className="sticky bottom-0" to DrawerFooter to keep it fixed at the bottom of the viewport as you drag the drawer down.

Non-Modal

Control modal behavior with the modal prop. modal={false} allows full page interaction with no focus trapping. modal="trap-focus" keeps focus within the drawer while still allowing page interaction.

API Reference

The Drawer component is built on top of Base UI's Dialog. All Base UI props are supported. The documentation below only covers custom props specific to our implementation.

For the complete Base UI API, see the Base UI Dialog documentation.

Props

Drawer

Root component that manages drawer state and provides context to child components. Wraps Base UI's Dialog.Root.

DrawerContent

Main drawer container with swipe gesture handling and positioning. Composes Dialog.Portal, Dialog.Backdrop, Dialog.Viewport, and Dialog.Popup. Props are forwarded to Dialog.Popup.

DrawerBody

Scrollable content area with adaptive padding based on surrounding elements. Wraps ScrollArea.

DrawerHandle

Visual drag indicator that doubles as a close button. Automatically adjusts orientation based on drawer direction.

Components

Nested Scrollable Content

Use DrawerBody for scrollable content inside the drawer. The component handles overflow automatically and adapts its padding based on surrounding elements (header, footer).

<DrawerContent>
  <DrawerHandle />
  <DrawerHeader>
    <DrawerTitle>Long List</DrawerTitle>
  </DrawerHeader>
  <DrawerBody>{/* Your scrollable content */}</DrawerBody>
  <DrawerFooter>
    <DrawerClose render={<Button />}>Done</DrawerClose>
  </DrawerFooter>
</DrawerContent>

Animating Content Based on Snap Position

The drawer exposes a --drawer-snap-progress CSS custom property that animates from 0 (first snap) to 1 (last snap) as the drawer moves between snap points. This works in all browsers:

• Chrome 115+: GPU-accelerated CSS scroll-driven animation (no React re-renders)
• Other browsers: JavaScript fallback sets the variable automatically

Using the CSS Variable

Use --drawer-snap-progress directly in your styles for crossfade effects:

<Drawer snapPoints={["92px", 1]}>
  <DrawerTrigger>Open</DrawerTrigger>
  <DrawerContent>
    {/* Mini player fades out as drawer expands */}
    <div style={{ opacity: "calc(1 - var(--drawer-snap-progress, 0))" }}>
      Mini Player
    </div>
    {/* Full player fades in as drawer expands */}
    <div style={{ opacity: "var(--drawer-snap-progress, 0)" }}>
      Full Player
    </div>
  </DrawerContent>
</Drawer>

Or with Tailwind's arbitrary value syntax:

<div className="opacity-(calc(1-var(--drawer-snap-progress,0)))">Mini Player</div>
<div className="opacity-(--drawer-snap-progress,0)">Full Player</div>

Conditional Logic with Render Props

CSS variables work great for visual properties like opacity, but some properties like pointer-events need conditional logic. Use the render prop pattern for these:

<Drawer snapPoints={["92px", 1]}>
  {({ snapProgress }) => (
    <DrawerContent>
      {/* Opacity via CSS variable, pointer-events via JS */}
      <div
        style={{
          opacity: "calc(1 - var(--drawer-snap-progress, 0))",
          pointerEvents: snapProgress > 0.7 ? "none" : "auto",
        }}
      >
        Mini Player
      </div>
      <div
        style={{
          opacity: "var(--drawer-snap-progress, 0)",
          pointerEvents: snapProgress < 0.3 ? "none" : "auto",
        }}
      >
        Full Player
      </div>
    </DrawerContent>
  )}
</Drawer>

Render Prop Values