Open-source "copy to clipboard" component examples built with Tailwind CSS

The copy to clipboard component allows you to copy text, lines of code, contact details or any other data to the clipboard with a single click on a trigger element such as a button. This component can be used to copy text from an input field, textarea, code block or even address fields in a form element.

Tailwind CSS Copy to Clibpoard

Use cases for websites can be found in the examples below and they include copying code installation commands, API keys, URLs, addresses, contact details, sharing course URLs inside a modal and more.

These components are built with Tailwind CSS and Flowbite and can be found on the internet on websites such as Bitly, Cloudflare, Amazon AWS and almost all open-source projects and documentations.

Default copy to clipboard

Make sure that you add the data-copy-to-clipboard-target="elementID" data attribute to the trigger element (ie. the button) to initialize the JS behavior where the elementID is the ID of the element where the source text can be found (such as input field).

Use this example to copy the content of an input text field by clicking on a button and update the button text by applying the JavaScript code from the tab below based on the updateOnCopyCallback() function callback from the Flowbite JS API.

Tailwind CSS Copy to Clipboard

Input with copy button

This example can be used to copy the content of an input field by clicking on a button with an icon positioned inside the form element and also show a tooltip with a message when the text has been copied.

If you also want to update the text inside the tooltip and the icon, then you need to apply the JavaScript code based on the updateOnCopyCallback() function callback from the Flowbite JS API.

Tailwind CSS Copy to Clipboard with button

Copy button with text

Use this example to show a copy button inside the input field with a text label and icon that updates to a success state when the text has been copied. Make sure that you also apply the custom JavaScript code below to enable the success and default message states.

Tailwind CSS Copy to Clipboard with button text

Input group with copy

This example can be used to show a copy to clipboard button inside an input group which has a label positioned inside the input field. The icon inside the button will switch to a success state if you also apply the custom JavaScript code below.

Tailwind CSS Input Group with copy button

URL shortener input group

Use this example to copy a shortened URL to the clipboard by clicking on a button with an icon positioned inside the input field and also show a tooltip with a message when the text has been copied.

Tailwind CSS URL shortener

Copy source code block

This example can be used to copy and paste code inside a <pre> and <code> block by clicking on a button with an icon position inside the block and also show a tooltip with a message when the text has been copied.

You need to add an extra data-copy-to-clipboard-content-type="innerHTML" data attribute to the trigger element (ie. the button) to specify that the content that is to be copied is from the innerHTML of the target element (ie. the code block).

You also need to add the data-copy-to-clipboard-html-entities="true" option to the trigger element so that the copied text will be decoded from HTML entities to plain text that will work inside your code editor.

Tailwind CSS Copy Code Block

Card with API keys

Use this example to show multiple input field elements that have the copy to clipboard button inside a card component for more complex applications where you need to copy API keys, account IDs and more.

Make sure that you also apply the custom JavaScript code with the function callback to enable the success and default message states for each input field and copy button.

Tailwind CSS Copy to Clipboard API Keys

Copy contact details

This example can be used to copy the text content (ie. contact details) inside of the <address> field by clicking on the copy to clipboard button positioned inside of the address card.

Make sure that you set the data-copy-to-clipboard-content-type="textContent" data attribute to the trigger element (ie. the button) to specify the source of the content that is to be copied.

Tailwind CSS Copy contact details

Copy button with modal

Use this example to show an input field where you can copy the URL of the current page and also show a modal with the copied URL when the copy button is clicked.

Tailwind CSS Copy button with modal

JavaScript behaviour

Use the CopyClipboard object from the Flowbite JS API to create a component with a trigger element (ie. an input field, code blocks, address tag) and target element (ie. button or text) where the content of the target element is copied to the clipboard when the trigger element is clicked.

Credits

These components were built by the open-source community from Flowbite and couldn't exist with the awesome Tailwind CSS framework and Flowbite Icons.