Skip to content
Docs

@hua-labs/hua
v1.1.0

bash
npm install @hua-labs/hua
tsx
import { Drawer, DrawerHeader, DrawerContent, DrawerFooter } from "@hua-labs/hua";

isOpenboolean-Drawer open/close state (recommended)
openboolean-Drawer open/close state (deprecated, use isOpen)
onClose() => void-Close callback (recommended)
onOpenChange(open: boolean) => void-State change callback (deprecated, use onClose)
closablebooleantrueShow close button
backdropClassNamestring-Additional CSS class for backdrop
side"left" | "right" | "top" | "bottom""right"Drawer slide direction
size"sm" | "md" | "lg" | "xl" | "full""md"Drawer size
showBackdropbooleantrueShow backdrop overlay
closeOnBackdropClickbooleantrueClose drawer when backdrop is clicked
closeOnEscapebooleantrueClose drawer when ESC key is pressed

docs:common.basicUsagetsx
// Via framework (recommended)
import { Drawer, DrawerHeader, DrawerContent, DrawerFooter, Button } from '@hua-labs/hua';
// Or direct import
// import { Drawer, DrawerHeader, DrawerContent, DrawerFooter } from '@hua-labs/ui/overlay';

const [open, setOpen] = useState(false);

<Button onClick={() => setOpen(true)}>Open Drawer</Button>

<Drawer open={open} onOpenChange={setOpen}>
  <DrawerHeader onClose={() => setOpen(false)}>
    <h2 className="text-xl font-bold">Drawer Title</h2>
  </DrawerHeader>
  <DrawerContent>
    <p>Drawer content goes here...</p>
  </DrawerContent>
  <DrawerFooter>
    <Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
    <Button onClick={() => setOpen(false)}>Confirm</Button>
  </DrawerFooter>
</Drawer>
docs:components.drawer.demo.sideOptionstsx
// Left side
<Drawer open={open} onOpenChange={setOpen} side="left">
  ...
</Drawer>

// Top side
<Drawer open={open} onOpenChange={setOpen} side="top">
  ...
</Drawer>

// Bottom side (mobile-friendly)
<Drawer open={open} onOpenChange={setOpen} side="bottom">
  ...
</Drawer>
docs:components.drawer.demo.sizeOptionstsx
<Drawer open={open} onOpenChange={setOpen} size="sm">...</Drawer>
<Drawer open={open} onOpenChange={setOpen} size="md">...</Drawer>
<Drawer open={open} onOpenChange={setOpen} size="lg">...</Drawer>
<Drawer open={open} onOpenChange={setOpen} size="xl">...</Drawer>
<Drawer open={open} onOpenChange={setOpen} size="full">...</Drawer>

  • •docs:components.drawer.accessibility.keyboardNavigation: docs:components.drawer.accessibility.keyboardNavigationDesc
  • •docs:common.accessibility.focusManagement: docs:components.drawer.accessibility.focusManagementDesc
  • •docs:components.drawer.accessibility.scrollLock: docs:components.drawer.accessibility.scrollLockDesc
DropdownBottomSheet