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-jarUsage
import { TipJarCard } from "@/components/tip-jar"<TipJarCard />Examples
Wallet list
Use TipJarList for a stacked set of wallet rows with copy buttons.
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.