LLabanaat

Drawer

A side panel (a.k.a. "Sheet") built on the same Radix Dialog primitive as Dialog, reusing its focus trap and dismiss behavior, with slide-in positioning via the side prop.

<Drawer>
  <DrawerTrigger asChild><Button>Edit member</Button></DrawerTrigger>
  <DrawerContent side="right">
    <DrawerHeader>
      <DrawerTitle>Edit member</DrawerTitle>
      <DrawerDescription>Update this member's role and access.</DrawerDescription>
    </DrawerHeader>
    <DrawerFooter>
      <DrawerClose asChild><Button variant="ghost">Cancel</Button></DrawerClose>
      <Button>Save</Button>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

Editable — change the code above and the preview updates live.

Installation

import { Drawer, DrawerTrigger, DrawerContent, DrawerHeader, DrawerTitle, DrawerFooter, DrawerClose } from "@labanaat/ui/drawer";

Props

PropTypeDefaultDescription
side"left" | "right" | "bottom""right"Which edge the panel slides in from (on DrawerContent)
hideCloseButtonbooleanfalseOmits the built-in close button (on DrawerContent)

The rest of Drawer's subcomponents follow Radix's Dialog API directly (it shares the same primitive as Dialog).