A dialog that slides in from the edge of the screen, useful for side panels or drawers.
The Sheet 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 Sheet,3 SheetContent,4 SheetDescription,5 SheetHeader,6 SheetTitle,7 SheetTrigger,8 SheetFooter,9 SheetClose,10} from "@/components/lightswind/sheet";
Properties and options for customizing this component
Name | Type | Default | Description | Required |
|---|
Here’s a simple example of how to use this component
1import {2 Sheet,3 SheetContent,4 SheetDescription,5 SheetHeader,6 SheetTitle,7 SheetTrigger,8 SheetFooter,9 SheetClose,10} from "@/components/lightswind/sheet";11import { Button } from "@/components/lightswind/button";1213export function SheetDemo() {14 return (15 <Sheet>16 <SheetTrigger asChild>17 <Button>Open Sheet</Button>18 </SheetTrigger>19 <SheetContent>20 <SheetHeader>21 <SheetTitle>Edit Profile</SheetTitle>22 <SheetDescription>23 Make changes to your profile here. Click save when you're done.24 </SheetDescription>25 </SheetHeader>26 <div className="grid gap-4 py-4">27 {/* Form content here */}28 </div>29 <SheetFooter>30 <SheetClose asChild>31 <Button>Save changes</Button>32 </SheetClose>33 </SheetFooter>34 </SheetContent>35 </Sheet>36 );37}
Different visual and behavioral variants of the component
A sidebar panel sliding from the right edge of the screen.
A product byＭＵＨＩＬＡＮ and Team❤️.
