Drawer

Bottom sheet on the native <dialog> that springs up, drags with a rubber-band feel, snaps to heights, and flicks down to dismiss while the backdrop fades with it.

Open

snapPoints

dismissible

Installation

npx shadcn@latest add @glint-ui/drawer

First time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/drawer.json

Usage

import { Drawer } from "@/components/ui/drawer";

<Drawer snapPoints={[0.5, 1]}>
  <DrawerTrigger>Filters</DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Filters</DrawerTitle>
      <DrawerDescription>Refine your results.</DrawerDescription>
    </DrawerHeader>
    {/* ... */}
    <DrawerFooter>
      <DrawerClose>Done</DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

Props

Prop	Type	Default	Description
snapPoints	string	"0.55, 1"	Resting heights as fractions of the sheet, number[] in code. Component default [1]; this demo uses [0.55, 1].
dismissible	boolean	true	Close by dragging down, the backdrop or Escape.
defaultSnap	ReactNode	—	Index into snapPoints to open at (default: the tallest).
defaultOpen	boolean	false	Initial open state when uncontrolled.
open	ReactNode	—	Controlled open state (with onOpenChange).
position	"fixed" \| "absolute"	"fixed"	fixed = true modal via showModal(); absolute = contained in the nearest positioned parent.
children	ReactNode	—	DrawerTrigger and DrawerContent (with DrawerHeader, DrawerTitle, DrawerDescription, DrawerFooter, DrawerClose).
className	string	—	Extra classes for the root element.