shadcn.io is not affiliated with official shadcn/ui
Donation Tracker Chat Block for React
A food bank's pledge thread with a campaign band: total, donor count and a bar with milestone ticks all derived from the gift cards, and an Add a pledge form that posts your card and marks each milestone it crosses.
Installation
Overview
Watch a campaign grow in the conversation that fuels it, with this donation tracker chat for React with Base UI. A framed window of fixed height holds the pledge thread of Fundleigh, a food bank's fundraiser: a band above the log gives the campaign title, "$3,480 of $5,000" and the donor count, both derived from the donor cards in the thread, and a Progress bar with ticks at 25, 50, 75 and 100 per cent. Donors give in cards with a name, an amount and a note. "Add a pledge" opens a small form of Input fields above the composer; it posts your card, updates the total, the count and the bar, and the first time a pledge carries the total over a milestone, one system line says so, without confetti. A volunteer thanks you in a typed reply. It's the starting point for a fundraiser, a crowdfund or any thread with a running total.
FAQ
What stays in the page, and how do I make it real?
Everything, and nothing is charged: the donors are typed, a typed sum stands for the drive before this thread, and a pledge only adds a card. There is no card field on purpose. To wire it for real, take payment with your provider's hosted fields where pledge runs, and add the confirmed gift to the same list; the band recomputes.
What is derived, and what is typed?
The total, the donor count, the percentage, the amount to the next mark and the milestone lines are all computed from the gift cards plus one typed starting sum. Amounts are integer cents. Nothing is typed twice, so the band can't disagree with the cards.
When does a milestone line appear?
Once, when a pledge carries the total from under a mark to at or over it. A large pledge that crosses two marks posts both lines in order. Pledging again past a mark that is already behind posts nothing.
How does the composer work?
Enter sends and Shift and Enter add a line, which the field's description says for a screen reader; Enter during text composition (an IME) is left alone. Send stays quiet while the field is empty and says so if pressed, and focus stays in the field after sending.
Is it usable with a keyboard and a screen reader?
The log is a focusable region announced as a log. The bar is decorative and its ticks hidden, because the same figures are in text in the band; the form has visible labels, a wrong amount is explained in the polite status line, and focus returns to "Add a pledge" afterwards.