shadcn-solid

Docs

Drawer

A draggable dialog that is attached to any side of the viewport.

Installation

pnpm dlx shadcn-solid@latest add drawer

Usage

import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerLabel,
  DrawerTrigger,
} from "@/components/ui/drawer"

<Drawer>
  <DrawerTrigger>Open</DrawerTrigger>
  <DrawerContent>
    <DialogHeader>
      <DrawerLabel>Are you sure absolutely sure?</DrawerLabel>
      <DialogDescription>
        This action cannot be undone. This will permanently delete your account
        and remove your data from our servers.
      </DialogDescription>
    </DialogHeader>
  </DrawerContent>
</Drawer>

Examples

Side

Use the side property to <Drawer /> to indicate the edge of the screen where the component will appear. The values can be top, right, bottom or left.

Dialog Dropdown Menu