Clipboard

Pass the text to copy as value. timeout controls how long the copied state remains visible.

import { Clipboard } from '@manti-ui/react';

export default function ClipboardBasic() {
  return (
    <div className="w-full max-w-[calc(var(--manti-space-16)*6)]">
      <Clipboard
        value="npm install @manti-ui/react"
        label="Install command"
        variant="primary"
      />
    </div>
  );
}

API

Prop	Type	Default	Description
`useClipboard`	`(options: UseClipboardOptions) => UseClipboardReturn`	—	Headless copied state and copy action for product-owned buttons and Web Share fallbacks.
`value`	`string`	—	The value to copy to the clipboard.
`label`	`ReactNode`	—	Optional label rendered above the field.
`variant`	`MantiVariant`	`'primary'`	Variant of the copied indicator.
`timeout`	`number`	—	How long the copied state lasts, in milliseconds.

Styling

Anatomy

Part	Selector	Description
`root`	`[data-scope="clipboard"][data-part="root"]`	The wrapper around the label and control.
`label`	`[data-scope="clipboard"][data-part="label"]`	The label element above the field.
`control`	`[data-scope="clipboard"][data-part="control"]`	The row holding the input and copy button.
`input`	`[data-scope="clipboard"][data-part="input"]`	The read-only input showing the value.
`trigger`	`[data-scope="clipboard"][data-part="trigger"]`	The button that copies the value.
`indicator`	`[data-scope="clipboard"][data-part="indicator"]`	The icon that swaps between copy and copied states.

Tokens

Token	Controls
`--manti-clipboard-height`	height
`--manti-clipboard-radius`	radius
`--manti-clipboard-padding-x`	padding x
`--manti-clipboard-gap`	gap
`--manti-clipboard-font-size`	font size
`--manti-clipboard-trigger-width`	trigger width

Last updated 13 September 2026