1. Components
  2. Clipboard

Third-Party Plugins

Tailwind CSS Clipboard

Clipboard components are tools designed to facilitate the copying and pasting of data within an application. They ensure seamless data transfer and storage, enhancing user efficiency and interaction.

Requires Additional Installation

Note that this component requires the use of the third-party Clipboard plugin.

Learn more

How to use

  1. Install Clipboard

    Install clipboard via npm 

    npm i clipboard

  2. Add the Clipboard JavaScript

    Include the JavaScript <script> near the end of your </body> tag: 

    <script src="./node_modules/clipboard/dist/clipboard.min.js"></script>

  3. Add the Preline Helper JavaScript

    Include the JavaScript <script> after the helper-clipboard.js file. 

    <script src="./node_modules/preline/dist/helper-clipboard.js"></script>

Basic usage

Basic usage of Clipboard with text.

npm install preline

Copy from Input

Copy input text to clipboard.

Tooltip examples

Tooltip example that shows the success message only.

Tooltip example how to change the text.

Modal example of Clipboard.