Drawer

Bottom sheet drawer via vaul library

Default

Usage

import { Drawer, DrawerTrigger, DrawerPortal, DrawerClose, DrawerOverlay, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription } from '@tryvienna/ui'

<Drawer>
  <DrawerTrigger asChild>
    <Button variant="outline">Open Drawer</Button>
  </DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Move Goal</DrawerTitle>
      <DrawerDescription>Set your daily activity goal.</DrawerDescription>
    </DrawerHeader>
    <div className="p-4">
      <p className="text-sm text-muted-foreground">Drag to adjust or use the buttons below.</p>
    </div>
    <DrawerFooter>
      <Button>Submit</Button>
      <DrawerClose asChild>
        <Button variant="outline">Cancel</Button>
      </DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

Examples

Default

Default

<Drawer>
  <DrawerTrigger asChild>
    <Button variant="outline">Open Drawer</Button>
  </DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Move Goal</DrawerTitle>
      <DrawerDescription>Set your daily activity goal.</DrawerDescription>
    </DrawerHeader>
    <div className="p-4">
      <p className="text-sm text-muted-foreground">Drag to adjust or use the buttons below.</p>
    </div>
    <DrawerFooter>
      <Button>Submit</Button>
      <DrawerClose asChild>
        <Button variant="outline">Cancel</Button>
      </DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

API Reference

Drawer

Also accepts all props from DrawerPrimitive.Root.

DrawerTrigger

Also accepts all props from DrawerPrimitive.Trigger.

DrawerPortal

Also accepts all props from DrawerPrimitive.Portal.

DrawerClose

Also accepts all props from DrawerPrimitive.Close.

DrawerOverlay

Also accepts all props from DrawerPrimitive.Overlay.

DrawerContent

Also accepts all props from DrawerPrimitive.Content.

DrawerHeader

Also accepts all props from div.

DrawerFooter

Also accepts all props from div.

DrawerTitle

Also accepts all props from DrawerPrimitive.Title.

DrawerDescription

Also accepts all props from DrawerPrimitive.Description.

Data Attributes

Component	data-slot
Drawer	"drawer-content"
DrawerTrigger	"drawer-trigger"
DrawerPortal	"drawer-portal"
DrawerClose	"drawer-close"
DrawerOverlay	"drawer-overlay"
DrawerContent	"drawer-content"
DrawerHeader	"drawer-header"
DrawerFooter	"drawer-footer"
DrawerTitle	"drawer-title"
DrawerDescription	"drawer-description"