Crypto + Tip Jar

Preview

Installation

$ shadcn add https://ui.justinlevine.me/r/tip-jar.json

Usage

import { TipJarCard, TipJarTabs, TipJarList, TipJarCompact, TipJarInline, TipJarQR } from "@/components/tip-jar"

<TipJarCard provider="ethereum" address="0x1a2B..." title="Support" />

Six layout variants are exported from the same file. Use TipJarTabs for multi-wallet donation cards with QR, TipJarList for stacked wallet rows, TipJarCard for single-provider cards, TipJarCompact for sidebars, TipJarInline for inline rows, and TipJarQR for standalone QR codes.

Examples

When to use

• TipJarTabs — accept donations across multiple chains or platforms in a single card with QR codes. Best for landing pages and sponsorship sections.
• TipJarList — stacked list of wallet rows. No QR codes — just icon, address, copy, and explorer link per row. Good for footers and profile pages.
• TipJarCard — full single-provider donation widget with QR, address, copy, and optional amount presets.
• TipJarCompact — sidebar widget or footer placement where space is limited.
• TipJarInline — inline address row with copy button. Good for dashboards and settings.
• TipJarQR — standalone QR code for print materials, slides, or payment screens.

API Reference

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.