Drawer · Components

a bottom sheet you can drag down (vaul) · mobile-first quick actions and filters

The web kit's real component, live. Follows this site's theme.

Usage

Phone-sized web flows: filters, a quick form, a share menu. On desktop use Dialog or Sheet.

API

<Drawer><DrawerTrigger asChild /><DrawerContent><DrawerHeader><DrawerTitle /></DrawerHeader>…<DrawerFooter /></DrawerContent></Drawer>

Get it

Already in every copy of the web kit:

import { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerFooter, DrawerClose } from '@/components/ui/drawer';

Details

Exports: Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription, DrawerFooter, DrawerClose
Source: apps/web/components/ui/drawer.tsx
Also searched as: bottom sheet, action sheet, swipe
Upstream: Unchanged from shadcn/ui; installs from their registry.

Agents: the whole registry is at /llms.txt.