React Clipboard - Flowbite

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.

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

Import the component from flowbite-react to use the clipboard element:

import { Clipboard } from "flowbite-react";

## Default copy to clipboard

Use this example to copy the content of an input text field by clicking on a button and update the button text.

<Example name="clipboard.root" />

## 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.

<Example name="clipboard.withIcon" />

## 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.

<Example name="clipboard.withIconText" />

## Theme

To learn more about how to customize the appearance of components, please see the [Theme docs](/docs/customize/theme).

<Theme name="clipboard" />

## References

- [Flowbite Datepicker](https://flowbite.com/docs/components/clipboard/)