Gumtree UI

ClonePanel

A clone URL panel with SSH/HTTPS tabs, a monospace URL with copy button, and optional notes.

Import

import { ClonePanel } from "@gumtree/ui/forge/ClonePanel";

Props

PropTypeDefaultDescription
urls*CloneUrl[]-Array of { label, url } entries for each tab
activeTabnumber0Index of the active tab
noteComponentChildren-Optional note displayed below the URL

Examples

SSH and HTTPS

A clone panel with two URL options and a note.

SSHHTTPS
git@example.forge:necessary/example-app.git
SHA-256 object format · gitoxide compatible
<ClonePanel
  urls={[
    { label: "SSH", url: "git@example.forge:necessary/example-app.git" },
    { label: "HTTPS", url: "https://example.forge/necessary/example-app.git" },
  ]}
  note="SHA-256 object format · gitoxide compatible"
/>

Single URL

A clone panel with just one option.

HTTPS
https://example.com/repo.git
<ClonePanel urls={[{ label: "HTTPS", url: "https://example.com/repo.git" }]} />