Saasflare UI
Components

Drawer

Mobile-first bottom drawer with drag-to-dismiss physics (Vaul). The touch-friendly Sheet.

Installation

npx shadcn@latest add https://ui.saasflare.io/r/drawer.json
pnpm add @saasflare/ui

Usage

Loading…
"use client"import { Button } from "@saasflare/ui"import {    Drawer,    DrawerClose,    DrawerContent,    DrawerDescription,    DrawerFooter,    DrawerHeader,    DrawerTitle,    DrawerTrigger,} from "@saasflare/ui/drawer"/** A bottom drawer with drag-to-dismiss, a header, and a footer action. */export function Demo() {    return (        <Drawer>            <DrawerTrigger asChild>                <Button variant="outline">Open drawer</Button>            </DrawerTrigger>            <DrawerContent>                <div className="mx-auto w-full max-w-sm">                    <DrawerHeader>                        <DrawerTitle>Invite teammates</DrawerTitle>                        <DrawerDescription>                            Send an invite link to add members to the Acme workspace.                        </DrawerDescription>                    </DrawerHeader>                    <DrawerFooter>                        <Button>Send invites</Button>                        <DrawerClose asChild>                            <Button variant="ghost">Cancel</Button>                        </DrawerClose>                    </DrawerFooter>                </div>            </DrawerContent>        </Drawer>    )}

API Reference

Drawer

Prop

Type

DrawerClose

Prop

Type

DrawerContent

Prop

Type

DrawerDescription

Prop

Type

DrawerOverlay

Prop

Type

DrawerTitle

Prop

Type

DrawerTrigger

Prop

Type

On this page