Drawer

A bottom sheet you can drag away. Built on a native dialog, so focus containment and inerting the page come from the platform rather than a hand-rolled trap.

src/components/ui/drawer.tsx

About

From the component's own source, where it was written.

A sheet that slides from the bottom and can be dragged away.

Sheet covers side panels; this is the mobile gesture — a grab handle, a drag that follows the finger, and a release that either snaps back or dismisses.

Built on a native <dialog> with showModal(), like the rest of the overlays here, so focus containment, inerting the page and the top layer come from the platform rather than from a hand-rolled trap.

Two details make the drag feel right. Movement is applied as a transform with the transition switched off while the finger is down — animating a value you are also setting every frame produces lag against the pointer. And dismissal is decided by velocity as well as distance, so a quick flick closes it without dragging the whole height.

Install

npx astralyx-ui add drawer

Usage

import { Drawer, DrawerHeader, DrawerTitle } from '@/components/ui/drawer'

<Drawer open={open} onOpenChange={setOpen}>
  <DrawerHeader><DrawerTitle>Filters</DrawerTitle></DrawerHeader>
  …
</Drawer>

Composer

Change the props and the source below follows.

Props

title

footer actions

tsx

<Drawer open={open} onOpenChange={setOpen}>
  …
</Drawer>

Examples

Bottom sheet

tsx

<Drawer open={open} onOpenChange={setOpen}>…</Drawer>

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`Drawer`

A sheet that slides from the bottom and can be dragged away.

Extends Omit<ComponentProps<'dialog'>, 'open' | 'onToggle'>.

Prop	Type	Default	Description
children	ReactNode	required	—
open	boolean	required	Controlled only — the drawer never closes itself without telling you.
onOpenChange	(open: boolean) => void	required	Controlled only — the drawer never closes itself without telling you.

`DrawerHeader`

Extends ComponentProps<'div'>.

`DrawerTitle`

Extends ComponentProps<'h2'>.

`DrawerDescription`

Extends ComponentProps<'p'>.

`DrawerFooter`

Extends ComponentProps<'div'>.

Behaviour

Topic	Detail	Description
dismissal	distance or velocity	A flick closes it without dragging the full height; anything shorter and slower snaps back.
drag	transform	Transition is off while the finger is down — animating a value you are also setting every frame lags behind the pointer.
parts	DrawerHeader / Title / Description / Footer	Same shape as Dialog and Sheet.