Binhlaig UI Component

Drawer

A gesture-enabled panel that slides from an edge of the screen for menus, filters, forms and details.

Installation

Initialize Binhlaig UI and install Drawer with your preferred installer.

Initialize first

npx binhlaig-ui@latest init

Terminal

npx binhlaig-ui@latest add drawer --installer native

Import

Import Drawer primitives from your UI directory.

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

Bottom Drawer

The default drawer opens from the bottom and supports swipe-to-dismiss.

Side Drawers

Match the drawer side with the swipe direction used to dismiss it.

Form Drawer

Use Drawer for compact mobile-friendly forms.

Controlled State

Control the drawer with React state.

Update or Overwrite

Replace an older Drawer source with the latest registry version.

npx binhlaig-ui@latest add drawer --installer native --overwrite

API Reference

Main components and custom props available in the Binhlaig UI Drawer.

Component	Purpose
`Drawer`	Controls state and swipe behavior.
`DrawerTrigger`	Opens the drawer.
`DrawerContent`	Renders popup, overlay and viewport.
`DrawerHeader`	Groups title and description.
`DrawerTitle`	Accessible drawer title.
`DrawerDescription`	Accessible supporting text.
`DrawerBody`	Scrollable selectable content area.
`DrawerFooter`	Aligns drawer actions.
`DrawerClose`	Closes the drawer.

DrawerContent prop	Values	Default
`side`	top, right, bottom, left	`bottom`
`showHandle`	boolean	top/bottom only
`showCloseButton`	boolean	`false`

Previous component

Form

All components