{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "p-drawer-7",
  "description": "Nested bottom drawers with centered content",
  "registryDependencies": [
    "@coss/button",
    "@coss/drawer"
  ],
  "files": [
    {
      "path": "registry/default/particles/p-drawer-7.tsx",
      "content": "import { Button } from \"@/registry/default/ui/button\";\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerHeader,\n  DrawerPanel,\n  DrawerPopup,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/default/ui/drawer\";\n\nexport default function Particle() {\n  return (\n    <Drawer>\n      <DrawerTrigger render={<Button variant=\"outline\" />}>\n        Nested drawers\n      </DrawerTrigger>\n      <DrawerPopup showBar>\n        <DrawerHeader className=\"text-center\">\n          <DrawerTitle>First step</DrawerTitle>\n          <DrawerDescription>\n            This is the first step. Tap the button below to continue to the next\n            screen.\n          </DrawerDescription>\n        </DrawerHeader>\n        <DrawerFooter\n          className=\"justify-center sm:justify-center\"\n          variant=\"bare\"\n        >\n          <DrawerClose render={<Button variant=\"ghost\" />}>Cancel</DrawerClose>\n          <Drawer>\n            <DrawerTrigger render={<Button variant=\"outline\" />}>\n              Continue\n            </DrawerTrigger>\n            <DrawerPopup showBar>\n              <DrawerHeader className=\"text-center\">\n                <DrawerTitle>Second step</DrawerTitle>\n                <DrawerDescription>\n                  You&apos;ve reached the second step. Tap the button below to\n                  continue to the next screen.\n                </DrawerDescription>\n              </DrawerHeader>\n              <DrawerPanel>\n                <div className=\"flex justify-center\">\n                  <div className=\"size-48 shrink-0 rounded-xl border bg-muted\" />\n                </div>\n              </DrawerPanel>\n              <DrawerFooter\n                className=\"justify-center sm:justify-center\"\n                variant=\"bare\"\n              >\n                <DrawerClose render={<Button variant=\"ghost\" />}>\n                  Back\n                </DrawerClose>\n                <Drawer>\n                  <DrawerTrigger render={<Button variant=\"outline\" />}>\n                    Continue\n                  </DrawerTrigger>\n                  <DrawerPopup showBar>\n                    <DrawerHeader className=\"text-center\">\n                      <DrawerTitle>Third step</DrawerTitle>\n                      <DrawerDescription>\n                        You&apos;ve reached the final step. You can close this\n                        drawer or go back.\n                      </DrawerDescription>\n                    </DrawerHeader>\n                    <DrawerPanel>\n                      <div className=\"flex justify-center\">\n                        <div className=\"size-32 shrink-0 rounded-full border bg-muted\" />\n                      </div>\n                    </DrawerPanel>\n                  </DrawerPopup>\n                </Drawer>\n              </DrawerFooter>\n            </DrawerPopup>\n          </Drawer>\n        </DrawerFooter>\n      </DrawerPopup>\n    </Drawer>\n  );\n}\n",
      "type": "registry:block"
    }
  ],
  "categories": [
    "drawer"
  ],
  "type": "registry:block"
}