ToolbarControls() — ui Function Reference

Architecture documentation for the ToolbarControls() function in toolbar-controls.tsx from the ui codebase.

Function tsx DesignEngine PreviewSystem

Entity Profile

DesignEngine→ PreviewSystem→ ToolbarControls() — ui Function Reference

Dependency Diagram

graph TD
  8b900c14_aee3_ac3b_7fbd_765ee725a7d0["ToolbarControls()"]
  332b760a_9e61_32d9_efb2_ac91c3e4b17e["toolbar-controls.tsx"]
  8b900c14_aee3_ac3b_7fbd_765ee725a7d0 -->|defined in| 332b760a_9e61_32d9_efb2_ac91c3e4b17e
  style 8b900c14_aee3_ac3b_7fbd_765ee725a7d0 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(create)/components/toolbar-controls.tsx lines 69–301

export function ToolbarControls() {
  const [open, setOpen] = React.useState(false)
  const [params, setParams] = useDesignSystemSearchParams()
  const [config, setConfig] = useConfig()
  const [hasCopied, setHasCopied] = React.useState(false)

  const packageManager = config.packageManager || "pnpm"

  const commands = React.useMemo(() => {
    const origin = process.env.NEXT_PUBLIC_APP_URL || "http://localhost:4000"
    const url = `${origin}/init?base=${params.base}&style=${params.style}&baseColor=${params.baseColor}&theme=${params.theme}&iconLibrary=${params.iconLibrary}&font=${params.font}&menuAccent=${params.menuAccent}&menuColor=${params.menuColor}&radius=${params.radius}&template=${params.template}&rtl=${params.rtl}`
    const templateFlag = params.template ? ` --template ${params.template}` : ""
    const rtlFlag = params.rtl ? " --rtl" : ""
    return {
      pnpm: `pnpm dlx shadcn@latest create${rtlFlag} --preset "${url}"${templateFlag}`,
      npm: `npx shadcn@latest create${rtlFlag} --preset "${url}"${templateFlag}`,
      yarn: `yarn dlx shadcn@latest create${rtlFlag} --preset "${url}"${templateFlag}`,
      bun: `bunx --bun shadcn@latest create${rtlFlag} --preset "${url}"${templateFlag}`,
    }
  }, [
    params.base,
    params.style,
    params.baseColor,
    params.theme,
    params.iconLibrary,
    params.font,
    params.menuAccent,
    params.menuColor,
    params.radius,
    params.template,
    params.rtl,
  ])

  const command = commands[packageManager]

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

  const handleCopy = React.useCallback(() => {
    const properties: Record<string, string> = {
      command,
    }
    if (params.template) {
      properties.template = params.template
    }
    copyToClipboardWithMeta(command, {
      name: "copy_npm_command",
      properties,
    })
    setOpen(false)
    setHasCopied(true)
    toast("Command copied to clipboard.", {
      description:
        "Paste and run the command in your terminal to create a new shadcn/ui project.",
      position: "bottom-center",
      classNames: {
        content: "rounded-xl",
        toast: "rounded-xl!",
        description: "text-sm/leading-normal!",
      },
    })
  }, [command, params.template, setOpen])

  const handleCopyFromTabs = React.useCallback(() => {
    const properties: Record<string, string> = {
      command,
    }
    if (params.template) {
      properties.template = params.template
    }
    copyToClipboardWithMeta(command, {
      name: "copy_npm_command",
      properties,
    })
    setHasCopied(true)
  }, [command, params.template])