gh-vuer-ai-vuer-skill-marketplace-skills-vuer-uikit/docs/components/drawer.md

• Home
• Components
• Drawer

Drawer

A drawer component for React.

Props

Drawer

Prop Type Default Description ...Vaul props ComponentProps - All Vaul drawer root props

Drawer Root

Prop Type Default Description direction 'top' | 'right' | 'bottom' | 'left' 'bottom' Which edge to slide from ...Vaul props ComponentProps - All Vaul root props

DrawerContent

Prop Type Default Description ...Vaul props ComponentProps - All Vaul content props

Other parts (DrawerTrigger, DrawerPortal, DrawerOverlay, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription, DrawerClose) are styled wrappers around Vaul components.

Usage

<Drawer>
  <DrawerTrigger asChild>
    <Button variant="outline">Open</Button>
  </DrawerTrigger>
  <DrawerContent onOpenAutoFocus={(e) => {
    e.preventDefault();
  }}>
    <DrawerHeader>
      <DrawerTitle>Edit profile</DrawerTitle>
      <DrawerDescription>
        Make changes to your profile here. Click save when you&apos;re done.
      </DrawerDescription>
    </DrawerHeader>
    <div className="grid flex-1 auto-rows-min gap-4">
      <div className="grid gap-3">
        <label className="text-[12px]" htmlFor="sheet-demo-name">Name</label>
        <InputRoot id="sheet-demo-name" defaultValue="Pedro Duarte" />
      </div>
      <div className="grid gap-3">
        <label className="text-[12px]" htmlFor="sheet-demo-username">Username</label>
        <InputRoot id="sheet-demo-username" defaultValue="@peduarte" />
      </div>
    </div>
    <DrawerFooter>
      <Button variant="primary">Save</Button>
      <SheetClose asChild>
        <Button variant="secondary">Close</Button>
      </SheetClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

Example

<Drawer>
  <DrawerTrigger asChild><Button>Open</Button></DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Title</DrawerTitle>
      <DrawerDescription>Description</DrawerDescription>
    </DrawerHeader>
  </DrawerContent>
</Drawer>