Drawer

Ready

Draggable bottom panel.

Requires vaul

Installation

$ npx @oratiq-js/ui add drawer

Copies the component and everything it depends on into your project, then lists the npm packages to install. The code is yours after this.

Usage

import

import { Drawer, DrawerTrigger, DrawerPortal, DrawerClose, DrawerOverlay, DrawerContent, /* … */ } from "@/components/ui/drawer";

Default

Drawer or Sheet?

On touch, prefer Drawer. The drag handle sits within thumb reach at the bottom of the screen; a close button in the top corner of a 6.7-inch phone does not. On desktop, prefer Sheet — there's no drag affordance with a mouse.

View source on GitHub → components/ui/drawer.tsx