feat: add package name copy button with package manager dropdown icon on search view

[akadotsh]

🔗 Linked issue

Closes #2341

🧭 Context

Adds a copy-to-clipboard feature for package names in the search results view.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Apr 11, 2026 0:20am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Apr 11, 2026 0:20am
npmx-lunaria	Ignored		Apr 11, 2026 0:20am

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 4f691c04-f50a-48eb-ba74-7a97d14216be

📥 Commits

Reviewing files that changed from the base of the PR and between 0164064 and 930099d.

📒 Files selected for processing (1)

• app/components/Package/Card.vue

---

📝 Walkthrough

Walkthrough

The Package/Card.vue component has been updated to add a copy-to-clipboard button for package names. A new computed property packageName is derived from the package data, wired to the useClipboard hook with a 2000ms feedback delay. The package-name heading now includes a CopyToClipboardButton component alongside a NuxtLink, triggered via a click handler. Layout and styling adjustments were made to accommodate the new button within the grouped wrapper element.

Possibly related PRs

• fix: correct package name copy tooltip hiding #838: Addresses copy-button CSS and visibility improvements in the same package-name component

Suggested reviewers

• danielroe
• Adebesin-Cell
• knowler

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The PR description clearly relates to the changeset, describing the addition of a copy-to-clipboard feature for package names in search results.
Linked Issues check	✅ Passed	The changes implement the core requirement from issue #2341: adding a copy button for package names on search result tiles to reduce user interaction steps.
Out of Scope Changes check	✅ Passed	All changes are scoped to the Package Card component and directly support the linked issue requirement for copy functionality on search results.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[ghostdevv]

thanks for the PR! I think the copy button should be always visible to the right of the package name, perhaps just the icon - there was an issue or comment about this for the ones we have already but I can't find it (other than #776) - what do you think?

[alexdln]

The logic that the entire card should be clickable seems not to work now. I think this is a more important feature on the search page than copying a name.
The copy button on the side will probably fix this (but it will create an extra interaction)

Could you please share, what user case would this might solve? I feel like user know the name they're looking for in the search already and then open the needed package and interact there