Drawer

pnpx @frend-digital/cli add Drawer

Anatomy

import { Button } from "@/components/ui/Button";
import {
  DrawerClose,
  DrawerContent,
  DrawerFooter,
  DrawerHeader,
  DrawerMain,
  DrawerRoot,
  DrawerTrigger,
  DrawerViewport,
} from "@/components/ui/Drawer";

export default function DrawerPreview() {
  return (
    <DrawerRoot>
      <DrawerTrigger asChild>
        <Button>Open Drawer</Button>
      </DrawerTrigger>
      <DrawerViewport>
        <DrawerContent>
          <DrawerHeader>
            Header
            <DrawerClose>✕</DrawerClose>
          </DrawerHeader>
          <DrawerMain>
            <p>Drawer content</p>
          </DrawerMain>
          <DrawerFooter>Footer</DrawerFooter>
        </DrawerContent>
      </DrawerViewport>
    </DrawerRoot>
  );
}