menubar-example.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "menubar-example",
  "title": "Menubar",
  "registryDependencies": [
    "button",
    "dialog",
    "menubar",
    "example"
  ],
  "files": [
    {
      "path": "registry/base-mira/examples/menubar-example.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-mira/ui/dialog\"\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarGroup,\n  MenubarItem,\n  MenubarLabel,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/registry/base-mira/ui/menubar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function MenubarExample() {\n  return (\n    <ExampleWrapper>\n      <MenubarBasic />\n      <MenubarWithSubmenu />\n      <MenubarSides />\n      <MenubarWithCheckboxes />\n      <MenubarWithRadio />\n      <MenubarWithIcons />\n      <MenubarWithShortcuts />\n      <MenubarFormat />\n      <MenubarInsert />\n      <MenubarDestructive />\n      <MenubarInDialog />\n      <MenubarWithInset />\n    </ExampleWrapper>\n  )\n}\n\nfunction MenubarBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              New Window <MenubarShortcut>⌘N</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem disabled>New Incognito Window</MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>\n              Print... <MenubarShortcut>⌘P</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>Cut</MenubarItem>\n            <MenubarItem>Copy</MenubarItem>\n            <MenubarItem>Paste</MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarSides() {\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap justify-center gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <Menubar key={side}>\n            <MenubarMenu>\n              <MenubarTrigger className=\"capitalize\">\n                {side.replace(\"-\", \" \")}\n              </MenubarTrigger>\n              <MenubarContent side={side}>\n                <MenubarGroup>\n                  <MenubarItem>New Tab</MenubarItem>\n                  <MenubarItem>New Window</MenubarItem>\n                  <MenubarItem>New Incognito Window</MenubarItem>\n                </MenubarGroup>\n              </MenubarContent>\n            </MenubarMenu>\n          </Menubar>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction MenubarWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarSub>\n              <MenubarSubTrigger>Share</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarItem>Email link</MenubarItem>\n                <MenubarItem>Messages</MenubarItem>\n                <MenubarItem>Notes</MenubarItem>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarItem>\n              Print... <MenubarShortcut>⌘P</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarSub>\n              <MenubarSubTrigger>Find</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarItem>Find...</MenubarItem>\n                <MenubarItem>Find Next</MenubarItem>\n                <MenubarItem>Find Previous</MenubarItem>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarItem>Cut</MenubarItem>\n            <MenubarItem>Copy</MenubarItem>\n            <MenubarItem>Paste</MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithCheckboxes() {\n  return (\n    <Example title=\"With Checkboxes\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent className=\"w-64\">\n            <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>\n            <MenubarCheckboxItem checked>\n              Always Show Full URLs\n            </MenubarCheckboxItem>\n            <MenubarSeparator />\n            <MenubarItem inset>\n              Reload <MenubarShortcut>⌘R</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem disabled inset>\n              Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Format</MenubarTrigger>\n          <MenubarContent>\n            <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Code</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Superscript</MenubarCheckboxItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithRadio() {\n  const [user, setUser] = React.useState(\"benoit\")\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Radio\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Profiles</MenubarTrigger>\n          <MenubarContent>\n            <MenubarRadioGroup value={user} onValueChange={setUser}>\n              <MenubarRadioItem value=\"andy\">Andy</MenubarRadioItem>\n              <MenubarRadioItem value=\"benoit\">Benoit</MenubarRadioItem>\n              <MenubarRadioItem value=\"luis\">Luis</MenubarRadioItem>\n            </MenubarRadioGroup>\n            <MenubarSeparator />\n            <MenubarItem inset>Edit...</MenubarItem>\n            <MenubarItem inset>Add Profile...</MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Theme</MenubarTrigger>\n          <MenubarContent>\n            <MenubarRadioGroup value={theme} onValueChange={setTheme}>\n              <MenubarRadioItem value=\"light\">Light</MenubarRadioItem>\n              <MenubarRadioItem value=\"dark\">Dark</MenubarRadioItem>\n              <MenubarRadioItem value=\"system\">System</MenubarRadioItem>\n            </MenubarRadioGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                remixicon=\"RiFileLine\"\n              />\n              New File <MenubarShortcut>⌘N</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n                phosphor=\"FolderIcon\"\n                remixicon=\"RiFolderLine\"\n              />\n              Open Folder\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"SaveIcon\"\n                tabler=\"IconDeviceFloppy\"\n                hugeicons=\"FloppyDiskIcon\"\n                phosphor=\"FloppyDiskIcon\"\n                remixicon=\"RiSaveLine\"\n              />\n              Save <MenubarShortcut>⌘S</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>More</MenubarTrigger>\n          <MenubarContent>\n            <MenubarGroup>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                  phosphor=\"CircleDashedIcon\"\n                  remixicon=\"RiLoaderLine\"\n                />\n                Settings\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                  phosphor=\"CircleDashedIcon\"\n                  remixicon=\"RiLoaderLine\"\n                />\n                Help\n              </MenubarItem>\n              <MenubarSeparator />\n              <MenubarItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"CircleDashedIcon\"\n                  tabler=\"IconCircleDashed\"\n                  hugeicons=\"DashedLineCircleIcon\"\n                  phosphor=\"CircleDashedIcon\"\n                  remixicon=\"RiLoaderLine\"\n                />\n                Delete\n              </MenubarItem>\n            </MenubarGroup>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              New Tab <MenubarShortcut>⌘T</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              New Window <MenubarShortcut>⌘N</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Print... <MenubarShortcut>⌘P</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Edit</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem>\n              Cut <MenubarShortcut>⌘X</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Copy <MenubarShortcut>⌘C</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              Paste <MenubarShortcut>⌘V</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarFormat() {\n  return (\n    <Example title=\"Format\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Format</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"BoldIcon\"\n                tabler=\"IconBold\"\n                hugeicons=\"TextBoldIcon\"\n                phosphor=\"TextBIcon\"\n                remixicon=\"RiBold\"\n              />\n              Bold <MenubarShortcut>⌘B</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"ItalicIcon\"\n                tabler=\"IconItalic\"\n                hugeicons=\"TextItalicIcon\"\n                phosphor=\"TextItalicIcon\"\n                remixicon=\"RiItalic\"\n              />\n              Italic <MenubarShortcut>⌘I</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"UnderlineIcon\"\n                tabler=\"IconUnderline\"\n                hugeicons=\"TextUnderlineIcon\"\n                phosphor=\"TextUnderlineIcon\"\n                remixicon=\"RiUnderline\"\n              />\n              Underline <MenubarShortcut>⌘U</MenubarShortcut>\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>\n            <MenubarCheckboxItem>Code</MenubarCheckboxItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent>\n            <MenubarCheckboxItem>Show Ruler</MenubarCheckboxItem>\n            <MenubarCheckboxItem checked>Show Grid</MenubarCheckboxItem>\n            <MenubarSeparator />\n            <MenubarItem inset>Zoom In</MenubarItem>\n            <MenubarItem inset>Zoom Out</MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarInsert() {\n  return (\n    <Example title=\"Insert\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>Insert</MenubarTrigger>\n          <MenubarContent>\n            <MenubarSub>\n              <MenubarSubTrigger>\n                <IconPlaceholder\n                  lucide=\"ImageIcon\"\n                  tabler=\"IconPhoto\"\n                  hugeicons=\"ImageIcon\"\n                  phosphor=\"ImageIcon\"\n                  remixicon=\"RiImageLine\"\n                />\n                Media\n              </MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarItem>Image</MenubarItem>\n                <MenubarItem>Video</MenubarItem>\n                <MenubarItem>Audio</MenubarItem>\n              </MenubarSubContent>\n            </MenubarSub>\n            <MenubarSeparator />\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"LinkIcon\"\n                tabler=\"IconLink\"\n                hugeicons=\"LinkIcon\"\n                phosphor=\"LinkIcon\"\n                remixicon=\"RiLinksLine\"\n              />\n              Link <MenubarShortcut>⌘K</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"TableIcon\"\n                tabler=\"IconTable\"\n                hugeicons=\"TableIcon\"\n                phosphor=\"TableIcon\"\n                remixicon=\"RiTableLine\"\n              />\n              Table\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Tools</MenubarTrigger>\n          <MenubarContent className=\"w-44\">\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                remixicon=\"RiSearchLine\"\n              />\n              Find & Replace <MenubarShortcut>⌘F</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"CheckIcon\"\n                tabler=\"IconCheck\"\n                hugeicons=\"Tick02Icon\"\n                phosphor=\"CheckIcon\"\n                remixicon=\"RiCheckLine\"\n              />\n              Spell Check\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarDestructive() {\n  return (\n    <Example title=\"Destructive\">\n      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>File</MenubarTrigger>\n          <MenubarContent className=\"w-40\">\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"FileIcon\"\n                tabler=\"IconFile\"\n                hugeicons=\"FileIcon\"\n                phosphor=\"FileIcon\"\n                remixicon=\"RiFileLine\"\n              />\n              New File <MenubarShortcut>⌘N</MenubarShortcut>\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"FolderIcon\"\n                tabler=\"IconFolder\"\n                hugeicons=\"FolderIcon\"\n                phosphor=\"FolderIcon\"\n                remixicon=\"RiFolderLine\"\n              />\n              Open Folder\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n              Delete File <MenubarShortcut>⌘⌫</MenubarShortcut>\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n        <MenubarMenu>\n          <MenubarTrigger>Account</MenubarTrigger>\n          <MenubarContent>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n            </MenubarItem>\n            <MenubarItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign out\n            </MenubarItem>\n            <MenubarSeparator />\n            <MenubarItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n              Delete\n            </MenubarItem>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n\nfunction MenubarInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Menubar Example</DialogTitle>\n            <DialogDescription>\n              Use the menubar below to see the menu options.\n            </DialogDescription>\n          </DialogHeader>\n          <Menubar>\n            <MenubarMenu>\n              <MenubarTrigger>File</MenubarTrigger>\n              <MenubarContent>\n                <MenubarItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  Copy\n                </MenubarItem>\n                <MenubarItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  Cut\n                </MenubarItem>\n                <MenubarItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  Paste\n                </MenubarItem>\n                <MenubarSeparator />\n                <MenubarSub>\n                  <MenubarSubTrigger>More Options</MenubarSubTrigger>\n                  <MenubarSubContent>\n                    <MenubarItem>Save Page...</MenubarItem>\n                    <MenubarItem>Create Shortcut...</MenubarItem>\n                    <MenubarItem>Name Window...</MenubarItem>\n                    <MenubarSeparator />\n                    <MenubarItem>Developer Tools</MenubarItem>\n                  </MenubarSubContent>\n                </MenubarSub>\n                <MenubarSeparator />\n                <MenubarItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  Delete\n                </MenubarItem>\n              </MenubarContent>\n            </MenubarMenu>\n            <MenubarMenu>\n              <MenubarTrigger>Edit</MenubarTrigger>\n              <MenubarContent>\n                <MenubarItem>\n                  Undo <MenubarShortcut>⌘Z</MenubarShortcut>\n                </MenubarItem>\n                <MenubarItem>\n                  Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>\n                </MenubarItem>\n              </MenubarContent>\n            </MenubarMenu>\n          </Menubar>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction MenubarWithInset() {\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      <Menubar>\n        <MenubarMenu>\n          <MenubarTrigger>View</MenubarTrigger>\n          <MenubarContent className=\"w-44\">\n            <MenubarGroup>\n              <MenubarLabel>Actions</MenubarLabel>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n                Copy\n              </MenubarItem>\n              <MenubarItem>\n                <IconPlaceholder\n                  lucide=\"ScissorsIcon\"\n                  tabler=\"IconCut\"\n                  hugeicons=\"ScissorIcon\"\n                  phosphor=\"ScissorsIcon\"\n                  remixicon=\"RiScissorsLine\"\n                />\n                Cut\n              </MenubarItem>\n              <MenubarItem inset>Paste</MenubarItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarLabel inset>Appearance</MenubarLabel>\n              <MenubarCheckboxItem\n                inset\n                checked={showBookmarks}\n                onCheckedChange={setShowBookmarks}\n              >\n                Bookmarks\n              </MenubarCheckboxItem>\n              <MenubarCheckboxItem\n                inset\n                checked={showUrls}\n                onCheckedChange={setShowUrls}\n              >\n                Full URLs\n              </MenubarCheckboxItem>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarGroup>\n              <MenubarLabel inset>Theme</MenubarLabel>\n              <MenubarRadioGroup value={theme} onValueChange={setTheme}>\n                <MenubarRadioItem inset value=\"light\">\n                  Light\n                </MenubarRadioItem>\n                <MenubarRadioItem inset value=\"dark\">\n                  Dark\n                </MenubarRadioItem>\n                <MenubarRadioItem inset value=\"system\">\n                  System\n                </MenubarRadioItem>\n              </MenubarRadioGroup>\n            </MenubarGroup>\n            <MenubarSeparator />\n            <MenubarSub>\n              <MenubarSubTrigger inset>More Options</MenubarSubTrigger>\n              <MenubarSubContent>\n                <MenubarGroup>\n                  <MenubarItem>Save Page...</MenubarItem>\n                  <MenubarItem>Create Shortcut...</MenubarItem>\n                </MenubarGroup>\n              </MenubarSubContent>\n            </MenubarSub>\n          </MenubarContent>\n        </MenubarMenu>\n      </Menubar>\n    </Example>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}