shadcn-ui/apps/v4/public/r/styles/radix-nova/dropdown-menu-example.json

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dropdown-menu-example",
  "title": "Dropdown Menu",
  "registryDependencies": [
    "avatar",
    "button",
    "dialog",
    "dropdown-menu",
    "example"
  ],
  "files": [
    {
      "path": "registry/radix-nova/examples/dropdown-menu-example.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-nova/ui/avatar\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-nova/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n      <DropdownMenuWithInset />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              Log out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Email</DropdownMenuItem>\n                    <DropdownMenuItem>Message</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>More...</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Checkboxes\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n                remixicon=\"RiPulseLine\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Radio Group\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                  remixicon=\"RiArrowDownLine\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                  remixicon=\"RiArrowRightLine\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Notifications\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n                remixicon=\"RiChat1Line\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n                remixicon=\"RiNotificationLine\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\">Payment Method</Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                  remixicon=\"RiWalletLine\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                  remixicon=\"RiBankLine\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Actions\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n                remixicon=\"RiPencilLine\"\n              />\n              Edit\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n                remixicon=\"RiShareLine\"\n              />\n              Share\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n                remixicon=\"RiArchiveLine\"\n              />\n              Archive\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n            remixicon=\"RiBankCardLine\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n            remixicon=\"RiNotificationLine\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"LogOutIcon\"\n            tabler=\"IconLogout\"\n            hugeicons=\"LogoutIcon\"\n            phosphor=\"SignOutIcon\"\n            remixicon=\"RiLogoutBoxLine\"\n          />\n          Sign Out\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"outline\"\n              className=\"h-12 justify-start px-2 md:max-w-[200px]\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">shadcn</span>\n                <span className=\"text-muted-foreground truncate text-xs\">\n                  shadcn@example.com\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"text-muted-foreground ml-auto\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Open Menu\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  Copy\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  Cut\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  Paste\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                      <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                      <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  Delete\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n  const [theme, setTheme] = React.useState(\"light\")\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>File</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                remixicon=\"RiFileLine\"\n              />\n              New File\n              <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n                phosphor=\"FolderIcon\"\n                remixicon=\"RiFolderLine\"\n              />\n              New Folder\n              <DropdownMenuShortcut>⇧⌘N</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"FolderOpenIcon\"\n                  tabler=\"IconFolderOpen\"\n                  hugeicons=\"FolderOpenIcon\"\n                  phosphor=\"FolderOpenIcon\"\n                  remixicon=\"RiFolderOpenLine\"\n                />\n                Open Recent\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Recent Projects</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                        remixicon=\"RiCodeLine\"\n                      />\n                      Project Alpha\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FileCodeIcon\"\n                        tabler=\"IconFileCode\"\n                        hugeicons=\"CodeIcon\"\n                        phosphor=\"CodeIcon\"\n                        remixicon=\"RiCodeLine\"\n                      />\n                      Project Beta\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          remixicon=\"RiMoreLine\"\n                        />\n                        More Projects\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"CodeIcon\"\n                              remixicon=\"RiCodeLine\"\n                            />\n                            Project Delta\n                          </DropdownMenuItem>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"FolderSearchIcon\"\n                        tabler=\"IconFolderSearch\"\n                        hugeicons=\"SearchIcon\"\n                        phosphor=\"MagnifyingGlassIcon\"\n                        remixicon=\"RiSearchLine\"\n                      />\n                      Browse...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n                phosphor=\"FloppyDiskIcon\"\n                remixicon=\"RiSaveLine\"\n              />\n              Save\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"DownloadIcon\"\n                tabler=\"IconDownload\"\n                hugeicons=\"DownloadIcon\"\n                phosphor=\"DownloadIcon\"\n                remixicon=\"RiDownloadLine\"\n              />\n              Export\n              <DropdownMenuShortcut>⇧⌘E</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"EyeIcon\"\n                tabler=\"IconEye\"\n                hugeicons=\"EyeIcon\"\n                phosphor=\"EyeIcon\"\n                remixicon=\"RiEyeLine\"\n              />\n              Show Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Show Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"PaletteIcon\"\n                  tabler=\"IconPalette\"\n                  hugeicons=\"PaintBoardIcon\"\n                  phosphor=\"PaletteIcon\"\n                  remixicon=\"RiPaletteLine\"\n                />\n                Theme\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n                    <DropdownMenuRadioGroup\n                      value={theme}\n                      onValueChange={setTheme}\n                    >\n                      <DropdownMenuRadioItem value=\"light\">\n                        <IconPlaceholder\n                          lucide=\"SunIcon\"\n                          tabler=\"IconSun\"\n                          hugeicons=\"SunIcon\"\n                          phosphor=\"SunIcon\"\n                          remixicon=\"RiSunLine\"\n                        />\n                        Light\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"dark\">\n                        <IconPlaceholder\n                          lucide=\"MoonIcon\"\n                          tabler=\"IconMoon\"\n                          hugeicons=\"MoonIcon\"\n                          phosphor=\"MoonIcon\"\n                          remixicon=\"RiMoonLine\"\n                        />\n                        Dark\n                      </DropdownMenuRadioItem>\n                      <DropdownMenuRadioItem value=\"system\">\n                        <IconPlaceholder\n                          lucide=\"MonitorIcon\"\n                          tabler=\"IconDeviceDesktop\"\n                          hugeicons=\"ComputerIcon\"\n                          phosphor=\"MonitorIcon\"\n                          remixicon=\"RiComputerLine\"\n                        />\n                        System\n                      </DropdownMenuRadioItem>\n                    </DropdownMenuRadioGroup>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                  remixicon=\"RiSettingsLine\"\n                />\n                Settings\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuLabel>Preferences</DropdownMenuLabel>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"KeyboardIcon\"\n                        tabler=\"IconKeyboard\"\n                        hugeicons=\"KeyboardIcon\"\n                        phosphor=\"KeyboardIcon\"\n                        remixicon=\"RiKeyboardLine\"\n                      />\n                      Keyboard Shortcuts\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"LanguagesIcon\"\n                        tabler=\"IconLanguage\"\n                        hugeicons=\"LanguageCircleIcon\"\n                        phosphor=\"TranslateIcon\"\n                        remixicon=\"RiTranslate\"\n                      />\n                      Language\n                    </DropdownMenuItem>\n                    <DropdownMenuSub>\n                      <DropdownMenuSubTrigger>\n                        <IconPlaceholder\n                          lucide=\"BellIcon\"\n                          tabler=\"IconBell\"\n                          hugeicons=\"NotificationIcon\"\n                          phosphor=\"BellIcon\"\n                          remixicon=\"RiNotificationLine\"\n                        />\n                        Notifications\n                      </DropdownMenuSubTrigger>\n                      <DropdownMenuPortal>\n                        <DropdownMenuSubContent>\n                          <DropdownMenuGroup>\n                            <DropdownMenuLabel>\n                              Notification Types\n                            </DropdownMenuLabel>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.push}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  push: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"BellIcon\"\n                                tabler=\"IconBell\"\n                                hugeicons=\"NotificationIcon\"\n                                phosphor=\"BellIcon\"\n                                remixicon=\"RiNotificationLine\"\n                              />\n                              Push Notifications\n                            </DropdownMenuCheckboxItem>\n                            <DropdownMenuCheckboxItem\n                              checked={notifications.email}\n                              onCheckedChange={(checked) =>\n                                setNotifications({\n                                  ...notifications,\n                                  email: checked === true,\n                                })\n                              }\n                            >\n                              <IconPlaceholder\n                                lucide=\"MailIcon\"\n                                tabler=\"IconMail\"\n                                hugeicons=\"MailIcon\"\n                                phosphor=\"EnvelopeIcon\"\n                                remixicon=\"RiMailLine\"\n                              />\n                              Email Notifications\n                            </DropdownMenuCheckboxItem>\n                          </DropdownMenuGroup>\n                        </DropdownMenuSubContent>\n                      </DropdownMenuPortal>\n                    </DropdownMenuSub>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"ShieldIcon\"\n                        tabler=\"IconShield\"\n                        hugeicons=\"ShieldIcon\"\n                        phosphor=\"ShieldIcon\"\n                        remixicon=\"RiShieldLine\"\n                      />\n                      Privacy & Security\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Help & Support\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"FileTextIcon\"\n                tabler=\"IconFileText\"\n                hugeicons=\"File01Icon\"\n                phosphor=\"FileTextIcon\"\n                remixicon=\"RiFileTextLine\"\n              />\n              Documentation\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}