Code Snippet Tabs — Free HTML CSS JS Install Snippet

Every library's README and docs page shows the install command, and the polished version offers it for each package manager — npm, pnpm, yarn, bun — behind tabs, with a one-click copy button. This component is that block: a dark terminal-style card with a sliding "ink" underline that animates between tabs, a copy button with success feedback, keyboard navigation, and a monospace command line with a shell prompt. It is built in HTML, CSS, and vanilla JavaScript, and it is the snippet you put at the top of a docs page or component example.

The sliding ink underline

Instead of giving each tab its own static underline, a single .cst-ink element slides beneath the active tab. moveInk() reads the active tab's offsetLeft and offsetWidth and sets the ink's transform: translateX() and width to match. Because both properties are CSS-transitioned, the underline glides and resizes from one tab to the next — the signature animated-tabs effect from Vercel, Stripe, and shadcn/ui docs. Measuring from the live DOM means the ink is always correct regardless of tab label widths (npm and pnpm are different lengths), and a resize listener re-aligns it if the layout reflows.

Swapping the command

The four commands live in a COMMANDS array. Selecting a tab sets the <code> element's textContent to the matching command, toggles the .active class and aria-selected across the tabs, and moves the ink. Using textContent (not innerHTML) means the command is inserted as plain text — safe and correct, with no HTML parsing — which matters when a command could contain characters like & or quotes.

Copy with clipboard fallback

The copy button writes the active command to the clipboard with navigator.clipboard.writeText(), wrapped in a try/catch that falls back to a hidden-textarea document.execCommand('copy') for insecure contexts or sandboxed iframes. On success it adds a .copied class that swaps the copy icon for a green checkmark via pure CSS, and a debounced setTimeout reverts it after 1.7 seconds. Crucially, copy always reads from the COMMANDS array for the current tab, so you copy exactly what is shown — switch to yarn, hit copy, and you get the yarn command.

Keyboard-navigable tablist

The tabs are role="tab" inside a role="tablist", and the active tab carries aria-selected="true". Arrow Left and Arrow Right move the selection (with wrap-around via modulo) and shift focus to the next tab, the keyboard pattern expected of a tablist. Every tab is a real <button>, so the whole control is operable without a mouse.

The terminal aesthetic

The card uses a deep navy background, a monospace font stack (ui-monospace, 'SF Mono', Menlo), a dimmed $ shell prompt that is user-select: none so it is not copied when a user selects the line by hand, and an indigo-tinted command colour. The whole thing reads as a real terminal snippet, which is the visual language developers expect for install instructions.

Customisation

Edit the tab labels and the COMMANDS array together (keep them in the same order). You are not limited to install commands — use it for any set of equivalent snippets (cURL vs fetch vs axios, or SQL dialects). For multi-line code, swap the single <code> for a block and the same select/copy logic applies. Swap the #818cf8 ink and #a5b4fc command colour for your palette, and adjust the ink transition duration to taste.