Shuip
uicopy-buttonsource: stale · stale
Copy Button
npx shadcn add "https://shuip.plvo.dev/r/copy-button.json"free
This source snapshot is older than our freshness window and couldn't be re-verified just now — it may be outdated.
No selection tags yet — empty means no evidence, not lack of support.
Dependencies
Bundle weight · lighticonslucide-react
Registry dependencies
button
Files1 · source cached 10/6/2026, 6:09:33 PM
./items/components/copy-button/component.tsx
'use client';
import type { VariantProps } from 'class-variance-authority';
import { CheckIcon, Copy } from 'lucide-react';
import * as React from 'react';
import { Button, type buttonVariants } from '@/components/ui/button';
const DEFAULT_TIMEOUT = 2000;
type ButtonProps = React.ComponentProps<'button'> &
VariantProps<typeof buttonVariants> & {
asChild?: boolean;
};
export interface CopyButtonProps extends ButtonProps {
value: string;
copiedIcon?: React.ReactNode;
notCopiedIcon?: React.ReactNode;
}
export function CopyButton({ value, copiedIcon = <CheckIcon />, notCopiedIcon = <Copy />, ...props }: CopyButtonProps) {
const [hasCopied, setHasCopied] = React.useState(false);
const handleCopy = () => {
navigator.clipboard.writeText(value);
setHasCopied(true);
setTimeout(() => {
setHasCopied(false);
}, DEFAULT_TIMEOUT);
};
return (
<Button size='icon' variant={'ghost'} className={'z-10 size-4'} onClick={handleCopy} {...props}>
<span className='sr-only'>Copy</span>
{hasCopied ? copiedIcon : notCopiedIcon}
</Button>
);
}