Drawer React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Usage

Import Drawer from @/components/ui/drawer.

import { SlidersHorizontal } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Drawer, DrawerClose } from "@/components/ui/drawer"

export function ListingFilters({ results, onReset }: { results: number; onReset: () => void }) {
  return (
    <Drawer
      trigger={
        <Button variant="soft" leftIcon={<SlidersHorizontal />}>
          Filters
        </Button>
      }
      title="Filters"
      description="New York · 1,240 listings"
      desktop="side"
      closeLabel="Close filters"
      shortcut="mod+j"
      footer={
        <>
          <DrawerClose asChild>
            <Button size="lg" fullWidth>
              Show {results} results
            </Button>
          </DrawerClose>
          <Button size="lg" variant="ghost" fullWidth onClick={onReset}>
            Reset
          </Button>
        </>
      }
    >
      <p className="text-sm text-muted-foreground">Price, condition and categories</p>
    </Drawer>
  )
}

Props

• defaultOpendefault false
  boolean

  Starts open (uncontrolled) and skips the entrance animation. Pass open and onOpenChange instead to control it.

• open
  boolean

  Controlled open state. The root keeps it across the 768px breakpoint, so a resize never closes the drawer.

• onOpenChange
  (open: boolean) => void

  Called when the drawer opens or closes, by the trigger, a drag, Escape, an outside tap or a close button.

• titledefault ""
  ReactNode

  The title under the handle, also the dialog's accessible name. The demo shows its sample while this is empty.

• descriptiondefault ""
  ReactNode

  A quieter line under the title, linked with aria-describedby. Without one the drawer opts out of the description (Radix's aria-describedby={undefined}).

• hideTitledefault false
  boolean

  Keeps the title for screen readers only, for sheets whose content speaks for itself (a share sheet, a photo).

• closeLabeldefault "Close"
  string

  aria-label of the close button, e.g. “Close filters”. The demo spells it out under the page.

• trigger
  ReactNode

  The element that opens the drawer, rendered with asChild: a single element that takes a ref, like a Button. It gets aria-keyshortcuts when a shortcut is set.

• children
  ReactNode

  The body. It scrolls on its own (overscroll contained), pads the home indicator when it is the last part, and drives the header and footer hairlines.

• footer
  ReactNode

  Actions pinned under the body, primary first: stacked full width in sheets (primary on top), a row with the primary on the right in side and dialog modes. Give sheet buttons size="lg" fullWidth.

• directiondefault "bottom"
  "bottom" | "top" | "left" | "right"

  The edge it slides in from. Bottom and top sheets get the handle; left and right panels are 320 to 540px wide, always show the close button, and leave a tappable sliver of the page on phones.

• desktopdefault "sheet"
  "sheet" | "side" | "dialog"

  What it becomes at 768px and up. sheet: the same drawer, capped and centered. side: a panel floating 8px off the right edge. dialog: a centered dialog with a spring (no drag). Phones always get the sheet.

• sizedefault "md"
  "sm" | "md" | "lg" | "full"

  Bottom and top sheets on desktop: max width 420 / 560 / 720px or the whole screen. Left, right and side panels: 320 / 400 / 540px or the whole screen. Dialog: 400 / 520 / 720px or 16px from every edge.

• heightdefault "auto"
  "auto" | "full"

  auto grows with the content up to 92% of the screen; full always takes 92%. Sheets with snap points are full.

• variantdefault "attached"
  "attached" | "floating"

  attached sits on the screen edge with the outer corners square; floating keeps 8px off every edge and the safe area, with every corner rounded (the iOS 26 look). The desktop side panel always floats.

• radiusdefault "lg"
  "none" | "sm" | "md" | "lg"

  Sheet corners 0 / 16 / 24 / 28px (28px is the design system's sheet radius). In dialog mode 0 / 12 / 16 / 24px. Any value through className="[--drawer-radius:20px]".

• showHandledefault true
  boolean

  The drag handle of bottom and top sheets. A tap on it steps through the snap points. A sheet that is not dismissible and has no snap points hides it, since there is nothing to drag (like iOS).

• showClosedefault false
  boolean

  Adds the round close button to the corner of bottom and top sheets. Panels and dialogs always have one, since they have no handle.

• overlaydefault true
  boolean

  The dim backdrop. Turned off, the invisible layer stays, so the page still does not scroll and a tap outside still closes. There is never one with modal={false}.

• headerAligndefault "start"
  "start" | "center"

  Title and description alignment. center reads like an iOS sheet; the close button keeps both sides even.

• dismissibledefault true
  boolean

  false: no drag to close, no outside tap, no Escape and no shortcut close, and no handle unless there are snap points. Only a close button or an action inside (DrawerClose, or setting open) closes it, e.g. terms that must be accepted.

• modaldefault true
  boolean

  false: no overlay, no focus trap and no scroll lock; the page behind stays usable and readable, like a results sheet over a map. Focus is not moved into it on open.

• handleOnlydefault false
  boolean

  Drags only from the handle, for content with its own horizontal gestures (a carousel, a map, a slider).

• scaleBackgrounddefault false
  boolean

  Scales the page back behind the sheet like iOS. Needs vaul-drawer-wrapper="" (or data-vaul-drawer-wrapper="") on the element that wraps your app, e.g. <div vaul-drawer-wrapper="" className="min-h-dvh bg-background">. The demo marks its listings page.

• repositionInputsdefault true
  boolean

  Moves the sheet up when the on-screen keyboard opens so the focused field stays visible. Turn it off for sheets that handle the keyboard themselves.

• shortcutdefault ""
  string

  A key combo in mod+k notation (⌘ on Apple devices, Ctrl elsewhere) that toggles the drawer from anywhere on the page; the trigger gets aria-keyshortcuts. Empty binds nothing.

• snapPoints
  (number | string)[]

  Stops on the way up: fractions of the screen ([0.45, 1]) or px strings (["320px", 1]). The sheet becomes full height, starts at the first point, the body only scrolls at the last one, and a tap on the handle steps to the next. Ignored in desktop dialog mode.

• activeSnapPoint
  number | string | null

  The current snap point, controlled. Uncontrolled it starts at the first point and returns there after a close.

• onActiveSnapPointChange
  (point: number | string | null) => void

  Called when a drag or a handle tap settles on another snap point.

• fadeFromIndex
  number

  The snap point index from which the overlay dims. Defaults to the last point, so a half open sheet leaves the page bright.

• container
  HTMLElement | null

  Portal target, document.body by default. Inside a transformed or contain:layout element the sheet, its snap points and its 92% height stay within that element (the map example).

• onAnimationEnd
  (open: boolean) => void

  Runs after the open or close animation with the state it ended in, e.g. to reset a form once the sheet is gone.

• classNames
  Partial<Record<"overlay" | "content" | "handle" | "close" | "header" | "title" | "description" | "body" | "footer", string>>

  Extra classes for the inner parts: the backdrop, the sheet, the handle, the close button, and the header, title, description, body and footer the simple API renders (the same keys as the sheet).

• className
  string

  Extra classes for the sheet (drawer-content), merged last. Set [--drawer-radius:20px] here for a custom corner.

Parts

FAQ

Used in

More React overlay components