Skip to content

Add Copyable component to the registry#3

Open
calebpanza wants to merge 1 commit into
mainfrom
cyrus/cui-2-add-copyable-component
Open

Add Copyable component to the registry#3
calebpanza wants to merge 1 commit into
mainfrom
cyrus/cui-2-add-copyable-component

Conversation

@calebpanza

Copy link
Copy Markdown
Contributor

Assignee: Caleb Panza

Summary

Adds a standalone Copyable component to the Crescent UI shadcn registry — a card-styled surface that displays a value alongside a button that copies it to the clipboard and confirms with a check.

Built as a namespaced compound component, following the existing choicebox conventions:

<Copyable value="npx shadcn@latest add @crescent-ui/copyable">
  <CopyableContent>npx shadcn@latest add @crescent-ui/copyable</CopyableContent>
  <CopyableButton />
</Copyable>
  • Copyable (root) — holds the value, runs the Clipboard write, and exposes copied/copy via context. Props: value (required), timeout (ms before the confirmation resets, default 2000), onCopy.
  • CopyableContent — the visualization slot (the displayed value can differ from what's copied — e.g. a masked key).
  • CopyableButton — the copy button; swaps a copy → check glyph (via IconPlaceholder, so it's icon-library agnostic) and exposes data-copied for styling.

What's included

  • Component sourceregistry/bases/base/ui/copyable.tsx + registry/bases/radix/ui/copyable.tsx. Copyable has no Base UI / Radix primitive dependency (just structural markup + the Clipboard API), so the two variants are byte-identical and kept only so each project base can install it from its namespace.
  • Style tokenscn-copyable, cn-copyable-content, cn-copyable-button added to all 8 styles (vega, nova, maia, lyra, mira, luma, sera, rhea), each matching that style's radius/temperament (e.g. Sera's button inverts to a solid foreground block on copy).
  • Registry wiring — entries in registry.json and scripts/build-registry.ts; built artifacts in registry-dist/{base,radix}-*/copyable.json.
  • Showcaseapp/showcase/components/copyable-demo.tsx (preview + "secret value" and "custom content" examples), wired into demos.tsx.

Testing

  • bun run registry:build → 32 items, no unresolved cn-* tokens
  • bun run typecheck ✓ · bun run lint ✓ · bun run build
  • Verified live in the showcase (Playwright): the page renders and clicking the copy button sets data-copied and shows the check confirmation.

Note on the reference

The issue pointed to a reference in the local (uncommitted) post-for-me-dashboard directory, noting it "still needs to be reviewed." That directory is outside this session's permitted paths, so I couldn't read it — this implementation was built fresh against the registry's established choicebox conventions. Happy to reconcile against the reference if there are specific behaviors it should match.

Closes CUI-2


Tip: I will respond to comments that @ mention @cyrus-daymoon on this PR. You can also submit a review with all your feedback at once, and I will automatically wake up to address each comment.

A card-styled surface that displays a value next to a button that copies
it to the clipboard and confirms with a check. Ships base + radix variants
(no primitive dependency, so they're byte-identical), cn-copyable-* style
tokens across all 8 styles, a showcase demo, and built registry-dist items.

CUI-2
@vercel

vercel Bot commented Jun 28, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
crescent-ui Ready Ready Preview, Comment Jun 28, 2026 2:27am

Request Review

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant