How the Copy-Paste Registry Works

Every component page in this library has a copy button that drops the component's source onto your clipboard and then counts that copy. This post explains the chain: UI button → server action → database counter, and how the code you copy is generated.

The copy button

The shared copy-button (see components/ui/copy-button.tsx) copies an arbitrary text into the clipboard:

const handleCopy = useCallback(async () => {
  await navigator.clipboard.writeText(text);
  if (componentSlug) incrementCopyCount(componentSlug);
}, [text, componentSlug, incrementCopyCount]);

Note that componentSlug is optional — not every copy is tied to a tracked component, but when it is, the count is recorded.

Recording a copy without jank

The read from the clipboard is imperative; the counting happens through useIncrementCopyCount (a React Query mutation) that calls a server action (incrementCopyCountAction). Because it's fire-and-forget, the UI never waits for the count to persist — the toast and the copy happen instantly.

Where the source you copy comes from

Component pages render their source from .mdx code blocks extracted by the Fumadocs pipeline. The preview code blocks (PreviewCodeBlock) use a custom action button that copies the highlighted code — the exact bytes of the block — while remaining visually inside the code panel.

The full loop

click Copy
  → navigator.clipboard.writeText(source)
  → incrementCopyCountAction(slug)        [server action]
    → increment copy_count in the database
  → toast: "Copied to clipboard"

Key takeaways

• Keep writes to databases out of the render path — a server action + mutation is all you need.
• Track analytics on a per-slug basis so the dashboard can rank popular components.
• Generate clipboard text from the same source shown on screen; never hardcode a second copy.