# Clipboard API

Learn how to integrate the native browser clipboard API.

## How It Works

Refer to the [Clipboard API](https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API) documentation for details.

## Programmatic

```tsx
export default function Default() {
	async function handleCopy() {
		const data = 'Hello World!';
		await navigator.clipboard.writeText(data);
		alert(`Copied "${data}" to clipboard!`);
	}

	return (
		<button className="btn preset-filled" onClick={handleCopy}>
			Copy to Clipboard
		</button>
	);
}

```

## Using Inputs

```tsx
import { useState } from 'react';

export default function Input() {
	const [value, setValue] = useState('Hello Skeleton');

	async function handleCopy() {
		await navigator.clipboard.writeText(value);
		alert(`Copied "${value}" to clipboard!`);
	}

	return (
		<div className="flex items-center gap-4">
			<input type="text" className="input" value={value} onChange={(e) => setValue(e.target.value)} />
			<button className="btn preset-filled" onClick={handleCopy}>
				Copy
			</button>
		</div>
	);
}

```