CopyToClipboard

copytoclipboard-1779393693199.tsx

'use client'
import { useState } from 'react'

export default function CopyToClipboard({ text = 'npm install empire-ui', label = 'Install command' }) {
  const [copied, setCopied] = useState(false)
  const copy = async () => {
    await navigator.clipboard.writeText(text)
    setCopied(true)
    setTimeout(() => setCopied(false), 2000)
  }
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
      {label && <span style={{ fontSize: '12px', fontWeight: 600, color: '#64748b', textTransform: 'uppercase', letterSpacing: '0.05em' }}>{label}</span>}
      <div style={{
        display: 'flex', alignItems: 'center', gap: '10px',
        background: '#1e1e2e', borderRadius: '10px', padding: '12px 14px',
      }}>
        <code style={{ flex: 1, color: '#a78bfa', fontSize: '14px', fontFamily: 'monospace' }}>{text}</code>
        <button
          onClick={copy}
          style={{
            background: copied ? '#10b981' : '#2d2d3d',
            border: 'none', borderRadius: '7px', padding: '6px 12px',
            color: copied ? '#fff' : '#94a3b8', cursor: 'pointer',
            fontSize: '13px', fontWeight: 600, transition: 'all 0.2s',
            display: 'flex', alignItems: 'center', gap: '4px',
          }}
        >{copied ? '✓ Copied!' : '📋 Copy'}</button>
      </div>
    </div>
  )
}

Component info

CategoryUtility

Frameworkreact

TierFREE

Copies0

About

Copy-to-clipboard button with success feedback animation

More from Utility

'use client'
import { useState, useCallback } from 'react'

interface UploadedFile {
  id: number
  name: string
  size: number
  type: string
  progress: number
  done: boolean
  error?: string
}

const ALLOWED = ['image/png', 'image/jpeg', 'image/w

FileUploadZone

Utility

'use client'
import { useState } from 'react'

interface ClipItem {
  id: number
  content: string
  type: 'text' | 'code' | 'url' | 'email'
  pinned: boolean
  time: number
}

const INITIAL: ClipItem[] = [
  { id: 1, content: 'npx empire-ui-mcp --st

ClipboardManager

Utility

'use client';
import { useState } from 'react';

export default function NeonToggle({ label = "Enable AI Mode", defaultOn = false, color = "#6366f1" }) {
  const [on, setOn] = useState(defaultOn);
  const [pressing, setPressing] = useState(false);

NeonToggle

Utility

'use client'
import { useState } from 'react'

const PRESETS = [
  { name: 'Gold', primary: '#C9A84C', bg: '#0A0A0A', accent: '#6366f1' },
  { name: 'Neon', primary: '#22d3ee', bg: '#030712', accent: '#a78bfa' },
  { name: 'Crimson', primary: '#ef444

ThemeCustomizer

Utility