Code Tabs

Code variants in tabs: npm, pnpm, bun, with copy. Pro · Animated components › Code and numbers

Several versions of one snippet behind tabs — install commands per package manager, TS and JS — with one copy button.

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add code-tabs

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { CodeTabs } from 'valyro-ui-pro';

Prop	Type	Default
`codes` *	`Record<string, string>`		The variants in order: tab name → code (`npm`, `pnpm`, `bun`; `TypeScript`, `JavaScript`).
`language`	`string \| Record<string, string>`	`'bash'`	Highlighting language for every tab, or per tab name (default `bash`).
`value`	`string`		Name of the shown tab.
`defaultValue`	`string`		Initial `value` when uncontrolled.
`onValueChange`	`(value: string) => void`		Called with the new `value` when it changes.
`copyable`	`boolean`	`true`	Copy button for the shown variant (default true).
`onCopy`	`(code: string, tab: string) => void`		Called after a successful copy with the code and its tab.
`showLineNumbers`	`boolean`	`false`	Line-number gutter.
`animation`	`'default' \| 'spring'`	`'spring'`	`spring` (default): the indicator springs, the code slides in and the block eases to the new height.
`labels`	`Partial<CodeTabsLabels>`		Overrides for the built-in English text; keys left out keep their defaults.