> For the complete documentation index, see [llms.txt](https://developer.harness.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://developer.harness.io/sandbox/custom-integration-showcase/ar-quickstart.md). # Package Selector Format and platform cards that route a reader straight to the install steps for their stack, live on this page exactly as they run on the Artifact Registry get-started guide. ## What it does * Most Harness modules support more than one way to install or connect — a package format, a platform, an artifact type. * Rather than write one page per format and make a reader guess which one applies to them, or place every format's steps on a single page they must scroll past, this integration shows a row of cards. * The reader selects Docker, Helm, npm, Maven, or whichever applies, and lands on a page written for exactly that format, with the rest of the parent page's context still around it. * The production example is the Artifact Registry get-started guide, where 25 formats route through this same selector. This page runs that same selector at full size, wired to a staging copy of the integration. ## Why it is built this way GitBook does not ship a component for this, so it is a **webframe** — a small piece of untrusted HTML served from our own code, hosted inside an iframe on the page. That split matters: * The webframe only draws cards and reports clicks. It does not talk to Harness, Zendesk, or any backend directly, because that would mean shipping credentials into something that runs in every reader's browser. * Each format's content lives on its own **hidden page**, not folded into the parent. That gives every format a real, indexable, crawlable URL, which matters for search and for anyone reading with an AI assistant or agent rather than a browser. * The parent page carries a plain markdown link list under the selector, listing every format by name. The selector itself is a black box to a screen reader or a crawler, because it navigates by `postMessage`, not an ``. The link list is what keeps the page reachable by keyboard and indexable by anything that does not render iframes. ## This is what it looks like in action This page is not a description of the package selector, it is the selector, rendering live below. It mirrors the production Artifact Registry get-started page exactly: same 25 formats, same icons, same order. Twenty-five cards is what triggers the five-column grid and the tallest resize, so a smaller sample would not test the paths that actually break. Select your artifact format below to get started: {% @harness-package-selector-staging/package-selector platforms="%5B%7B%22label%22%3A%22Docker%22%2C%22slug%22%3A%22docker%22%2C%22path%22%3A%22sandbox%2Far-quickstart%2Fdocker-quickstart%22%2C%22logo%22%3A%22docker-logo.svg%22%2C%22logoSize%22%3A24%7D%2C%7B%22label%22%3A%22Helm%22%2C%22slug%22%3A%22helm%22%2C%22path%22%3A%22sandbox%2Far-quickstart%2Fhelm-quickstart%22%2C%22logo%22%3A%22helm-logo.svg%22%2C%22logoSize%22%3A28%7D%2C%7B%22label%22%3A%22Helm%20HTTP%22%2C%22slug%22%3A%22helm-http%22%2C%22path%22%3A%22sandbox%2Far-quickstart%2Fhelm-http-quickstart%22%2C%22logo%22%3A%22helm-http-logo.svg%22%2C%22logoSize%22%3A24%7D%2C%7B%22label%22%3A%22Generic%22%2C%22slug%22%3A%22generic%22%2C%22path%22%3A%22sandbox%2Far-quickstart%2Fgeneric-quickstart%22%2C%22logo%22%3A%22generic-logo.svg%22%2C%22logoSize%22%3A20%7D%2C%7B%22label%22%3A%22Raw%20File%22%2C%22slug%22%3A%22raw-file%22%2C%22path%22%3A%22sandbox%2Far-quickstart%2Fraw-file-quickstart%22%2C%22logo%22%3A%22generic-logo.svg%22%2C%22logoSize%22%3A20%7D%2C%7B%22label%22%3A%22Maven%22%2C%22slug%22%3A%22maven%22%2C%22path%22%3A%22sandbox%2Far-quickstart%2Fmaven-quickstart%22%2C%22logo%22%3A%22maven-logo.svg%22%2C%22iconOnly%22%3Atrue%7D%2C%7B%22label%22%3A%22Python%22%2C%22slug%22%3A%22python%22%2C%22path%22%3A%22sandbox%2Far-quickstart%2Fpython-quickstart%22%2C%22logo%22%3A%22python-logo.svg%22%2C%22logoSize%22%3A24%7D%2C%7B%22label%22%3A%22NPM%22%2C%22slug%22%3A%22npm%22%2C%22path%22%3A%22sandbox%2Far-quickstart%2Fnpm-quickstart%22%2C%22logo%22%3A%22npm-logo.svg%22%2C%22iconOnly%22%3Atrue%7D%2C%7B%22label%22%3A%22Nuget%22%2C%22slug%22%3A%22nuget%22%2C%22path%22%3A%22sandbox%2Far-quickstart%2Fnuget-quickstart%22%2C%22logo%22%3A%22nuget-logo.svg%22%2C%22logoSize%22%3A24%7D%2C%7B%22label%22%3A%22RPM%22%2C%22slug%22%3A%22rpm%22%2C%22path%22%3A%22sandbox%2Far-quickstart%2Frpm-quickstart%22%2C%22logo%22%3A%22rpm-logo.svg%22%2C%22iconOnly%22%3Atrue%2C%22logoWidth%22%3A42%2C%22logoHeight%22%3A28%7D%2C%7B%22label%22%3A%22Debian%22%2C%22slug%22%3A%22debian%22%2C%22path%22%3A%22sandbox%2Far-quickstart%2Fdebian-quickstart%22%2C%22logo%22%3A%22debian-logo.svg%22%2C%22logoSize%22%3A24%7D%2C%7B%22label%22%3A%22Alpine%22%2C%22slug%22%3A%22alpine%22%2C%22path%22%3A%22sandbox%2Far-quickstart%2Falpine-quickstart%22%2C%22logo%22%3A%22alpine-logo.svg%22%2C%22logoSize%22%3A24%7D%2C%7B%22label%22%3A%22Wolfi%22%2C%22slug%22%3A%22wolfi%22%2C%22path%22%3A%22sandbox%2Far-quickstart%2Fwolfi-quickstart%22%2C%22logo%22%3A%22wolfi-logo.svg%22%2C%22logoSize%22%3A24%7D%2C%7B%22label%22%3A%22Cargo%22%2C%22slug%22%3A%22cargo%22%2C%22path%22%3A%22sandbox%2Far-quickstart%2Fcargo-quickstart%22%2C%22logo%22%3A%22rust-logo.png%22%2C%22logoSize%22%3A24%7D%2C%7B%22label%22%3A%22Conan%22%2C%22slug%22%3A%22conan%22%2C%22path%22%3A%22sandbox%2Far-quickstart%2Fconan-quickstart%22%2C%22logo%22%3A%22conan-logo.svg%22%2C%22logoSize%22%3A24%7D%2C%7B%22label%22%3A%22Go%22%2C%22slug%22%3A%22go%22%2C%22path%22%3A%22sandbox%2Far-quickstart%2Fgo-quickstart%22%2C%22logo%22%3A%22go-logo.svg%22%2C%22iconOnly%22%3Atrue%7D%2C%7B%22label%22%3A%22Hugging%20Face%22%2C%22slug%22%3A%22hugging-face%22%2C%22path%22%3A%22sandbox%2Far-quickstart%2Fhugging-face-quickstart%22%2C%22logo%22%3A%22hugging-face-logo.svg%22%2C%22logoSize%22%3A24%7D%2C%7B%22label%22%3A%22Conda%22%2C%22slug%22%3A%22conda%22%2C%22path%22%3A%22sandbox%2Far-quickstart%2Fconda-quickstart%22%2C%22logo%22%3A%22conda-logo.svg%22%2C%22logoSize%22%3A24%7D%2C%7B%22label%22%3A%22Dart%22%2C%22slug%22%3A%22dart%22%2C%22path%22%3A%22sandbox%2Far-quickstart%2Fdart-quickstart%22%2C%22logo%22%3A%22dart-logo.svg%22%2C%22logoSize%22%3A24%7D%2C%7B%22label%22%3A%22PHP%20Composer%22%2C%22slug%22%3A%22php-composer%22%2C%22path%22%3A%22sandbox%2Far-quickstart%2Fphp-composer-quickstart%22%2C%22logo%22%3A%22php-composer-logo.svg%22%2C%22logoSize%22%3A24%7D%2C%7B%22label%22%3A%22Swift%22%2C%22slug%22%3A%22swift%22%2C%22path%22%3A%22sandbox%2Far-quickstart%2Fswift-quickstart%22%2C%22logo%22%3A%22swift-logo.svg%22%2C%22logoSize%22%3A24%7D%2C%7B%22label%22%3A%22Puppet%22%2C%22slug%22%3A%22puppet%22%2C%22path%22%3A%22sandbox%2Far-quickstart%2Fpuppet-quickstart%22%2C%22logo%22%3A%22puppet-logo.svg%22%2C%22logoSize%22%3A24%7D%2C%7B%22label%22%3A%22Terraform%22%2C%22slug%22%3A%22terraform%22%2C%22path%22%3A%22sandbox%2Far-quickstart%2Fterraform-quickstart%22%2C%22logo%22%3A%22terraform-logo.svg%22%2C%22logoSize%22%3A24%7D%2C%7B%22label%22%3A%22R%20%28CRAN%29%22%2C%22slug%22%3A%22r-cran%22%2C%22path%22%3A%22sandbox%2Far-quickstart%2Fr-cran-quickstart%22%2C%22logo%22%3A%22cran-logo.svg%22%2C%22logoSize%22%3A24%7D%2C%7B%22label%22%3A%22RubyGems%22%2C%22slug%22%3A%22rubygems%22%2C%22path%22%3A%22sandbox%2Far-quickstart%2Frubygems-quickstart%22%2C%22logo%22%3A%22ruby-logo.svg%22%2C%22logoSize%22%3A24%7D%5D" disableSort="true" iconLibrary="" %} Or go straight to a format: * [Docker](/sandbox/custom-integration-showcase/ar-quickstart/docker-quickstart.md) * [Helm](/sandbox/custom-integration-showcase/ar-quickstart/helm-quickstart.md) * [Helm HTTP](/sandbox/custom-integration-showcase/ar-quickstart/helm-http-quickstart.md) * [Generic](/sandbox/custom-integration-showcase/ar-quickstart/generic-quickstart.md) * [Raw File](/sandbox/custom-integration-showcase/ar-quickstart/raw-file-quickstart.md) * [Maven](/sandbox/custom-integration-showcase/ar-quickstart/maven-quickstart.md) * [Python](/sandbox/custom-integration-showcase/ar-quickstart/python-quickstart.md) * [NPM](/sandbox/custom-integration-showcase/ar-quickstart/npm-quickstart.md) * [Nuget](/sandbox/custom-integration-showcase/ar-quickstart/nuget-quickstart.md) * [RPM](/sandbox/custom-integration-showcase/ar-quickstart/rpm-quickstart.md) * [Debian](/sandbox/custom-integration-showcase/ar-quickstart/debian-quickstart.md) * [Alpine](/sandbox/custom-integration-showcase/ar-quickstart/alpine-quickstart.md) * [Wolfi](/sandbox/custom-integration-showcase/ar-quickstart/wolfi-quickstart.md) * [Cargo](/sandbox/custom-integration-showcase/ar-quickstart/cargo-quickstart.md) * [Conan](/sandbox/custom-integration-showcase/ar-quickstart/conan-quickstart.md) * [Go](/sandbox/custom-integration-showcase/ar-quickstart/go-quickstart.md) * [Hugging Face](/sandbox/custom-integration-showcase/ar-quickstart/hugging-face-quickstart.md) * [Conda](/sandbox/custom-integration-showcase/ar-quickstart/conda-quickstart.md) * [Dart](/sandbox/custom-integration-showcase/ar-quickstart/dart-quickstart.md) * [PHP Composer](/sandbox/custom-integration-showcase/ar-quickstart/php-composer-quickstart.md) * [Swift](/sandbox/custom-integration-showcase/ar-quickstart/swift-quickstart.md) * [Puppet](/sandbox/custom-integration-showcase/ar-quickstart/puppet-quickstart.md) * [Terraform](/sandbox/custom-integration-showcase/ar-quickstart/terraform-quickstart.md) * [R (CRAN)](/sandbox/custom-integration-showcase/ar-quickstart/r-cran-quickstart.md) * [RubyGems](/sandbox/custom-integration-showcase/ar-quickstart/rubygems-quickstart.md) Every card above points at a hidden child page in this folder. Each child says which format it is, so a click that lands on the wrong page is obvious. Every one of the twenty-five is a real, published, live GitBook page with its own URL, and every one is marked `hidden` in `SUMMARY.md`, so none of them appear in the sidebar — the only way a reader reaches one is through the selector's cards or the link list above, which is deliberate: it proves the pattern this integration exists to demonstrate, a reader picks a format once and the rest of the navigation gets out of the way. ## What we learned building it Provider logos are committed as SVGs to the repository, but GitBook's Git Sync only imports an asset when some page actually references it. A logo committed but never linked from a page never reaches the published site, and the card falls back to a text label. The fix is a small hidden reference page that exists purely to link every logo once, so Git Sync always picks them up. It is not elegant, but it is an honest constraint in how GitBook handles static assets, and it is worth writing down for anyone building a similar picker. {% @harness-feedback/feedback module="sandbox" pagePath="sandbox/ar-quickstart" %}