Aspekt logoAspekt UI

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>