One Clipboard

Buttons 3

About

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds One Clipboard to your project and fits it to your theme.

Code

How One Clipboard is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'use client'

import { useState } from 'react'
import { CheckIcon, CopyIcon } from 'lucide-react'

import { Button } from '@/components/ui/button'
import { ButtonGroup, ButtonGroupText } from '@/components/ui/button-group'

export function Button23() {
  const [copied, setCopied] = useState(false)
  const value = 'ui.flexnative.com'

  function handleCopy() {
    navigator.clipboard.writeText(value)
    setCopied(true)
    setTimeout(() => setCopied(false), 1500)
  }

  return (
    <ButtonGroup>
      <ButtonGroupText className="font-mono">{value}</ButtonGroupText>
      <Button
        variant="outline"
        size="icon"
        onClick={handleCopy}
        aria-label="Copy token"
      >
        {copied ? <CheckIcon size={12} strokeWidth={2}className="text-emerald-500" /> : <CopyIcon size={16} strokeWidth={2}  />}
      </Button>
    </ButtonGroup>
  )
}

export default Button23