CodeBlockCommand

The CodeBlockCommand component automatically converts installation commands to different package managers and displays them in tabs.

Usage

Copy<script setup lang="ts">
import { CodeBlockCommand } from '@/components/CodeBlockCommand'
</script>

<template>
  <CodeBlockCommand code="npm install shadcn-vue" />
</template>

Features

Automatic Conversion

The component automatically converts commands:

• npm install → yarn add, pnpm add, bun add
• npx create-* → yarn create, pnpm create, bun create
• npx → yarn dlx, pnpm dlx, bunx
• npm run → yarn, pnpm, bun

Package Manager Selection

Users can switch between package managers using tabs, and their selection is saved in useConfig().

API Reference

CodeBlockCommand

Supported Commands

• npm install <package>
• npx create-<template>
• npm create <template>
• npx <command>
• npm run <script>

Styling

The component includes:

• Terminal icon indicator
• Syntax highlighting for bash
• Copy button overlay
• Responsive tab layout