Drawer
Reveal supporting content in a dismissible edge panel.
Preview
Import
import { Drawer, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerFooter, DrawerTitle, DrawerDescription } from "@sigil-ui/components";Usage
<Drawer>
<DrawerTrigger asChild><Button variant="outline">Open drawer</Button></DrawerTrigger>
<DrawerContent>
<DrawerHeader>
<DrawerTitle>Settings</DrawerTitle>
<DrawerDescription>Adjust your preferences.</DrawerDescription>
</DrawerHeader>
<DrawerFooter>
<DrawerClose asChild><Button variant="ghost">Close</Button></DrawerClose>
</DrawerFooter>
</DrawerContent>
</Drawer>Sub-components
This component includes the following parts:
<DrawerTrigger><DrawerClose><DrawerContent><DrawerHeader><DrawerFooter><DrawerTitle><DrawerDescription>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
shouldScaleBackground | boolean | — | — |
open | boolean | — | — |
onOpenChange | (open: boolean) => void | — | — |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-overlay-bg | Overlay bg |
--s-overlay-blur | Overlay blur |
--s-overlay-radius | Overlay radius |
--s-radius-lg | Radius lg |
--s-overlay-border | Overlay border |
--s-border | Border |
--s-border-style | Border style |
--s-overlay-surface | Overlay surface |
--s-surface | Surface |
--s-overlay-shadow | Overlay shadow |
--s-shadow-xl | Shadow xl |
--s-radius-full | Radius full |