Drawer

InstallationCopy Anchor Link

pnpm dlx shadcn@latest add @columbus/drawer

UsageCopy Anchor Link

import {
  Drawer,
  DrawerClose,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerPanel,
  DrawerPopup,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer";

<Drawer>
  <DrawerTrigger render={<Button variant="outline" />}>Open</DrawerTrigger>
  <DrawerPopup showBar>
    <DrawerHeader>
      <DrawerTitle>Title</DrawerTitle>
      <DrawerDescription>Description</DrawerDescription>
    </DrawerHeader>
    <DrawerPanel>Content</DrawerPanel>
    <DrawerFooter>
      <DrawerClose render={<Button variant="ghost" />}>Close</DrawerClose>
    </DrawerFooter>
  </DrawerPopup>
</Drawer>;

Always include a DrawerTitle. Screen readers use it as the drawer's name. If it shouldn't be visible, hide the header with className="sr-only".

PositionsCopy Anchor Link

position on Drawer sets the edge the drawer opens from and the direction you swipe to close it.

Snap pointsCopy Anchor Link

snapPoints lets a bottom drawer rest at set heights. Use pixel strings like "320px" or fractions of the screen like 0.5; 1 is full height.

Action menuCopy Anchor Link

The DrawerMenu parts look like Menu items but are sized for touch. Wrap an item in DrawerClose to close the drawer when it's picked. DrawerMenuTrigger opens a nested drawer.

API referenceCopy Anchor Link

Built on Base UI Drawer. Every part accepts the props of its Base UI counterpart, including snapPoints, modal, and open on Drawer.

DrawerCopy Anchor Link

DrawerPopupCopy Anchor Link

DrawerHeader, DrawerFooter, DrawerPanelCopy Anchor Link

DrawerMenuItem and DrawerMenuCheckboxItemCopy Anchor Link