InstallTabs

Introduction

The InstallTabs component displays installation commands for common package managers (npm, pnpm, yarn, etc.), supporting tab switching and one-click copy. Just provide the package name to automatically generate installation commands for each manager. Ideal for documentation, tutorials, and component libraries.

Features:

• Supports npm, pnpm, yarn and other mainstream package managers
• One-click copy command
• Supports dev dependency (-D) option
• Customizable manager list
• Responsive design for all screen sizes

Basic Usage

The simplest installation tab usage:

<InstallTabs packageName="react" />

Rendered result:

npm install react

pnpm add react

yarn add react

Dev Dependency Usage

Show dev dependency install command:

<InstallTabs packageName="vite" dev />

Rendered result:

npm install -D vite

pnpm add -D vite

yarn add -D vite

Custom Managers

Show only npm and yarn:

<InstallTabs packageName="eslint" managers={["npm", "yarn"]} />

Rendered result:

npm install eslint

yarn add eslint

Props