DesignLayer
Clipboard Copy Button
Back to components
What is this?
A white pill copy button. Click it and the copy icon turns into a check while “Copied” slides in, then both slide back. Swap the value and the two labels, then drop it next to an install command, API key, or invite link.
Component
Clipboard Copy Button
A white pill copy button. Click it and the copy icon turns into a check while “Copied” slides in, then both slide back. Swap the value and the two labels, then drop it next to an install command, API key, or invite link.
Checking access…
Live PreviewVerified Technical Spec
- Animation
- CSS / Tailwind
- Reduced motion
- Verified
- Keyboard focus
- Verified
- Compatibility
- Tailwind CSS v3.4 + v4 · React 19 / Next.js 15 App Router + Vite / Remix compatible
Included
- Copy source into Cursor or Claude for agent install
- Finished React · TypeScript · Tailwind CSS · Lucide UI
Dependencies
- React 19.0.0
- Typescript 5.7.2
- Tailwindcss 3.4.16
- Lucide-react 1.23.0
Tech Stack
- React
- TypeScript
- Tailwind CSS
- Lucide
Version 1.0.0