DirectoryAddButton() — ui Function Reference

Architecture documentation for the DirectoryAddButton() function in directory-add-button.tsx from the ui codebase.

Function tsx Internationalization Dictionary

Entity Profile

Internationalization→ Dictionary→ DirectoryAddButton() — ui Function Reference

Dependency Diagram

graph TD
  82e069d9_e7a3_a246_6bf2_7e2fdd316a5e["DirectoryAddButton()"]
  0d712d39_6aba_8d7a_39a7_b7cc3ac1b97d["directory-add-button.tsx"]
  82e069d9_e7a3_a246_6bf2_7e2fdd316a5e -->|defined in| 0d712d39_6aba_8d7a_39a7_b7cc3ac1b97d
  style 82e069d9_e7a3_a246_6bf2_7e2fdd316a5e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/components/directory-add-button.tsx lines 42–181

export function DirectoryAddButton({
  registry,
}: {
  registry: { name: string }
}) {
  const [config, setConfig] = useConfig()
  const [hasCopied, setHasCopied] = React.useState(false)
  const [open, setOpen] = React.useState(false)
  const isMobile = useIsMobile()

  const packageManager = config.packageManager || "pnpm"

  const commands = React.useMemo(() => {
    return {
      pnpm: `pnpm dlx shadcn@latest registry add ${registry.name}`,
      npm: `npx shadcn@latest registry add ${registry.name}`,
      yarn: `yarn dlx shadcn@latest registry add ${registry.name}`,
      bun: `bunx --bun shadcn@latest registry add ${registry.name}`,
    }
  }, [registry.name])

  const command = commands[packageManager]

  React.useEffect(() => {
    if (hasCopied) {
      const timer = setTimeout(() => setHasCopied(false), 2000)
      return () => clearTimeout(timer)
    }
  }, [hasCopied])

  const handleCopy = React.useCallback(() => {
    copyToClipboardWithMeta(command, {
      name: "copy_registry_add_command",
      properties: {
        command,
        registry: registry.name,
      },
    })
    setHasCopied(true)
  }, [command, registry.name])

  const Trigger = (
    <Button size="sm" variant="outline" className="relative z-10">
      Add <IconPlus />
    </Button>
  )

  const Content = (
    <Tabs
      value={packageManager}
      onValueChange={(value) => {
        setConfig({
          ...config,
          packageManager: value as "pnpm" | "npm" | "yarn" | "bun",
        })
      }}
      className="gap-0 overflow-hidden rounded-lg border"
    >
      <div className="flex items-center gap-2 border-b p-2">
        <TabsList className="*:data-[slot=tabs-trigger]:data-[state=active]:border-input h-auto rounded-none bg-transparent p-0 font-mono *:data-[slot=tabs-trigger]:border *:data-[slot=tabs-trigger]:border-transparent *:data-[slot=tabs-trigger]:pt-0.5 *:data-[slot=tabs-trigger]:shadow-none!">
          <TabsTrigger value="pnpm">pnpm</TabsTrigger>
          <TabsTrigger value="npm">npm</TabsTrigger>
          <TabsTrigger value="yarn">yarn</TabsTrigger>
          <TabsTrigger value="bun">bun</TabsTrigger>
        </TabsList>
        <Tooltip>
          <TooltipTrigger asChild>
            <Button
              size="icon-sm"
              variant="ghost"
              className="ml-auto size-7 rounded-lg"
              onClick={handleCopy}
            >
              {hasCopied ? (
                <IconCheck className="size-4" />
              ) : (
                <IconCopy className="size-4" />
              )}
              <span className="sr-only">Copy command</span>
            </Button>
          </TooltipTrigger>