Skip to content

shadcn.io is an independent project built on shadcn/ui

Pro

Pledge Preview Crowdfunding Product Card Block for React Aria

A crowdfunding campaign for a pocket loom with $41,200 raised of $50,000, 412 backers and 12 days left, where choosing a reward shows a hatched segment on the bar and what the total would be.

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Show what a pledge would do with this crowdfunding product card for React with React Aria. The first band draws the loom beside the amount raised, the backers and the days left, counted from a fixed day to a typed end date, over a funding bar. The second is a choice of four rewards in one group of native radio buttons; one is sold out and cannot be chosen. Choosing a reward draws a hatched segment on the bar and writes the result, "With your $59: $41,259, 82%". The one Shine Button, "Back this project", turns the preview into the real figure here and says "Pledge noted here, nothing is charged"; "Undo" takes it back. For campaigns, fundraisers and any goal with a deadline.

FAQ

How do I change the rewards?

Edit REWARDS: a price in cents, a note and the places left (left and of; use -1 and 0 for no limit). A reward with none left is disabled and reads "Sold out".

Why does the percent barely move?

The percent is rounded down to a whole number from the cents, and one pledge is small against $50,000, so the hatched segment is only a few pixels wide. It is drawn at least 3 pixels wide so it can be seen.

Is there a countdown?

No. The end (ENDS) is a typed date and the days left are counted from a fixed "today" (AS_OF), so the page reads the same on every load.

What stays local, and how do I wire it for real?

The pledge is page state; nothing is pledged, charged or stored. Replace the body of back with a call to your payment provider's hosted checkout, and read the raised amount and backers from your server. The picture is typed shapes: swap Picture for an img.

How does it look on a phone?

The loom stacks above the figures and bar, the rewards go one or two across, and the button sits under the status line.

Is it accessible?

The bar is hidden from screen readers because its figures are written beside it. Rewards are real radio buttons in a fieldset with a legend, and the result is announced by the polite status line.

All 100 product cards blocks