SDK Install Card

name: "SDK Install Card"
short_description: An install command with package-manager tabs (npm, pnpm, yarn, pip) and one-click copy.
long_visual_description: >
  A compact bordered card with a row of package-manager tabs across the top; the active tab is
  underlined in the primary colour. Below sits a single monospace command line prefixed with a muted
  shell prompt, and a small Copy button to its right that swaps to "Copied!" for a moment after use.
  Switching tabs swaps the command to that manager's syntax.

use_cases:
  - Show the install command for a library across npm, pnpm and yarn.
  - Offer pip or poetry install lines for a Python package.
  - Put a copyable getting-started command at the top of a README-style page.
  - Present CLI install options in product docs.
  - Give a quickstart step with the right command per ecosystem.
  - Show a single install line for a one-manager package.

recommended_for:
  - The install step of a quickstart, with a copy button.
  - Packages published to more than one manager.
avoid_for:
  - Multi-line setup scripts (use code-sample-tabs).
  - Non-command tabbed content (use tabs).

markets:
  - Global

example_usage: >
  Pass a commands array where each item has a manager token, its install command, and an active
  flag. Mark the first command active so a line shows before JavaScript loads. Tabs swap the visible
  command; the copy button copies the active manager's command (without the shell prompt).

how_to_use: >
  Layout and the initially visible command are pure markup (the active command carries
  data-active=true; inactive panels are hidden by a data-[active=false]:hidden utility), so a line
  renders in screenshots with no JavaScript. behavior.js wires the interaction: clicking a manager
  tab - or arrowing Left/Right/Home/End - activates it and reveals its command; the copy button reads
  the active panel's data-command attribute (so the "$ " prompt is never copied), calls
  navigator.clipboard.writeText, and briefly shows "Copied!". It dispatches sdk-install-card:change
  (detail.index) on switch. The portable self-init reads everything from the DOM - no props object.

props:
  commands: "The install commands, in tab order. Each has a manager token (visible label and id link), the command string, and an active flag - set exactly one, normally the first."

example_prompts:
  - "Add an install card with npm, pnpm, and yarn tabs for @example/sdk."
  - "Show a single pip install command with a copy button."

lifecycle: experimental
content_model: Install commands for the same package, one per package manager, switched by tabs.

theming:
  tokens_used:
    - --color-surface
    - --color-border
    - --color-on-surface
    - --color-on-surface-muted
    - --color-primary
    - --radius-card
    - --radius-control
    - --duration-token
    - --font-mono

editorial_guidance: >
  Order tabs by the ecosystem's most common manager first (npm before pnpm before yarn). Keep the
  package name identical across commands so only the manager syntax differs, and omit the shell
  prompt from the command string - the card adds it visually and copy leaves it out.

relationships:
  related:
    - developer/code-sample-tabs
    - developer/endpoint-row

categorization:
  category: Developer
  subcategory: Onboarding
  atomic_type: molecule
  usage_type: [card, nav]
  maturity: ai-generated
  wcag:
    level: AA
    notes: role=tablist/tab/tabpanel with aria-selected, aria-controls and aria-labelledby; roving tabindex keeps one tab in the tab order; Left/Right/Home/End move between tabs; copy is a labelled button.
  keyboard_support: Tab moves focus into the active manager tab; Left/Right cycle and activate tabs; Home/End jump to first/last; Enter/Space and click activate; the copy button is reachable in the tab order.
  seo_score: 30
  text_direction: ltr