Drawer is used to reveal contextual content from an edge.
tsx
import { Drawer, DrawerContent, DrawerTrigger } from "@/components/aspekt/drawer";<Drawer side="right" detached> <DrawerTrigger>View order</DrawerTrigger> <DrawerContent> <DrawerBody> <DrawerHeader> <DrawerTitle>Order #1048</DrawerTitle> <DrawerDescription> A shipment for Acme Studio is scheduled for Tuesday morning. </DrawerDescription> </DrawerHeader> <div className="grid gap-2 text-sm"> <div className="flex justify-between gap-4"> <span>Customer</span> <span>Acme Studio</span> </div> <div className="flex justify-between gap-4"> <span>Total</span> <span>$3,240.00</span> </div> </div> <DrawerFooter> <DrawerClose>Close</DrawerClose> <Button color="neutral">Create label</Button> </DrawerFooter> </DrawerBody> </DrawerContent></Drawer>