Chewypixel component
Copy Button
An icon button that copies text. The copy icon pops into a check, then back.
Installation
npx shadcn@latest add @chewypixel/copy-buttonUsage
import { CopyButton } from "@/components/ui/copy-button";
export function PromoCode() {
return (
<div className="flex items-center gap-2">
<code>SWEET20</code>
<CopyButton value="SWEET20" label="Copy code" />
</div>
);
}Props
valueThe text to copy.
string
labelThe button's accessible name. It reads "Copied" for a moment after a copy.
string
Released under the MIT License.
More components
- ShimmerText with a band of light sweeping across it, for loading and thinking states.
- Status GraphicIllustrations for error pages: a wandering search icon for 404, a pulsing lock for 403 and a spinning ring for 500.
- Segmented ControlMutually exclusive options with a highlight that slides to the selected one.
- TabsUnderline tabs. The underline slides to the active tab and resizes to fit its label.
See them in a real app
These components come from Mochi, our admin dashboard template built with Next.js, shadcn/ui and Motion.