github.json — ui Source File
Architecture documentation for github.json, a json file in the ui codebase.
Entity Profile
Source Code
{
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
"name": "github",
"title": "GitHub",
"registryDependencies": [
"avatar",
"badge",
"button",
"card",
"checkbox",
"combobox",
"command",
"drawer",
"dropdown-menu",
"empty",
"field",
"input",
"input-group",
"item",
"kbd",
"native-select",
"popover",
"separator",
"spinner",
"tabs",
"textarea",
"tooltip",
"example"
],
"files": [
{
"path": "registry/base-mira/blocks/github.tsx",
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n Example,\n ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/base-mira/ui/avatar\"\nimport { Badge } from \"@/registry/base-mira/ui/badge\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n Card,\n CardAction,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/base-mira/ui/card\"\nimport { Checkbox } from \"@/registry/base-mira/ui/checkbox\"\nimport {\n Combobox,\n ComboboxChip,\n ComboboxChips,\n ComboboxChipsInput,\n ComboboxContent,\n ComboboxEmpty,\n ComboboxItem,\n ComboboxList,\n ComboboxValue,\n useComboboxAnchor,\n} from \"@/registry/base-mira/ui/combobox\"\nimport {\n Command,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n} from \"@/registry/base-mira/ui/command\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/base-mira/ui/drawer\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport {\n Empty,\n EmptyContent,\n EmptyDescription,\n EmptyHeader,\n EmptyMedia,\n EmptyTitle,\n} from \"@/registry/base-mira/ui/empty\"\nimport {\n Field,\n FieldContent,\n FieldDescription,\n FieldGroup,\n FieldLabel,\n FieldLegend,\n FieldSet,\n} from \"@/registry/base-mira/ui/field\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport {\n InputGroup,\n InputGroupAddon,\n InputGroupButton,\n InputGroupInput,\n InputGroupTextarea,\n} from \"@/registry/base-mira/ui/input-group\"\nimport {\n Item,\n ItemActions,\n ItemContent,\n ItemDescription,\n ItemGroup,\n ItemMedia,\n ItemSeparator,\n ItemTitle,\n} from \"@/registry/base-mira/ui/item\"\nimport { Kbd } from \"@/registry/base-mira/ui/kbd\"\nimport {\n NativeSelect,\n NativeSelectOption,\n} from \"@/registry/base-mira/ui/native-select\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/base-mira/ui/popover\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport { Spinner } from \"@/registry/base-mira/ui/spinner\"\nimport {\n Tabs,\n TabsContent,\n TabsList,\n TabsTrigger,\n} from \"@/registry/base-mira/ui/tabs\"\nimport { Textarea } from \"@/registry/base-mira/ui/textarea\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipTrigger,\n} from \"@/registry/base-mira/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n return (\n <ExampleWrapper>\n <CodespacesCard />\n <AssignIssue />\n <Navbar />\n <RepositoryToolbar />\n <Profile />\n <ContributionsActivity />\n <Contributors />\n </ExampleWrapper>\n )\n}\nfunction CodespacesCard() {\n const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n return (\n <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n <CardContent>\n <Tabs defaultValue=\"codespaces\">\n <TabsList className=\"w-full\">\n <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n <TabsTrigger value=\"local\">Local</TabsTrigger>\n </TabsList>\n <TabsContent value=\"codespaces\">\n <Item size=\"sm\" className=\"px-1 pt-2\">\n <ItemContent>\n <ItemTitle>Codespaces</ItemTitle>\n <ItemDescription>\n Your workspaces in the cloud\n </ItemDescription>\n </ItemContent>\n <ItemActions>\n <Tooltip>\n <TooltipTrigger\n render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n >\n <IconPlaceholder\n lucide=\"PlusIcon\"\n tabler=\"IconPlus\"\n hugeicons=\"PlusSignIcon\"\n phosphor=\"PlusIcon\"\n remixicon=\"RiAddLine\"\n />\n </TooltipTrigger>\n <TooltipContent side=\"bottom\">\n Create a codespace on main\n </TooltipContent>\n </Tooltip>\n <DropdownMenu>\n <Tooltip>\n <TooltipTrigger\n render={\n <DropdownMenuTrigger\n render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n />\n }\n >\n <IconPlaceholder\n lucide=\"MoreHorizontalIcon\"\n tabler=\"IconDots\"\n hugeicons=\"MoreHorizontalCircle01Icon\"\n phosphor=\"DotsThreeOutlineIcon\"\n remixicon=\"RiMoreLine\"\n />\n </TooltipTrigger>\n <TooltipContent side=\"bottom\">\n Codespace repository configuration\n </TooltipContent>\n </Tooltip>\n <DropdownMenuContent align=\"end\" className=\"w-56\">\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"PlusIcon\"\n tabler=\"IconPlus\"\n hugeicons=\"PlusSignIcon\"\n phosphor=\"PlusIcon\"\n remixicon=\"RiAddLine\"\n />\n New with options...\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"ContainerIcon\"\n tabler=\"IconBox\"\n hugeicons=\"CubeIcon\"\n phosphor=\"CubeIcon\"\n remixicon=\"RiBox1Line\"\n />\n Configure dev container\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"ZapIcon\"\n tabler=\"IconBolt\"\n hugeicons=\"ZapIcon\"\n phosphor=\"LightningIcon\"\n remixicon=\"RiFlashlightLine\"\n />\n Set up prebuilds\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"ServerIcon\"\n tabler=\"IconServer\"\n hugeicons=\"ServerStackIcon\"\n phosphor=\"HardDrivesIcon\"\n remixicon=\"RiHardDriveLine\"\n />\n Manage codespaces\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"ShareIcon\"\n tabler=\"IconShare2\"\n hugeicons=\"Share03Icon\"\n phosphor=\"ShareIcon\"\n remixicon=\"RiShareLine\"\n />\n Share deep link\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"InfoIcon\"\n tabler=\"IconInfoCircle\"\n hugeicons=\"AlertCircleIcon\"\n phosphor=\"InfoIcon\"\n remixicon=\"RiInformationLine\"\n />\n What are codespaces?\n </DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n </ItemActions>\n </Item>\n <Separator className=\"-mx-2 my-2 w-auto!\" />\n <Empty className=\"p-4\">\n <EmptyHeader>\n <EmptyMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"ServerIcon\"\n tabler=\"IconServer\"\n hugeicons=\"ServerStackIcon\"\n phosphor=\"HardDrivesIcon\"\n remixicon=\"RiHardDriveLine\"\n />\n </EmptyMedia>\n <EmptyTitle>No codespaces</EmptyTitle>\n <EmptyDescription>\n You don't have any codespaces with this repository\n checked out\n </EmptyDescription>\n </EmptyHeader>\n <EmptyContent>\n <Button\n size=\"sm\"\n onClick={() => {\n setIsCreatingCodespace(true)\n setTimeout(() => {\n setIsCreatingCodespace(false)\n }, 2000)\n }}\n disabled={isCreatingCodespace}\n >\n {isCreatingCodespace ? (\n <Spinner data-icon=\"inline-start\" />\n ) : (\n \"\"\n )}\n Create Codespace\n </Button>\n <a\n href=\"#learn-more\"\n className=\"text-muted-foreground text-xs underline underline-offset-4\"\n >\n Learn more about codespaces\n </a>\n </EmptyContent>\n </Empty>\n <Separator className=\"-mx-2 my-2 w-auto!\" />\n <div className=\"text-muted-foreground p-1.5 text-xs\">\n Codespace usage for this repository is paid for by{\" \"}\n <span className=\"font-medium\">shadcn</span>.\n </div>\n </TabsContent>\n <TabsContent value=\"local\">\n <Item size=\"sm\" className=\"hidden p-0\">\n <ItemContent>\n <ItemTitle className=\"gap-2\">\n <IconPlaceholder\n lucide=\"TerminalIcon\"\n tabler=\"IconTerminal\"\n hugeicons=\"ComputerTerminal01Icon\"\n phosphor=\"TerminalIcon\"\n remixicon=\"RiTerminalBoxLine\"\n className=\"size-4\"\n />\n Clone\n </ItemTitle>\n </ItemContent>\n <ItemActions>\n <Tooltip>\n <TooltipTrigger\n render={<Button variant=\"ghost\" size=\"icon\" />}\n >\n <IconPlaceholder\n lucide=\"InfoIcon\"\n tabler=\"IconInfoCircle\"\n hugeicons=\"AlertCircleIcon\"\n phosphor=\"InfoIcon\"\n remixicon=\"RiInformationLine\"\n />\n </TooltipTrigger>\n <TooltipContent side=\"left\">\n Which remote URL should I use?\n </TooltipContent>\n </Tooltip>\n </ItemActions>\n </Item>\n <Tabs defaultValue=\"https\">\n <TabsList\n variant=\"line\"\n className=\"w-full justify-start border-b *:[button]:flex-0\"\n >\n <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n </TabsList>\n <div className=\"bg-muted/30 rounded-md border p-2\">\n <TabsContent value=\"https\">\n <Field className=\"gap-2\">\n <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n HTTPS URL\n </FieldLabel>\n <InputGroup>\n <InputGroupAddon align=\"inline-end\">\n <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n <IconPlaceholder\n lucide=\"CopyIcon\"\n tabler=\"IconCopy\"\n hugeicons=\"Copy01Icon\"\n phosphor=\"CopyIcon\"\n remixicon=\"RiFileCopyLine\"\n />\n </InputGroupButton>\n </InputGroupAddon>\n <InputGroupInput\n id=\"https-url\"\n defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n readOnly\n />\n </InputGroup>\n <FieldDescription>\n Clone using the web URL.\n </FieldDescription>\n </Field>\n </TabsContent>\n <TabsContent value=\"ssh\">\n <Field className=\"gap-2\">\n <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n SSH URL\n </FieldLabel>\n <InputGroup>\n <InputGroupAddon align=\"inline-end\">\n <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n <IconPlaceholder\n lucide=\"CopyIcon\"\n tabler=\"IconCopy\"\n hugeicons=\"Copy01Icon\"\n phosphor=\"CopyIcon\"\n remixicon=\"RiFileCopyLine\"\n />\n </InputGroupButton>\n </InputGroupAddon>\n <InputGroupInput\n id=\"ssh-url\"\n defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n readOnly\n />\n </InputGroup>\n <FieldDescription>\n Use a password-protected SSH key.\n </FieldDescription>\n </Field>\n </TabsContent>\n <TabsContent value=\"cli\">\n <Field className=\"gap-2\">\n <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n CLI Command\n </FieldLabel>\n <InputGroup>\n <InputGroupAddon align=\"inline-end\">\n <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n <IconPlaceholder\n lucide=\"CopyIcon\"\n tabler=\"IconCopy\"\n hugeicons=\"Copy01Icon\"\n phosphor=\"CopyIcon\"\n remixicon=\"RiFileCopyLine\"\n />\n </InputGroupButton>\n </InputGroupAddon>\n <InputGroupInput\n id=\"cli-command\"\n defaultValue=\"gh repo clone shadcn-ui/ui\"\n readOnly\n />\n </InputGroup>\n <FieldDescription>\n Work fast with our official CLI.{\" \"}\n <a href=\"#learn-more\">Learn more</a>\n </FieldDescription>\n </Field>\n </TabsContent>\n </div>\n </Tabs>\n <Separator className=\"-mx-2 my-2 w-auto!\" />\n <div className=\"flex flex-col\">\n <Button\n variant=\"ghost\"\n size=\"sm\"\n className=\"justify-start gap-1.5\"\n >\n <IconPlaceholder\n lucide=\"MonitorIcon\"\n tabler=\"IconDeviceDesktop\"\n hugeicons=\"ComputerIcon\"\n phosphor=\"MonitorIcon\"\n remixicon=\"RiComputerLine\"\n data-icon=\"inline-start\"\n />\n Open with GitHub Desktop\n </Button>\n <Button\n variant=\"ghost\"\n size=\"sm\"\n className=\"justify-start gap-1.5\"\n >\n <IconPlaceholder\n lucide=\"DownloadIcon\"\n tabler=\"IconDownload\"\n hugeicons=\"DownloadIcon\"\n phosphor=\"DownloadIcon\"\n remixicon=\"RiDownloadLine\"\n data-icon=\"inline-start\"\n />\n Download ZIP\n </Button>\n </div>\n </TabsContent>\n </Tabs>\n </CardContent>\n </Card>\n </Example>\n )\n}\nfunction RepositoryToolbar() {\n const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n return (\n <Example title=\"Repository Toolbar\">\n <div className=\"flex items-center gap-2\">\n <InputGroup>\n <InputGroupInput placeholder=\"Go to file\" />\n <InputGroupAddon align=\"inline-start\">\n <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n <IconPlaceholder\n lucide=\"SearchIcon\"\n tabler=\"IconSearch\"\n hugeicons=\"SearchIcon\"\n phosphor=\"MagnifyingGlassIcon\"\n remixicon=\"RiSearchLine\"\n />\n </InputGroupButton>\n </InputGroupAddon>\n <InputGroupAddon align=\"inline-end\">\n <Kbd>t</Kbd>\n </InputGroupAddon>\n </InputGroup>\n <DropdownMenu>\n <DropdownMenuTrigger render={<Button variant=\"outline\" />}>\n Add File\n <IconPlaceholder\n lucide=\"ChevronDownIcon\"\n tabler=\"IconChevronDown\"\n hugeicons=\"ArrowDown01Icon\"\n phosphor=\"CaretDownIcon\"\n remixicon=\"RiArrowDownSLine\"\n data-icon=\"inline-end\"\n />\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\">\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"PlusIcon\"\n tabler=\"IconPlus\"\n hugeicons=\"PlusSignIcon\"\n phosphor=\"PlusIcon\"\n remixicon=\"RiAddLine\"\n />\n Create new file\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"UploadIcon\"\n hugeicons=\"Upload01Icon\"\n tabler=\"IconUpload\"\n phosphor=\"UploadIcon\"\n remixicon=\"RiUploadLine\"\n />\n Upload files\n </DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n <Popover>\n <Tooltip>\n <TooltipTrigger\n render={\n <PopoverTrigger\n render={<Button variant=\"outline\" size=\"icon\" />}\n />\n }\n >\n <IconPlaceholder\n lucide=\"CloudCogIcon\"\n hugeicons=\"AiCloud01Icon\"\n tabler=\"IconCloudCog\"\n phosphor=\"CloudArrowUpIcon\"\n remixicon=\"RiUploadCloudLine\"\n />\n </TooltipTrigger>\n <TooltipContent>New Agent Task</TooltipContent>\n </Tooltip>\n <PopoverContent side=\"bottom\" align=\"end\" className=\"w-96\">\n <Field>\n <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n <InputGroup>\n <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n <InputGroupAddon align=\"block-end\">\n <Popover>\n <Tooltip>\n <PopoverTrigger\n render={\n <TooltipTrigger\n render={\n <InputGroupButton\n variant=\"outline\"\n size=\"icon-sm\"\n />\n }\n />\n }\n >\n <IconPlaceholder\n lucide=\"GitBranchIcon\"\n hugeicons=\"GitBranchIcon\"\n tabler=\"IconGitBranch\"\n phosphor=\"GitBranchIcon\"\n remixicon=\"RiGitBranchLine\"\n />\n </PopoverTrigger>\n <TooltipContent>Select a branch</TooltipContent>\n </Tooltip>\n <PopoverContent side=\"bottom\" align=\"start\" className=\"p-1\">\n <Field>\n <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n Select a Branch\n </FieldLabel>\n <Command>\n <CommandInput\n id=\"select-branch\"\n placeholder=\"Find a branch\"\n />\n <CommandEmpty>No branches found</CommandEmpty>\n <CommandList>\n <CommandGroup>\n {[\n \"main\",\n \"develop\",\n \"feature/123\",\n \"feature/user-authentication\",\n \"feature/dashboard-redesign\",\n \"bugfix/login-error\",\n \"hotfix/security-patch\",\n \"release/v2.0.0\",\n \"feature/api-integration\",\n \"bugfix/memory-leak\",\n \"feature/dark-mode\",\n \"feature/responsive-design\",\n \"bugfix/typo-fix\",\n \"feature/search-functionality\",\n \"release/v1.9.0\",\n \"feature/notifications\",\n \"bugfix/cache-issue\",\n \"feature/payment-gateway\",\n \"hotfix/critical-bug\",\n \"feature/admin-panel\",\n \"bugfix/validation-error\",\n \"feature/analytics\",\n \"release/v2.1.0\",\n ].map((branch) => (\n <CommandItem\n key={branch}\n value={branch}\n onSelect={() => setSelectedBranch(branch)}\n data-checked={selectedBranch === branch}\n >\n {branch}\n </CommandItem>\n ))}\n </CommandGroup>\n </CommandList>\n </Command>\n </Field>\n </PopoverContent>\n </Popover>\n <Popover>\n <Tooltip>\n <PopoverTrigger\n render={\n <TooltipTrigger\n render={\n <InputGroupButton\n variant=\"outline\"\n size=\"icon-sm\"\n />\n }\n />\n }\n >\n <IconPlaceholder\n lucide=\"BotIcon\"\n hugeicons=\"RoboticIcon\"\n tabler=\"IconRobot\"\n phosphor=\"RobotIcon\"\n remixicon=\"RiRobotLine\"\n />\n </PopoverTrigger>\n <TooltipContent>Select Agent</TooltipContent>\n </Tooltip>\n <PopoverContent side=\"bottom\" align=\"start\">\n <Empty className=\"gap-4 p-0\">\n <EmptyHeader>\n <EmptyTitle className=\"text-sm\">\n This repository has no custom agents\n </EmptyTitle>\n <EmptyDescription className=\"text-xs\">\n Custom agents are reusable instructions and tools in\n your repository.\n </EmptyDescription>\n </EmptyHeader>\n <EmptyContent>\n <Button variant=\"outline\" size=\"sm\">\n Create Custom Agent\n </Button>\n </EmptyContent>\n </Empty>\n </PopoverContent>\n </Popover>\n <Tooltip>\n <TooltipTrigger\n render={\n <InputGroupButton\n variant=\"ghost\"\n size=\"icon-sm\"\n className=\"ml-auto\"\n />\n }\n >\n <IconPlaceholder\n lucide=\"SendIcon\"\n hugeicons=\"SentIcon\"\n tabler=\"IconSend\"\n phosphor=\"PaperPlaneTiltIcon\"\n remixicon=\"RiSendPlaneLine\"\n />\n </TooltipTrigger>\n <TooltipContent className=\"flex items-center gap-2 pr-2\">\n Start Task <Kbd>⏎</Kbd>\n </TooltipContent>\n </Tooltip>\n </InputGroupAddon>\n </InputGroup>\n </Field>\n </PopoverContent>\n </Popover>\n </div>\n </Example>\n )\n}\nfunction Navbar() {\n return (\n <Example title=\"Account Menu\">\n <header className=\"flex h-14 w-full items-center gap-2\">\n <Drawer direction=\"left\">\n <DrawerTrigger asChild>\n <Button variant=\"outline\" size=\"icon\">\n <IconPlaceholder\n lucide=\"MenuIcon\"\n hugeicons=\"Menu09Icon\"\n tabler=\"IconMenu\"\n phosphor=\"ListIcon\"\n remixicon=\"RiListUnordered\"\n />\n <span className=\"sr-only\">Open menu</span>\n </Button>\n </DrawerTrigger>\n <DrawerContent className=\"max-w-72\">\n <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n <DrawerTitle>Menu</DrawerTitle>\n <DrawerClose asChild>\n <Button variant=\"ghost\" size=\"icon-sm\">\n <IconPlaceholder\n lucide=\"XIcon\"\n tabler=\"IconX\"\n hugeicons=\"Cancel01Icon\"\n phosphor=\"XIcon\"\n remixicon=\"RiCloseLine\"\n />\n <span className=\"sr-only\">Close</span>\n </Button>\n </DrawerClose>\n </DrawerHeader>\n <div className=\"p-2\">\n <ItemGroup className=\"gap-px\">\n <Item render={<a href=\"#\" />} size=\"xs\">\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"HomeIcon\"\n tabler=\"IconHome\"\n hugeicons=\"HomeIcon\"\n phosphor=\"HouseIcon\"\n remixicon=\"RiHomeLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Home</ItemTitle>\n </ItemContent>\n </Item>\n <Item render={<a href=\"#\" />} size=\"xs\">\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"CircleIcon\"\n tabler=\"IconCircle\"\n hugeicons=\"CircleIcon\"\n phosphor=\"CircleIcon\"\n remixicon=\"RiCircleLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Issues</ItemTitle>\n </ItemContent>\n </Item>\n <Item render={<a href=\"#\" />} size=\"xs\">\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"GitBranchIcon\"\n tabler=\"IconGitBranch\"\n hugeicons=\"GitBranchIcon\"\n phosphor=\"GitBranchIcon\"\n remixicon=\"RiGitBranchLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Pull requests</ItemTitle>\n </ItemContent>\n </Item>\n <Item render={<a href=\"#\" />} size=\"xs\">\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"LayoutGridIcon\"\n tabler=\"IconLayoutGrid\"\n hugeicons=\"GridIcon\"\n phosphor=\"GridFourIcon\"\n remixicon=\"RiGridLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Projects</ItemTitle>\n </ItemContent>\n </Item>\n <Item render={<a href=\"#\" />} size=\"xs\">\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"MailIcon\"\n tabler=\"IconMail\"\n hugeicons=\"MailIcon\"\n phosphor=\"EnvelopeIcon\"\n remixicon=\"RiMailLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Discussions</ItemTitle>\n </ItemContent>\n </Item>\n <Item render={<a href=\"#\" />} size=\"xs\">\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"ServerIcon\"\n tabler=\"IconServer\"\n hugeicons=\"ServerStackIcon\"\n phosphor=\"HardDrivesIcon\"\n remixicon=\"RiHardDriveLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Codespaces</ItemTitle>\n </ItemContent>\n </Item>\n <Item render={<a href=\"#\" />} size=\"xs\">\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"BotIcon\"\n tabler=\"IconRobot\"\n hugeicons=\"RoboticIcon\"\n phosphor=\"RobotIcon\"\n remixicon=\"RiRobotLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Copilot</ItemTitle>\n </ItemContent>\n </Item>\n <Item render={<a href=\"#\" />} size=\"xs\">\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"SparklesIcon\"\n tabler=\"IconSparkles\"\n hugeicons=\"SparklesIcon\"\n phosphor=\"SparkleIcon\"\n remixicon=\"RiSparklingLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Spark</ItemTitle>\n </ItemContent>\n </Item>\n <ItemSeparator />\n <Item render={<a href=\"#\" />} size=\"xs\">\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"SearchIcon\"\n tabler=\"IconSearch\"\n hugeicons=\"SearchIcon\"\n phosphor=\"MagnifyingGlassIcon\"\n remixicon=\"RiSearchLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Explore</ItemTitle>\n </ItemContent>\n </Item>\n <Item render={<a href=\"#\" />} size=\"xs\">\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"ShoppingBagIcon\"\n tabler=\"IconShoppingBag\"\n hugeicons=\"ShoppingBasket01Icon\"\n phosphor=\"BagIcon\"\n remixicon=\"RiShoppingBagLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>Marketplace</ItemTitle>\n </ItemContent>\n </Item>\n <Item render={<a href=\"#\" />} size=\"xs\">\n <ItemMedia variant=\"icon\">\n <IconPlaceholder\n lucide=\"LinkIcon\"\n tabler=\"IconLink\"\n hugeicons=\"LinkIcon\"\n phosphor=\"LinkIcon\"\n remixicon=\"RiLinksLine\"\n />\n </ItemMedia>\n <ItemContent>\n <ItemTitle>MCP registry</ItemTitle>\n </ItemContent>\n </Item>\n </ItemGroup>\n </div>\n </DrawerContent>\n </Drawer>\n <DropdownMenu>\n <DropdownMenuTrigger\n render={\n <Button\n variant=\"ghost\"\n size=\"icon\"\n className=\"ml-auto rounded-full\"\n />\n }\n >\n <Avatar>\n <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n <AvatarFallback>SC</AvatarFallback>\n </Avatar>\n </DropdownMenuTrigger>\n <DropdownMenuContent className=\"w-56\" align=\"end\">\n <DropdownMenuGroup>\n <DropdownMenuLabel className=\"p-0 font-normal\">\n <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n <ItemMedia>\n <Avatar>\n <AvatarImage\n src=\"https://github.com/shadcn.png\"\n alt=\"shadcn\"\n />\n <AvatarFallback>SC</AvatarFallback>\n </Avatar>\n </ItemMedia>\n <ItemContent className=\"gap-0\">\n <ItemTitle className=\"text-foreground text-sm\">\n shadcn\n </ItemTitle>\n <ItemDescription className=\"text-xs\">\n shadcn@example.com\n </ItemDescription>\n </ItemContent>\n </Item>\n </DropdownMenuLabel>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"SmileIcon\"\n tabler=\"IconMoodSmile\"\n hugeicons=\"SmileIcon\"\n phosphor=\"SmileyIcon\"\n remixicon=\"RiEmotionLine\"\n />\n Set status\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"CircleAlertIcon\"\n tabler=\"IconExclamationCircle\"\n hugeicons=\"AlertCircleIcon\"\n phosphor=\"WarningCircleIcon\"\n remixicon=\"RiErrorWarningLine\"\n />\n Single sign-on\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\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=\"FolderIcon\"\n tabler=\"IconFolder\"\n hugeicons=\"FolderIcon\"\n phosphor=\"FolderIcon\"\n remixicon=\"RiFolderLine\"\n />\n Repositories\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"StarIcon\"\n tabler=\"IconStar\"\n hugeicons=\"StarIcon\"\n phosphor=\"StarIcon\"\n remixicon=\"RiStarLine\"\n />\n Stars\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"CodeIcon\"\n tabler=\"IconCode\"\n hugeicons=\"CodeIcon\"\n phosphor=\"CodeIcon\"\n remixicon=\"RiCodeLine\"\n />\n Gists\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"FolderIcon\"\n tabler=\"IconFolder\"\n hugeicons=\"FolderIcon\"\n phosphor=\"FolderIcon\"\n remixicon=\"RiFolderLine\"\n />\n Organizations\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"ServerIcon\"\n tabler=\"IconServer\"\n hugeicons=\"ServerStackIcon\"\n phosphor=\"HardDrivesIcon\"\n remixicon=\"RiHardDriveLine\"\n />\n Enterprises\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"HeartIcon\"\n tabler=\"IconHeart\"\n hugeicons=\"FavouriteIcon\"\n phosphor=\"HeartIcon\"\n remixicon=\"RiHeartLine\"\n />\n Sponsors\n </DropdownMenuItem>\n </DropdownMenuGroup>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\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 <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"BotIcon\"\n tabler=\"IconRobot\"\n hugeicons=\"RoboticIcon\"\n phosphor=\"RobotIcon\"\n remixicon=\"RiRobotLine\"\n />\n Copilot settings\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"SparklesIcon\"\n tabler=\"IconSparkles\"\n hugeicons=\"SparklesIcon\"\n phosphor=\"SparkleIcon\"\n remixicon=\"RiSparklingLine\"\n />\n Feature preview\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"MonitorIcon\"\n tabler=\"IconDeviceDesktop\"\n hugeicons=\"ComputerIcon\"\n phosphor=\"MonitorIcon\"\n remixicon=\"RiComputerLine\"\n />\n Appearance\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"UserIcon\"\n tabler=\"IconUser\"\n hugeicons=\"UserIcon\"\n phosphor=\"UserIcon\"\n remixicon=\"RiUserLine\"\n />\n Accessibility\n </DropdownMenuItem>\n <DropdownMenuItem>\n <IconPlaceholder\n lucide=\"ArrowUpIcon\"\n tabler=\"IconArrowUp\"\n hugeicons=\"ArrowUpIcon\"\n phosphor=\"ArrowUpIcon\"\n remixicon=\"RiArrowUpLine\"\n />\n Upgrade\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 </DropdownMenuContent>\n </DropdownMenu>\n </header>\n </Example>\n )\n}\nconst usernames = [\n \"shadcn\",\n \"vercel\",\n \"nextjs\",\n \"tailwindlabs\",\n \"typescript-lang\",\n \"eslint\",\n \"prettier\",\n \"babel\",\n \"webpack\",\n \"rollup\",\n \"parcel\",\n \"vite\",\n \"react\",\n \"vue\",\n \"angular\",\n \"solid\",\n]\nfunction Contributors() {\n return (\n <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n <Card className=\"max-w-sm\">\n <CardHeader>\n <CardTitle>\n Contributors <Badge variant=\"secondary\">312</Badge>\n </CardTitle>\n </CardHeader>\n <CardContent>\n <div className=\"flex flex-wrap gap-2\">\n {usernames.map((username) => (\n <Avatar key={username}>\n <AvatarImage\n src={`https://github.com/${username}.png`}\n alt={username}\n />\n <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n </Avatar>\n ))}\n </div>\n </CardContent>\n <CardFooter>\n <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n + 810 contributors\n </a>\n </CardFooter>\n </Card>\n </Example>\n )\n}\nfunction Profile() {\n return (\n <Example title=\"Profile\" className=\"items-center justify-center\">\n <Card className=\"mx-auto w-full max-w-md\">\n <CardHeader>\n <CardTitle>Profile</CardTitle>\n <CardDescription>Manage your profile information.</CardDescription>\n </CardHeader>\n <CardContent>\n <form id=\"profile\">\n <FieldGroup>\n <Field>\n <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n <Input id=\"name\" placeholder=\"shadcn\" />\n <FieldDescription>\n Your name may appear around GitHub where you contribute or are\n mentioned. You can remove it at any time.\n </FieldDescription>\n </Field>\n <Field>\n <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n <NativeSelect id=\"email\">\n <NativeSelectOption value=\"m@shadcn.com\">\n m@shadcn.com\n </NativeSelectOption>\n <NativeSelectOption value=\"m@gmail.com\">\n m@gmail.com\n </NativeSelectOption>\n </NativeSelect>\n <FieldDescription>\n You can manage verified email addresses in your{\" \"}\n <a href=\"#email-settings\">email settings</a>.\n </FieldDescription>\n </Field>\n <Field>\n <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n <Textarea\n id=\"bio\"\n placeholder=\"Tell us a little bit about yourself\"\n />\n <FieldDescription>\n You can <span>@mention</span> other users and organizations to\n link to them.\n </FieldDescription>\n </Field>\n </FieldGroup>\n </form>\n </CardContent>\n <CardFooter>\n <Button form=\"profile\">Save Profile</Button>\n </CardFooter>\n </Card>\n </Example>\n )\n}\nfunction ContributionsActivity() {\n return (\n <Example title=\"Contributions Activity\" className=\"justify-center\">\n <Card className=\"mx-auto w-full max-w-md\">\n <CardHeader>\n <CardTitle>Contributions & Activity</CardTitle>\n <CardDescription>\n Manage your contributions and activity visibility.\n </CardDescription>\n </CardHeader>\n <CardContent>\n <form id=\"contributions-activity\">\n <FieldGroup>\n <FieldSet>\n <FieldLegend className=\"sr-only\">\n Contributions & activity\n </FieldLegend>\n <FieldGroup className=\"gap-3\">\n <Field orientation=\"horizontal\">\n <Checkbox id=\"private-profile\" />\n <FieldContent>\n <FieldLabel\n htmlFor=\"private-profile\"\n className=\"font-normal\"\n >\n Make profile private and hide activity\n </FieldLabel>\n <FieldDescription>\n Enabling this will hide your contributions and activity\n from your GitHub profile and from social features like\n followers, stars, feeds, leaderboards and releases.\n </FieldDescription>\n </FieldContent>\n </Field>\n <Field orientation=\"horizontal\">\n <Checkbox id=\"private-contributions\" defaultChecked />\n <FieldContent>\n <FieldLabel\n htmlFor=\"private-contributions\"\n className=\"font-normal\"\n >\n Include private contributions on my profile\n </FieldLabel>\n <FieldDescription>\n Your contribution graph, achievements, and activity\n overview will show your private contributions without\n revealing any repository or organization information.{\" \"}\n <a href=\"#read-more\">Read more</a>.\n </FieldDescription>\n </FieldContent>\n </Field>\n </FieldGroup>\n </FieldSet>\n </FieldGroup>\n </form>\n </CardContent>\n <CardFooter>\n <Button form=\"contributions-activity\">Save Changes</Button>\n </CardFooter>\n </Card>\n </Example>\n )\n}\nconst users = [\n \"shadcn\",\n \"maxleiter\",\n \"evilrabbit\",\n \"pranathip\",\n \"jorgezreik\",\n \"shuding\",\n \"rauchg\",\n]\nfunction AssignIssue() {\n const anchor = useComboboxAnchor()\n return (\n <Example title=\"User Select\" className=\"items-center justify-center\">\n <Card className=\"w-full max-w-sm\" size=\"sm\">\n <CardHeader className=\"border-b\">\n <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n <CardDescription className=\"text-sm\">\n Select users to assign to this issue.\n </CardDescription>\n <CardAction>\n <Tooltip>\n <TooltipTrigger\n render={<Button variant=\"outline\" size=\"icon-xs\" />}\n >\n <IconPlaceholder\n lucide=\"PlusIcon\"\n tabler=\"IconPlus\"\n hugeicons=\"PlusSignIcon\"\n phosphor=\"PlusIcon\"\n remixicon=\"RiAddLine\"\n />\n </TooltipTrigger>\n <TooltipContent>Add user</TooltipContent>\n </Tooltip>\n </CardAction>\n </CardHeader>\n <CardContent>\n <Combobox\n multiple\n autoHighlight\n items={users}\n defaultValue={[users[0]]}\n >\n <ComboboxChips ref={anchor}>\n <ComboboxValue>\n {(values) => (\n <React.Fragment>\n {values.map((username: string) => (\n <ComboboxChip key={username}>\n <Avatar className=\"size-4\">\n <AvatarImage\n src={`https://github.com/${username}.png`}\n alt={username}\n />\n <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n </Avatar>\n {username}\n </ComboboxChip>\n ))}\n <ComboboxChipsInput\n placeholder={\n values.length > 0 ? undefined : \"Select a item...\"\n }\n />\n </React.Fragment>\n )}\n </ComboboxValue>\n </ComboboxChips>\n <ComboboxContent anchor={anchor}>\n <ComboboxEmpty>No users found.</ComboboxEmpty>\n <ComboboxList>\n {(username) => (\n <ComboboxItem key={username} value={username}>\n <Avatar className=\"size-5\">\n <AvatarImage\n src={`https://github.com/${username}.png`}\n alt={username}\n />\n <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n </Avatar>\n {username}\n </ComboboxItem>\n )}\n </ComboboxList>\n </ComboboxContent>\n </Combobox>\n </CardContent>\n </Card>\n </Example>\n )\n}\n",
"type": "registry:block"
}
],
"type": "registry:block"
}Source
Frequently Asked Questions
What does github.json do?
github.json is a source file in the ui codebase, written in json.
Where is github.json in the architecture?
github.json is located at apps/v4/public/r/styles/base-mira/github.json (directory: apps/v4/public/r/styles/base-mira).
Analyze Your Own Codebase
Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.
Try Supermodel Free