Getting Started
Blocks
Components
Device Mocks
Special Effects
Animations
Text Animations
Buttons
npm run shadcn add button
import { ScriptCopyBtn } from "@/registry/magicui/script-copy-btn";
export function ScriptCopyBtnDemo() {
const customCommandMap = {
npm: "npm run shadcn add button",
yarn: "yarn shadcn add button",
pnpm: "pnpm dlx shadcn@latest add button",
bun: "bun x shadcn@latest add button",
};
return (
<ScriptCopyBtn
showMultiplePackageOptions={true}
codeLanguage="shell"
lightTheme="nord"
darkTheme="vitesse-dark"
commandMap={customCommandMap}
/>
);
}
Installation
pnpm dlx shadcn@latest add @magicui/script-copy-btn
Usage
import { ScriptCopyBtn } from "@/components/magicui/script-copy-btn";
<ScriptCopyBtn />
Props
Prop | Type | Default | Description |
---|---|---|---|
className | string | - | The class name to be applied to the component |
showMultiplePackageOptions | boolean | true | Whether to show options for multiple package managers |
codeLanguage | string | - | The language of the code snippet (e.g., "shell") |
lightTheme | string | - | The theme to use for light mode |
darkTheme | string | - | The theme to use for dark mode |
commandMap | Record<string, string> | - | A map of package manager names to their respective commands |
Limited Time Offer
Ship Faster with Magic UI ProMagic UI Pro
Stop building from scratch.
Get 8 production-ready templates and 50+ premium components that your users will love.
✓
Next.js 15 + TypeScript ready✓
Copy, paste, customize in minutes✓
Save 100+ hours of development