add asChild prop to UI components

[jnsdls]

TL;DR

Added asChild prop support to UI components, enabling better composition with custom elements.

What changed?

• Added asChild prop to various UI components including SiteLink, AccountAddress, AccountAvatar, AccountBalance, AccountName, ChainIcon, ChainName, NFTDescription, NFTName, TokenIcon, TokenName, TokenSymbol, WalletIcon, and WalletName
• Integrated Radix UI's Slot primitive to enable component polymorphism
• Added @radix-ui/react-slot as a new dependency

How to test?

1. Import any UI component
2. Pass the asChild prop along with a custom element

<AccountName asChild>
  <div>Custom wrapper for account name</div>
</AccountName>

3. Verify that the component renders with the custom element while maintaining its functionality

Why make this change?

This change provides more flexibility in component composition, allowing developers to customize the rendered elements while maintaining the core functionality. This is particularly useful for:

• Custom styling requirements
• Accessibility improvements
• Integration with other UI libraries
• Building more complex component hierarchies

---

PR-Codex overview

This PR focuses on allowing the asChild prop for most UI components, enabling them to render as a different component (like Slot.Root) rather than the default HTML element. This enhances flexibility in component usage.

Detailed summary

• Added asChild prop to various components.
• Updated rendering logic to use Slot.Root if asChild is true.
• Modified related components: SiteLink, AccountAddress, NFTName, NFTDescription, AccountName, WalletName, ChainName, ChainIcon, AccountBalance, AccountAvatar, TokenIcon, TokenSymbol, TokenName, WalletIcon, and SocialIcon.
• Adjusted package.json files to update @radix-ui/react-slot version to 1.1.1.

✨ Ask PR-Codex anything about this PR by commenting with /codex {your question}

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
docs-v2	❌ Failed (Inspect)			Jan 30, 2025 0:49am
thirdweb_playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 30, 2025 0:49am
thirdweb-www	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 30, 2025 0:49am
wallet-ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 30, 2025 0:49am

[jnsdls]

• add asChild prop to UI components #6110 👈 (View in Graphite)
• main

---

How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

• merge-queue - adds this PR to the back of the merge queue
• hotfix - for urgent hot fixes, skip the queue and merge this PR next

You must have a Graphite account in order to use the merge queue. Sign up using this link.

An organization admin has enabled the Graphite Merge Queue in this repository.

Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue.

This stack of pull requests is managed by Graphite. Learn more about stacking.

[github-actions]

size-limit report 📦

Path	Size	Loading time (3g)	Running time (snapdragon)	Total time
thirdweb (esm)	46.6 KB (0%)	933 ms (0%)	590 ms (+62.36% 🔺)	1.6 s
thirdweb (cjs)	122.39 KB (0%)	2.5 s (0%)	991 ms (+6.48% 🔺)	3.5 s
thirdweb (minimal + tree-shaking)	5.58 KB (0%)	112 ms (0%)	104 ms (+93.12% 🔺)	215 ms
thirdweb/chains (tree-shaking)	506 B (0%)	10 ms (0%)	26 ms (+58.07% 🔺)	36 ms
thirdweb/react (minimal + tree-shaking)	19.28 KB (0%)	386 ms (0%)	122 ms (+0.03% 🔺)	508 ms

[changeset-bot]

🦋 Changeset detected

Latest commit: 7bda6cd

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
thirdweb	Patch
@thirdweb-dev/wagmi-adapter	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR