shadcn.io is not affiliated with official shadcn/ui
Startup Credits Pricing Block for Ark UI
Startup credits with the amount as the hero: $25,000 at display size, three facts, three eligibility statements the visitor ticks and an apply button that turns on only when all are true.
Installation
Overview
Offer credits to early-stage startups with this program section, where the amount comes first. A compact header sits over three ruled bands on the page's rails, drawn by Guides. The first holds "$25,000" in display-size type with "in platform credits" under it, and three facts beside it: twelve months to use them, about $2,083 a month, and every service. The second is a row of three eligibility statements as Checkboxes in shared-hairline cells (founded under 3 years ago, raised under $5M, never claimed before); the whole cell is the label, so a click anywhere ticks it. The third holds a three-part meter and a status line that count what's confirmed, and the apply button: a dimmed Shine Button until all three are ticked, then a live link, the block's one primary control. Built with Checkbox, Field, Shine Button, Guides and Tailwind CSS, with CSS transitions only. For startup programs, founder credits and any offer gated by a short list of conditions.
FAQ
How do I change the amount and the conditions?
Edit the constants at the top of the file. CREDITS and MONTHS give the figure and the term, and the monthly average in the facts is worked out from them. FACTS lists the three facts beside the figure. CRITERIA lists the statements, each with an id, a title and a detail; the grid fits three on one row from lg, and the meter, the status line and the button follow however many you list.
Does ticking the boxes prove anything?
No. The boxes are a self-declaration that gates the button, which keeps people who clearly don't qualify from applying. Check every claim on your server before you grant credits, against the company's filings or your funding data, and say so on the page, as the line under the band does. The page's state is never proof.
How do I connect the apply button?
When all three are ticked the button is a real link. It's a ShineButton with asChild around an a element. Point it at your application form. Until then it's a disabled button with the same look at half strength, so it appears to turn on in place.
Is the checklist accessible?
Yes. The three statements are a group named "Confirm each one to apply", and each checkbox is named by its statement and described by its detail line. A polite status line says "1 of 3 confirmed" and then "All three confirmed. You can apply." The credit figure is read once, as "$25,000 in platform credits over 12 months", and its display-size copy is hidden from assistive technology. Focus rings show on each checkbox.
How does it look on a phone?
Everything stacks: the figure first, scaled to fit at 320 pixels, then the three facts, the three statements as ruled rows, and the meter above a full-width button. The button lands within the first screen and a half of an iPhone. In right-to-left pages the layout mirrors and the dollar figures stay left to right.