Drawer

Bottom sheet drawer with drag-to-dismiss, built on Vaul.

Installation

npx @sigil-ui/cli add drawer

Preview

Import

import {
  Drawer,
  DrawerTrigger,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
  DrawerDescription,
  DrawerFooter,
  DrawerClose,
} from "@sigil-ui/components";

Usage

<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">
      <Slider defaultValue={[350]} max={400} step={10} />
    </div>
    <DrawerFooter>
      <Button variant="primary">Submit</Button>
      <DrawerClose asChild>
        <Button variant="outline">Cancel</Button>
      </DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

Examples

With form

<Drawer>
  <DrawerTrigger asChild>
    <Button>Add note</Button>
  </DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>New note</DrawerTitle>
    </DrawerHeader>
    <div className="px-4">
      <Input label="Title" />
      <Textarea label="Content" className="mt-2" />
    </div>
    <DrawerFooter>
      <Button variant="primary">Save</Button>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

Without scale background

<Drawer shouldScaleBackground={false}>
  <DrawerTrigger asChild>
    <Button>Open</Button>
  </DrawerTrigger>
  <DrawerContent>
    <DrawerHeader>
      <DrawerTitle>Settings</DrawerTitle>
    </DrawerHeader>
    <div className="p-4">Content here</div>
  </DrawerContent>
</Drawer>

Props

Drawer

Prop	Type	Default	Description
`shouldScaleBackground`	`boolean`	`true`	Scale page background when open
`open`	`boolean`	—	Controlled open state
`onOpenChange`	`(open: boolean) => void`	—	State change handler

DrawerContent

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes

Tokens

This component reads these CSS variables:

--s-background — drawer surface
--s-border — drawer border, drag handle
--s-shadow-lg — drawer elevation
--s-card-radius — top corners radius
--s-text — title text
--s-text-muted — description text

On this page