A drawer component that slides in from the edge of the screen.
The Drawer is a copy-paste component in the UI Elements collection of Lightswind UI. Built with TypeScript, Tailwind CSS, and Framer Motion for clean developer experience and rapid UI building.
Add this import to your component file
1import {2 Drawer,3 DrawerTrigger,4 DrawerContent,5 DrawerClose,6 DrawerHeader,7 DrawerFooter,8 DrawerTitle,9 DrawerDescription10} from "@/components/lightswind/drawer"
Properties and options for customizing this component
Name | Type | Default | Description | Required |
|---|
Here’s a simple example of how to use this component
1<Drawer>2 <DrawerTrigger>Open Drawer</DrawerTrigger>3 <DrawerContent>4 <DrawerHeader>5 <DrawerTitle>Drawer Title</DrawerTitle>6 <DrawerDescription>Drawer description text goes here.</DrawerDescription>7 </DrawerHeader>8 <div className="p-4">Drawer content goes here</div>9 <DrawerFooter>10 <Button>Save changes</Button>11 <DrawerClose>Cancel</DrawerClose>12 </DrawerFooter>13 </DrawerContent>14</Drawer>
Different visual and behavioral variants of the component
A drawer sliding up from the bottom of the screen.
A product byＭＵＨＩＬＡＮ and Team❤️.
