Drawer

Slides task-focused content from the viewport edge, with structured header and footer regions.

Installation

bunx @swift-rust/ui add drawer

Usage

tsx

1import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "@/components/ui/drawer";
2 
3<Drawer>
4  <DrawerTrigger>Open drawer</DrawerTrigger>
5  <DrawerContent>
6    <DrawerHeader>
7      <DrawerTitle>Move goal</DrawerTitle>
8      <DrawerDescription>Choose the new target.</DrawerDescription>
9    </DrawerHeader>
10    <DrawerFooter><DrawerClose>Cancel</DrawerClose></DrawerFooter>
11  </DrawerContent>
12</Drawer>

Composition

Drawer is composed of these parts:

Drawer
├── DrawerTrigger
└── DrawerContent
    ├── DrawerHeader
    │   ├── DrawerTitle
    │   └── DrawerDescription
    └── DrawerFooter
        └── DrawerClose

Examples

← Direction Dropdown Menu →