Aspekt logoAspekt UI

Drawer is used to reveal contextual content from an edge.

tsx
import { DrawerRoot, DrawerTrigger } from "@/components/aspekt/drawer";
<DrawerRoot side="right" detached>  <DrawerTrigger>Open drawer</DrawerTrigger>  <DrawerPortal>    <DrawerOverlay />    <DrawerViewport>      <DrawerContent>        <DrawerBody>          <DrawerHeader>            <DrawerTitle>Component details</DrawerTitle>            <DrawerDescription>              Review details before saving changes.            </DrawerDescription>          </DrawerHeader>          <DrawerFooter>            <DrawerClose>Cancel</DrawerClose>            <Button color="neutral">Save</Button>          </DrawerFooter>        </DrawerBody>      </DrawerContent>    </DrawerViewport>  </DrawerPortal></DrawerRoot>