{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"drawer-web","type":"registry:item","title":"Drawer","description":"A modal panel that slides in from an edge of the viewport to present focused content or actions without leaving the current page.","files":[{"path":"snippets/web/drawer.tsx","content":"import { Button, Drawer } from \"@heroui/react\";\n\nexport function DrawerExample() {\n  return (\n    <Drawer>\n      <Button variant=\"secondary\">Open Drawer</Button>\n      <Drawer.Backdrop>\n        <Drawer.Content>\n          <Drawer.Dialog>\n            <Drawer.Handle />\n            <Drawer.Header>\n              <Drawer.Heading>Drawer Title</Drawer.Heading>\n            </Drawer.Header>\n            <Drawer.Body>\n              <p>\n                This is a bottom drawer built with React Aria's Modal component. It slides up from\n                the bottom of the screen with a smooth CSS transition.\n              </p>\n            </Drawer.Body>\n            <Drawer.Footer>\n              <Button slot=\"close\" variant=\"secondary\">\n                Cancel\n              </Button>\n              <Button slot=\"close\">Confirm</Button>\n            </Drawer.Footer>\n          </Drawer.Dialog>\n        </Drawer.Content>\n      </Drawer.Backdrop>\n    </Drawer>\n  );\n}\n","type":"registry:file","target":"~/snippets/web/drawer.tsx"}],"author":"heroui","dependencies":["@heroui/react"]}