> ## Documentation Index
> Fetch the complete documentation index at: https://hyperframes-fix-nested-composition-media-inpoint.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Pill Karaoke
> Pill-shaped container with per-word karaoke color highlight
export const InstallCommand = ({command, item}) => {
const [copied, setCopied] = React.useState(false);
const [tuned, setTuned] = React.useState("");
React.useEffect(() => {
if (!item) return;
const read = () => {
try {
const raw = new URLSearchParams(window.location.search).get(`vars-${item}`);
if (!raw) return setTuned("");
const parsed = JSON.parse(raw);
if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return setTuned("");
if (Object.keys(parsed).length === 0) return setTuned("");
setTuned(` --vars '${JSON.stringify(parsed)}'`);
} catch {
setTuned("");
}
};
read();
window.addEventListener("hf-vars-changed", read);
window.addEventListener("popstate", read);
return () => {
window.removeEventListener("hf-vars-changed", read);
window.removeEventListener("popstate", read);
};
}, [item]);
const fullCommand = `${command}${tuned}`;
const copy = async () => {
try {
if (navigator.clipboard && window.isSecureContext) {
await navigator.clipboard.writeText(fullCommand);
} else {
const previous = document.activeElement;
const scratch = document.createElement("textarea");
scratch.value = fullCommand;
scratch.setAttribute("readonly", "");
scratch.style.position = "fixed";
scratch.style.opacity = "0";
document.body.appendChild(scratch);
scratch.select();
document.execCommand("copy");
document.body.removeChild(scratch);
previous?.focus?.();
}
setCopied(true);
setTimeout(() => setCopied(false), 2000);
} catch {}
};
return
{fullCommand}
{copied ? "Copied" : ""}
;
};