Introducing shieldcn — README badges, shadcn style.

Check it out

Crypto + Tip Jar

Donation and tipping component with QR code, wallet address display, and copy-to-clipboard.

uqrlucide-react
Loading...

Installation

$ shadcn add @jalco/tip-jar

Usage

import { TipJarCard } from "@/components/tip-jar"
<TipJarCard />

Examples

Wallet list

Use TipJarList for a stacked set of wallet rows with copy buttons.

Multiple wallets

Ethereum0x585c3A…2BacF508
Bitcoin3Js3LsTi…GndefEw9
PayPal@jalco

Crypto chains

Ethereum

Support

Ethereum
0x585c3Ad932471B24c733A557ad8FA64A2BacF508

Solana

Support

Solana
HiGZkNDuhMrGi2YAmJFNrqaq9C1dPP1Eoqs8nRq4k2Kc

Bitcoin

Support

Bitcoin
3Js3LsTiEt15nYzsEGpgnbNKDcGndefEw9

API Reference

Shared props

PropType

TipJarTabs

PropType

TipJarList

PropType

TipJarCard

PropType

TipJarQR

PropType

Notes

  • Client component. Uses the Clipboard API and interactive state (tab switching, preset selection).
  • QR generation. Powered by uqr — a zero-dependency, tree-shakable SVG QR code library.
  • Crypto vs. platform behavior. For crypto providers, the QR encodes a payment URI and the copy button copies the wallet address. For platforms, the QR encodes the donation URL and the copy button copies the URL.
  • Extensible providers. Add new chains or platforms by extending the providers map in lib/chains.ts .
  • Live addresses. The addresses and handles in the demos above are real — they belong to the maintainer. No one should ever feel any obligation to send anything. They're here so the QR codes and explorer links work end-to-end.
  • Icon library. Uses Lucide icons by default. Since this is copy-paste code, you can swap the imports if your project uses a different icon library.