{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "nested-vaul-drawer",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/drawer/nested-vaul-drawer.tsx",
      "content": "'use client';\n\nimport { Drawer } from 'vaul';\n\nexport default function MyDrawer() {\n  return (\n    <div className='flex justify-center'>\n      <Drawer.Root shouldScaleBackground>\n        <Drawer.Trigger asChild>\n          <button className='inline-flex h-12 w-fit mx-auto animate-background-shine items-center justify-center rounded-md  border-2 dark:border-[#656fe2] border-[#c0c6fc] dark:bg-[linear-gradient(110deg,#1e2a78,45%,#3749be,55%,#1e2a78)] bg-[linear-gradient(110deg,#3d5af1,45%,#5471ff,55%,#3d5af1)] bg-size-[200%_100%] dark:hover:border-white px-6 font-medium text-white dark:text-white transition-colors focus:outline-hidden focus:ring-2 dark:focus:ring-neutral-400 focus:ring-offset-2 focus:ring-offset-neutral-50'>\n            Open Drawer\n          </button>\n        </Drawer.Trigger>\n        <Drawer.Portal>\n          <Drawer.Overlay className='fixed inset-0 bg-black/40' />\n          <Drawer.Content className='bg-neutral-100 flex flex-col rounded-t-[10px] h-full mt-24 max-h-[96%] fixed bottom-0 left-0 right-0'>\n            <div className='p-4 bg-white rounded-t-[10px] flex-1'>\n              <div className='mx-auto w-12 h-1.5 shrink-0 rounded-full bg-neutral-300 mb-8' />\n              <div className='max-w-md mx-auto'>\n                <Drawer.Title className='font-medium mb-4'>Drawer for React.</Drawer.Title>\n                <p className='text-neutral-600 mb-2'>\n                  This component can be used as a Dialog replacement on mobile and tablet devices.\n                </p>\n                <p className='text-neutral-600 mb-2'>\n                  It comes unstyled and has gesture-driven animations.\n                </p>\n                <p className='text-neutral-600 mb-6'>\n                  It uses{' '}\n                  <a\n                    href='https://www.radix-ui.com/docs/primitives/components/dialog'\n                    className='underline'\n                    target='_blank'\n                    rel='noreferrer noopener'\n                  >\n                    Radix&rsquo;s Dialog primitive\n                  </a>{' '}\n                  under the hood and is inspired by{' '}\n                  <a\n                    href='https://twitter.com/devongovett/status/1674470185783402496'\n                    className='underline'\n                    target='_blank'\n                    rel='noreferrer noopener'\n                  >\n                    this tweet.\n                  </a>\n                </p>\n                <Drawer.NestedRoot>\n                  <Drawer.Trigger className='rounded-md mb-6 w-full bg-neutral-900 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-neutral-800 focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600'>\n                    Open Second Drawer\n                  </Drawer.Trigger>\n                  <Drawer.Portal>\n                    <Drawer.Overlay className='fixed inset-0 bg-black/40' />\n                    <Drawer.Content className='bg-neutral-100 flex flex-col rounded-t-[10px] h-full mt-24 max-h-[94%] fixed bottom-0 left-0 right-0'>\n                      <div className='p-4 bg-white rounded-t-[10px] flex-1'>\n                        <div className='mx-auto w-12 h-1.5 shrink-0 rounded-full bg-neutral-300 mb-8' />\n                        <div className='max-w-md mx-auto'>\n                          <Drawer.Title className='font-medium mb-4'>\n                            This drawer is nested.\n                          </Drawer.Title>\n                          <p className='text-neutral-600 mb-2'>\n                            Place a{' '}\n                            <span className='font-mono text-[15px] font-semibold'>\n                              `Drawer.NestedRoot`\n                            </span>{' '}\n                            inside another drawer and it will be nested automatically for you.\n                          </p>\n                          <p className='text-neutral-600 mb-2'>\n                            You can view more examples{' '}\n                            <a\n                              href='https://github.com/emilkowalski/vaul#examples'\n                              className='underline'\n                              target='_blank'\n                              rel='noreferrer noopener'\n                            >\n                              here\n                            </a>\n                            .\n                            <Drawer.NestedRoot>\n                              <Drawer.Trigger className='rounded-md mb-6 w-full bg-neutral-900 px-3.5 py-2.5 text-sm font-semibold text-white shadow-xs hover:bg-neutral-800 focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-600'>\n                                Open third Drawer\n                              </Drawer.Trigger>\n                              <Drawer.Portal>\n                                <Drawer.Overlay className='fixed inset-0 bg-black/40' />\n                                <Drawer.Content className='bg-neutral-100 flex flex-col rounded-t-[10px] h-full mt-24 max-h-[94%] fixed bottom-0 left-0 right-0'>\n                                  <div className='p-4 bg-white rounded-t-[10px] flex-1'>\n                                    <div className='mx-auto w-12 h-1.5 shrink-0 rounded-full bg-neutral-300 mb-8' />\n                                    <div className='max-w-md mx-auto'>\n                                      <Drawer.Title className='font-medium mb-4'>\n                                        This drawer is nested.\n                                      </Drawer.Title>\n                                      <p className='text-neutral-600 mb-2'>\n                                        Place a{' '}\n                                        <span className='font-mono text-[15px] font-semibold'>\n                                          `Drawer.NestedRoot`\n                                        </span>{' '}\n                                        inside another drawer and it will be nested automatically\n                                        for you.\n                                      </p>\n                                      <p className='text-neutral-600 mb-2'>\n                                        You can view more examples{' '}\n                                        <a\n                                          href='https://github.com/emilkowalski/vaul#examples'\n                                          className='underline'\n                                          target='_blank'\n                                          rel='noreferrer noopener'\n                                        >\n                                          here\n                                        </a>\n                                        .\n                                      </p>\n                                    </div>\n                                  </div>\n                                  <div className='p-4 bg-neutral-100 border-t border-neutral-200 mt-auto'>\n                                    <div className='flex gap-6 justify-end max-w-md mx-auto'>\n                                      <a\n                                        className='text-xs text-neutral-600 flex items-center gap-0.25'\n                                        href='https://github.com/emilkowalski/vaul'\n                                        target='_blank'\n                                        rel='noreferrer noopener'\n                                      >\n                                        GitHub\n                                        <svg\n                                          fill='none'\n                                          height='16'\n                                          stroke='currentColor'\n                                          strokeLinecap='round'\n                                          strokeLinejoin='round'\n                                          strokeWidth='2'\n                                          viewBox='0 0 24 24'\n                                          width='16'\n                                          aria-hidden='true'\n                                          className='w-3 h-3 ml-1'\n                                        >\n                                          <path d='M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6'></path>\n                                          <path d='M15 3h6v6'></path>\n                                          <path d='M10 14L21 3'></path>\n                                        </svg>\n                                      </a>\n                                      <a\n                                        className='text-xs text-neutral-600 flex items-center gap-0.25'\n                                        href='https://twitter.com/emilkowalski_'\n                                        target='_blank'\n                                        rel='noreferrer noopener'\n                                      >\n                                        Twitter\n                                        <svg\n                                          fill='none'\n                                          height='16'\n                                          stroke='currentColor'\n                                          strokeLinecap='round'\n                                          strokeLinejoin='round'\n                                          strokeWidth='2'\n                                          viewBox='0 0 24 24'\n                                          width='16'\n                                          aria-hidden='true'\n                                          className='w-3 h-3 ml-1'\n                                        >\n                                          <path d='M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6'></path>\n                                          <path d='M15 3h6v6'></path>\n                                          <path d='M10 14L21 3'></path>\n                                        </svg>\n                                      </a>\n                                    </div>\n                                  </div>\n                                </Drawer.Content>\n                              </Drawer.Portal>\n                            </Drawer.NestedRoot>\n                          </p>\n                        </div>\n                      </div>\n                      <div className='p-4 bg-neutral-100 border-t border-neutral-200 mt-auto'>\n                        <div className='flex gap-6 justify-end max-w-md mx-auto'>\n                          <a\n                            className='text-xs text-neutral-600 flex items-center gap-0.25'\n                            href='https://github.com/emilkowalski/vaul'\n                            target='_blank'\n                            rel='noreferrer noopener'\n                          >\n                            GitHub\n                            <svg\n                              fill='none'\n                              height='16'\n                              stroke='currentColor'\n                              strokeLinecap='round'\n                              strokeLinejoin='round'\n                              strokeWidth='2'\n                              viewBox='0 0 24 24'\n                              width='16'\n                              aria-hidden='true'\n                              className='w-3 h-3 ml-1'\n                            >\n                              <path d='M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6'></path>\n                              <path d='M15 3h6v6'></path>\n                              <path d='M10 14L21 3'></path>\n                            </svg>\n                          </a>\n                          <a\n                            className='text-xs text-neutral-600 flex items-center gap-0.25'\n                            href='https://twitter.com/emilkowalski_'\n                            target='_blank'\n                            rel='noreferrer noopener'\n                          >\n                            Twitter\n                            <svg\n                              fill='none'\n                              height='16'\n                              stroke='currentColor'\n                              strokeLinecap='round'\n                              strokeLinejoin='round'\n                              strokeWidth='2'\n                              viewBox='0 0 24 24'\n                              width='16'\n                              aria-hidden='true'\n                              className='w-3 h-3 ml-1'\n                            >\n                              <path d='M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6'></path>\n                              <path d='M15 3h6v6'></path>\n                              <path d='M10 14L21 3'></path>\n                            </svg>\n                          </a>\n                        </div>\n                      </div>\n                    </Drawer.Content>\n                  </Drawer.Portal>\n                </Drawer.NestedRoot>\n              </div>\n            </div>\n            <div className='p-4 bg-neutral-100 border-t border-neutral-200 mt-auto'>\n              <div className='flex gap-6 justify-end max-w-md mx-auto'>\n                <a\n                  className='text-xs text-neutral-600 flex items-center gap-0.25'\n                  href='https://github.com/emilkowalski/vaul'\n                  target='_blank'\n                  rel='noreferrer noopener'\n                >\n                  GitHub\n                  <svg\n                    fill='none'\n                    height='16'\n                    stroke='currentColor'\n                    strokeLinecap='round'\n                    strokeLinejoin='round'\n                    strokeWidth='2'\n                    viewBox='0 0 24 24'\n                    width='16'\n                    aria-hidden='true'\n                    className='w-3 h-3 ml-1'\n                  >\n                    <path d='M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6'></path>\n                    <path d='M15 3h6v6'></path>\n                    <path d='M10 14L21 3'></path>\n                  </svg>\n                </a>\n                <a\n                  className='text-xs text-neutral-600 flex items-center gap-0.25'\n                  href='https://twitter.com/emilkowalski_'\n                  target='_blank'\n                  rel='noreferrer noopener'\n                >\n                  Twitter\n                  <svg\n                    fill='none'\n                    height='16'\n                    stroke='currentColor'\n                    strokeLinecap='round'\n                    strokeLinejoin='round'\n                    strokeWidth='2'\n                    viewBox='0 0 24 24'\n                    width='16'\n                    aria-hidden='true'\n                    className='w-3 h-3 ml-1'\n                  >\n                    <path d='M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6'></path>\n                    <path d='M15 3h6v6'></path>\n                    <path d='M10 14L21 3'></path>\n                  </svg>\n                </a>\n              </div>\n            </div>\n          </Drawer.Content>\n        </Drawer.Portal>\n      </Drawer.Root>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}