Loading…

Drawer

A bottom sheet that can be dismissed by dragging it down.

Overlays
1 file
1 npm package
Accessibility notes

Playground

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add drawer

npm packages installed: radix-ui.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

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

Examples

Every example the tests run, live and operable, side by side.

Default
Scrolling Content
Without Handle
Spring

API

Generated from the component's own types, so a prop cannot appear here without existing.

<Drawer>

Prop	Type	Default
`onOpenChange` Redeclared as a property rather than inherited as a method signature. The inherited shorthand reads as a method, which makes destructuring it look like an unbound `this` hazard to static analysis; a plain function property says what this actually is.	`(open: boolean) => void`	—

Every prop of Radix UI’s Dialog.Root, plus className.

<DrawerOverlay>

Every prop of Radix UI’s Dialog.Overlay, plus className.

<DrawerContent>

Prop	Type	Default
`animation` How the content arrives. `default` slides up as one piece. `spring` slides the panel the same way, then brings its sections — header, body, footer — in one after another. The panel itself never overshoots, because a bottom sheet that bounced would lift off the edge it is attached to. Stops under reduced motion.	`"default" \| "spring"`	`"default"`
`showHandle` Shows the grab handle. Turn off only if the drawer cannot be dragged.	`boolean`	`true`

Every prop of Radix UI’s Dialog.Content, plus className.

<DrawerHeader>

Plus every attribute of <div>.

<DrawerBody>

Plus every attribute of <div>.

<DrawerFooter>

Plus every attribute of <div>.

<DrawerTitle>

Every prop of Radix UI’s Dialog.Title, plus className.

<DrawerDescription>

Every prop of Radix UI’s Dialog.Description, plus className.

<DrawerCancel>

Every prop of Radix UI’s Dialog.Close, plus className.

Accessibility

Drag is pointer-only and never the sole way out: Escape, the overlay and DrawerCancel all dismiss. The grab handle is aria-hidden because it duplicates those affordances. Always render a DrawerTitle. The optional section stagger stops under reduced motion.

Quality

Measured from the source and its tests at build time.

All scores

8/8

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — does not apply
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — does not apply
No fixed widths — passes

Prop

Type

Default

onOpenChange

Redeclared as a property rather than inherited as a method signature. The inherited shorthand reads as a method, which makes destructuring it look like an unbound this hazard to static analysis; a plain function property says what this actually is.

(open: boolean) => void

—

Prop

Type

Default

animation

How the content arrives. default slides up as one piece. spring slides the panel the same way, then brings its sections — header, body, footer — in one after another. The panel itself never overshoots, because a bottom sheet that bounced would lift off the edge it is attached to. Stops under reduced motion.

"default" | "spring"

"default"

showHandle

Shows the grab handle. Turn off only if the drawer cannot be dragged.

boolean

true