21:I[86246,["/_next/static/immutable/chunks/0d_8wluyb7yqf.js","/_next/static/immutable/chunks/0uus9i6ejobyz.js","/_next/static/immutable/chunks/0tt2-bj3jw7jr.js","/_next/static/immutable/chunks/1dqzeaebgiuvj.js","/_next/static/immutable/chunks/14wre5dv93f0y.js","/_next/static/immutable/chunks/0zb-1gpbfyms4.js","/_next/static/immutable/chunks/0az412xv9ai6p.js","/_next/static/immutable/chunks/23yyrt300p04g.js","/_next/static/immutable/chunks/3v_498fiz3l7b.js","/_next/static/immutable/chunks/3i1s8vqyeuj2w.js","/_next/static/immutable/chunks/3ktog5jio90cb.js","/_next/static/immutable/chunks/32k-qemktxb19.js","/_next/static/immutable/chunks/1j7rsdskq9ipd.js","/_next/static/immutable/chunks/042j62uy-8kb0.js","/_next/static/immutable/chunks/02l7zud30fcc0.js","/_next/static/immutable/chunks/2z84m56r_m48j.js","/_next/static/immutable/chunks/2x7ct96yw74o0.js","/_next/static/immutable/chunks/2cocn496aic-7.js","/_next/static/immutable/chunks/3lj70bb1ux_0t.js","/_next/static/immutable/chunks/1pktb_4yhc9ox.js","/_next/static/immutable/chunks/0-596jyjhk3f0.js","/_next/static/immutable/chunks/3isz5k5ikooot.js","/_next/static/immutable/chunks/1k9tyxskcld_z.js","/_next/static/immutable/chunks/2de_jtklha4bp.js"],"NavBreadcrumb",1] 22:I[77342,["/_next/static/immutable/chunks/0d_8wluyb7yqf.js","/_next/static/immutable/chunks/0uus9i6ejobyz.js","/_next/static/immutable/chunks/0tt2-bj3jw7jr.js","/_next/static/immutable/chunks/1dqzeaebgiuvj.js","/_next/static/immutable/chunks/14wre5dv93f0y.js","/_next/static/immutable/chunks/0zb-1gpbfyms4.js","/_next/static/immutable/chunks/0az412xv9ai6p.js","/_next/static/immutable/chunks/23yyrt300p04g.js","/_next/static/immutable/chunks/3v_498fiz3l7b.js","/_next/static/immutable/chunks/3i1s8vqyeuj2w.js","/_next/static/immutable/chunks/3ktog5jio90cb.js","/_next/static/immutable/chunks/32k-qemktxb19.js","/_next/static/immutable/chunks/1j7rsdskq9ipd.js","/_next/static/immutable/chunks/042j62uy-8kb0.js","/_next/static/immutable/chunks/02l7zud30fcc0.js","/_next/static/immutable/chunks/2z84m56r_m48j.js","/_next/static/immutable/chunks/2x7ct96yw74o0.js","/_next/static/immutable/chunks/2cocn496aic-7.js","/_next/static/immutable/chunks/3lj70bb1ux_0t.js","/_next/static/immutable/chunks/1pktb_4yhc9ox.js","/_next/static/immutable/chunks/0-596jyjhk3f0.js","/_next/static/immutable/chunks/3isz5k5ikooot.js","/_next/static/immutable/chunks/1k9tyxskcld_z.js","/_next/static/immutable/chunks/2de_jtklha4bp.js"],"PreviewCodeSwitch",1] 23:I[61360,["/_next/static/immutable/chunks/0d_8wluyb7yqf.js","/_next/static/immutable/chunks/0uus9i6ejobyz.js","/_next/static/immutable/chunks/0tt2-bj3jw7jr.js","/_next/static/immutable/chunks/1dqzeaebgiuvj.js","/_next/static/immutable/chunks/14wre5dv93f0y.js","/_next/static/immutable/chunks/0zb-1gpbfyms4.js","/_next/static/immutable/chunks/0az412xv9ai6p.js","/_next/static/immutable/chunks/23yyrt300p04g.js","/_next/static/immutable/chunks/3v_498fiz3l7b.js","/_next/static/immutable/chunks/3i1s8vqyeuj2w.js","/_next/static/immutable/chunks/3ktog5jio90cb.js","/_next/static/immutable/chunks/32k-qemktxb19.js","/_next/static/immutable/chunks/1j7rsdskq9ipd.js","/_next/static/immutable/chunks/042j62uy-8kb0.js","/_next/static/immutable/chunks/02l7zud30fcc0.js","/_next/static/immutable/chunks/2z84m56r_m48j.js","/_next/static/immutable/chunks/2x7ct96yw74o0.js","/_next/static/immutable/chunks/2cocn496aic-7.js","/_next/static/immutable/chunks/3lj70bb1ux_0t.js","/_next/static/immutable/chunks/1pktb_4yhc9ox.js","/_next/static/immutable/chunks/0-596jyjhk3f0.js","/_next/static/immutable/chunks/3isz5k5ikooot.js","/_next/static/immutable/chunks/1k9tyxskcld_z.js","/_next/static/immutable/chunks/2de_jtklha4bp.js"],"InstallationSwitch",1] 24:Tdd1,"use client" import React from 'react' import { Terminal } from "lucide-react" import { toast } from 'sonner' import ShikiHighlighter from 'react-shiki'; import { useTheme } from 'next-themes' import { cn } from "@/lib/utils" import { GsapToggle } from "@/components/reframeui/buttons/gsap-toggle" import { FlipCopyButton } from "@/components/ui/flip-button" // Define managers for both modes const MANAGERS = { standard: [ { label: "pnpm", value: "pnpm" }, { label: "yarn", value: "yarn" }, { label: "bun", value: "bun" }, { label: "npm", value: "npm" }, ], execute: [ { label: "pnpm", value: "pnpm dlx" }, { label: "yarn", value: "yarn" }, { label: "bun", value: "bunx --bun" }, { label: "npx", value: "npx" }, ] } export const InstallCommandBox = ({ className, command, items, mode = "standard" }: { className?: string, command: string, items: string[], mode?: "standard" | "execute" }) => { const managers = MANAGERS[mode] || MANAGERS.standard const [selectedManager, setSelectedManager] = React.useState(managers[0]) const [commandCopied, setCommandCopied] = React.useState(false) React.useEffect(() => { setSelectedManager(managers[0]) }, [mode]) const installCommand = `${selectedManager.value} ${command} ${items.join(" ")}` async function copyInstallCommand() { try { await navigator.clipboard.writeText(installCommand) setCommandCopied(true) toast.success('Copied to clipboard') setTimeout(() => setCommandCopied(false), 2000) } catch { toast.error('Failed to copy') } } const { resolvedTheme } = useTheme() const isDark = resolvedTheme === 'dark' const toggleOptions = managers.map((m) => ({ value: m.value, label: m.label })) return (

{ const found = managers.find((m) => m.value === v) if (found) setSelectedManager(found) }} size="sm" equalWidth={false} containerClassName="bg-white dark:bg-neutral-800 border-border" pillClassName="bg-foreground" activeItemClassName="text-background" inactiveItemClassName="text-muted-foreground" itemClassName="!px-3 !text-[12px]" />

div]:!bg-transparent [&_pre]:!bg-transparent [&_code]:!bg-transparent")}> {installCommand}

) } 18:["$","div",null,{"className":"w-full min-w-0","children":["$","div",null,{"className":"w-full px-4 lg:px-6 py-8 pb-[320px] flex flex-col gap-8 min-w-0","children":[["$","$L21",null,{}],["$","div",null,{"className":"flex flex-col gap-3","children":[["$","div",null,{"className":"flex flex-wrap items-center gap-2","children":[["$","h1",null,{"className":"font-manrope font-bold tracking-[-0.04em] leading-none text-foreground text-[30px] md:text-[36px]","children":"Install Command Box"}],["$","div",null,{"className":"flex items-center gap-1.5","children":[["$","span",null,{"className":"rounded-full border px-2.5 py-1 text-[10px] font-medium tracking-[0.08em] uppercase leading-none bg-muted border-border text-muted-foreground dark:bg-white/[0.08] dark:border-white/[0.06] dark:text-white/65","children":"Free"}],false]}]]}],["$","p",null,{"className":"font-manrope text-[14px] leading-relaxed text-muted-foreground max-w-2xl","children":"Preview live, install via shadcn or copy the source."}]]}],["$","$L22",null,{"id":"install-command-box","demoCode":"import { InstallCommandBox } from '@/components/reframeui/buttons/install-command-box'\nimport React from 'react'\n\nexport const InstallCommandBoxDemo = () => {\n return (\n \n )\n}\n"}],["$","section",null,{"className":"flex flex-col gap-6","children":["$","$L23",null,{"shadcnUrl":"https://ui.thommysart.me/r/install-command-box.json","componentId":"install-command-box","componentCode":"$24","previewCodeForGate":"import { InstallCommandBox } from '@/components/reframeui/buttons/install-command-box'\nimport React from 'react'\n\nexport const InstallCommandBoxDemo = () => {\n return (\n \n )\n}\n","demoCode":"import { InstallCommandBox } from '@/components/reframeui/buttons/install-command-box'\nimport React from 'react'\n\nexport const InstallCommandBoxDemo = () => {\n return (\n \n )\n}\n","isPro":false,"hasAccess":true,"token":null,"authRedirect":"/auth?redirect=/docs/buttons/install-command-box","tier":"FREE"}]}],"$L25","$L26","$L27","$L28","$L29"]}]}]

Name	Type	Default	Required	Description
className	string	—	No	Optional class name for the rendered element.
command	string	—	Yes	The command to install
items	string[]	—	Yes	The items to install
mode	'standard' \| 'execute'	standard	No	The mode to use for the command (npm or npx)

Install Command Box

Installation

Install via shadcn

Usage

Props