shadcn.io is not affiliated with official shadcn/ui
Gift Picker Nonprofit Leader Profile Block for Ark UI
A nonprofit leader profile with a gift picker inside the campaign panel: raised against goal, three programmes with the people they reach, an amount, a monthly switch and a card-fee box, and the sum worked out in four fixed rows.
Installation
Overview
Ask for a gift where the story is told, with this nonprofit-leader profile for React with Ark UI. A compact header holds the title and one sentence, and the hairline frame under it opens on the leader: initials, name, role, place and the campaign's name. The first band is the campaign: money raised against the goal on a Progress bar with the same figures as words, and three programmes with the people each reaches. The second band is the gift: an amount from a Toggle Group of 25, 50, 100 and Other, a field that is always there and opens for Other, a Switch for giving monthly and a Checkbox to cover the card fee. The sum is worked out in the open in a Data List of four rows that never come and go: the gift, the fee, what you give today and about how many people it reaches. The foot holds a polite status line beside the one Shine Button, which reviews the gift and says nothing was charged. The leader, the trust, the campaign and every figure are invented samples. For a giving platform, a charity page or any profile that asks for support.
FAQ
How do I fill it with my own campaign?
Edit CAMPAIGN (name, goal and raised), PROGRAMMES (a name, a line and the people reached), AMOUNTS and the limits MIN_GIFT and MAX_GIFT. FEE_PERCENT is the card fee and PER_PERSON is what it costs to reach one person for a year; the sum and the people reached are worked out from them.
How is the sum worked out?
The gift is the chosen amount. If the fee box is ticked the fee is that percentage of the gift, in whole cents, and what you give today is the two added together. People reached is the gift divided by the cost per person, rounded down, and monthly gifts say a month instead of for a year.
What does the Other field accept?
Whole dollars from the minimum to the maximum. Anything that is not a digit is dropped as you type. The field is always on the page, disabled until Other is pressed, so choosing it never shifts the layout. A gift outside the range shows a problem line and the status line asks for an amount in range.
What is charged, and how do I wire it for real?
Nothing: Review gift only says what it would do and the status line ends on nothing being charged. In your own app open your payment provider from the button with the amount, the monthly flag and the fee choice, and show its result in the same status line.
Is it accessible, and how does it look on a phone?
The amount buttons are a named group, the switch and the checkbox are named by their visible text, the progress bar is decoration with its figures as words, and the status line is a polite live region present from the start. On a phone the amounts share the row, and the status and the full-width button stay pinned to the bottom of the screen. Prices keep their reading order in a right-to-left page.