InstallTabs

One component for install command

One component for showing install commands, MCP server configs, or SDK snippets across every client you support. The panel locks to the tallest tab's height, so switching between Claude Desktop and Cursor — or npm and yarn — never shifts the page below. What's in it Per-tab syntax mode: JSON, YAML, or plain text. Keys, strings, numbers, booleans, and comments each get their own colour. Optional icon per tab. Drop in a client logo or package manager mark. Copy button with a confirmation state. Its text colour auto-adjusts to your accent. Equal-height measurement re-runs on font load and container resize. The lock holds after the page settles. Full ARIA tab pattern. Arrow keys switch tabs, Home and End jump to ends. Horizontal tab scroll for long client lists. Touch handling behaves correctly on iOS. Seventeen colour controls, two font controls, every label editable. No external dependencies, no CDN scripts. Self-contained. Pre-filled with seven Toolcall MCP server configs (Claude Desktop, Cursor, Cline, Continue, Zed, Windsurf, Codex CLI) as a working example. Replace them with your own snippets in the property panel.

One component for install command