Legacy Code Block Command

Why Use It

Best for docs pages, install cards, and setup steps where users switch between Bun, npm, pnpm, and Yarn.
Accepts either explicit commands per package manager or a converted npm command from one helper.
Persists the selected package manager, which keeps repeated install surfaces aligned across a session.
Supports extra header actions, so the command block can carry a docs link or secondary CTA without extra layout work.

Installation

Install the component directly. It is self-contained and does not need extra tabs or helper primitives.

$ bunx --bun shadcn@latest add https://sabraman.ru/r/legacy-code-block-command.json

Quick Start

For most docs pages, start with convertNpmCommand and let the helper generate every package-manager variant.

"use client";

import {
	convertNpmCommand,
	LegacyCodeBlockCommand,
} from "@/components/legacy-code-block-command";

export function LegacyCodeBlockCommandUsageExample() {
	return (
		<LegacyCodeBlockCommand
			initialPackageManager="bun"
			{...convertNpmCommand(
				"npx shadcn@latest add https://sabraman.ru/r/legacy-switch.json",
			)}
		/>
	);
}

Examples

Convert One Install Command

Generate Bun, npm, pnpm, and Yarn commands from one npm-style install line.

$ bunx --bun shadcn@latest add https://sabraman.ru/r/legacy-switch.json

"use client";

import {
	convertNpmCommand,
	LegacyCodeBlockCommand,
} from "@/components/legacy-code-block-command";

export function LegacyCodeBlockCommandUsageExample() {
	return (
		<LegacyCodeBlockCommand
			initialPackageManager="bun"
			{...convertNpmCommand(
				"npx shadcn@latest add https://sabraman.ru/r/legacy-switch.json",
			)}
		/>
	);
}

Explicit Commands

Pass explicit commands when each package manager needs a different install path.

$ bun add @radix-ui/react-switch

"use client";

import { LegacyCodeBlockCommand } from "@/components/legacy-code-block-command";

export function LegacyCodeBlockCommandExplicitExample() {
	return (
		<LegacyCodeBlockCommand
			bun="bun add @radix-ui/react-switch"
			npm="npm install @radix-ui/react-switch"
			pnpm="pnpm add @radix-ui/react-switch"
			yarn="yarn add @radix-ui/react-switch"
		/>
	);
}

Header Actions

Use `headerActions` to attach a secondary button without rebuilding the shell.

$ bunx --bun shadcn@latest add @sabraman/legacy-slider

"use client";

import { ExternalLinkIcon } from "lucide-react";
import { LegacyBarButton } from "@/components/legacy-bar-button";
import {
	convertNpmCommand,
	LegacyCodeBlockCommand,
} from "@/components/legacy-code-block-command";

export function LegacyCodeBlockCommandHeaderActionExample() {
	return (
		<LegacyCodeBlockCommand
			headerActions={
				<LegacyBarButton
					icon={<ExternalLinkIcon />}
					label="Docs"
					layout="text-icon"
				/>
			}
			{...convertNpmCommand("npx shadcn@latest add @sabraman/legacy-slider")}
		/>
	);
}

Custom Initial Package Manager

Set the default package manager when a page should open on pnpm, Bun, or another preferred tab.

$ bunx --bun shadcn@latest add @sabraman/legacy-alert-dialog

"use client";

import {
	convertNpmCommand,
	LegacyCodeBlockCommand,
} from "@/components/legacy-code-block-command";

export function LegacyCodeBlockCommandInitialManagerExample() {
	return (
		<LegacyCodeBlockCommand
			initialPackageManager="pnpm"
			{...convertNpmCommand(
				"npx shadcn@latest add @sabraman/legacy-alert-dialog",
			)}
		/>
	);
}

API Reference

LegacyCodeBlockCommandProps covers the command values plus three behavior hooks: initialPackageManager, headerActions, and the copy success or error callbacks.

Also inherits: React.HTMLAttributes<HTMLDivElement>

Prop	Type	Required
`bun`	`string`	No
`headerActions`	`React.ReactNode`	No
`initialPackageManager`	`PackageManager`	No
`npm`	`string`	No
`onCopyError`	`(error: Error) => void`	No
`onCopySuccess`	`(data: { command: string; packageManager: PackageManager; }) => void`	No
`pnpm`	`string`	No
`yarn`	`string`	No

Notes

convertNpmCommand is the fastest path when your docs already store one npm command string.
The selected package manager is synced through local storage, so multiple command blocks stay aligned.
Use onCopySuccess and onCopyError when the page needs analytics or toast feedback around copy actions.

SABRAMAN