shadcn.io is not affiliated with official shadcn/ui
Open Source Pricing Block for React Aria
A free CI plan for open-source projects: one raised card with a display-size $0, the minutes it includes, an apply button and what's included (five items on a phone), beside three numbered eligibility rules.
Installation
Overview
Spotlight a free plan for open-source projects with this pricing section. A compact header sits over one ruled band on the page's rails, with a top rule and + marks drawn by Guides. Its first cell holds a nested Frame: the plan's name with a Free forever Badge, a $0 in display-size type, the 50,000 build minutes a month it comes with (and what that buys in ten-minute builds), and a full-width Shine Button to apply, the block's one primary control. Under it, the included features in two columns with the quantities in the text colour. On a phone only the first five show, and a ghost Button reveals the rest ("All 9 features"). The second cell lists the three rules a project has to meet, numbered and ruled, with a note on review time and the paid plans. Built with Frame, Badge, Button, Shine Button, Guides and Lucide icons, with CSS transitions only. For developer tool programs, free tiers for public projects and any plan gated by who qualifies.
FAQ
How do I change the features, minutes and rules?
Edit the constants at the top of the file. MINUTES is the monthly allowance and BUILD_MINUTES the length of a typical build, which gives the "about 5,000 builds" line. FEATURES lists what's included, each with a name and an optional quantity written in the text colour before it. RULES are the numbered eligibility rules, a title and a detail each. SHOWN_ON_PHONE sets how many features a phone shows before the disclosure.
How do I connect the call to action to an application flow?
The call to action is a real link. It's a ShineButton with href, which React Aria renders as a link. Point it at your application form or at a sign-in that reads the applicant's repositories, check the rules on your server (license, recent commits), and on approval give the account the plan in your billing system.
How does the feature list collapse on a phone?
Below the md breakpoint, features after the fifth get max-md:hidden until the disclosure is pressed; the button says "All 9 features", flips its chevron and then reads "Show fewer". It has aria-expanded and aria-controls pointing at the list, and it's hidden from md up, where every feature always shows. Nothing is removed from the page, so a search for text finds all of them.
Is the plan card accessible?
Yes. The plan and "Who qualifies" are h3 headings under the section's h2. Features are a list with decorative checkmarks, and the rules are an ordered list whose digits are decorative, since the list already announces its order. The price reads "$0 forever". The disclosure is a real button with a state.
How does it look on a phone?
The card comes first, then the rules. The price, the minutes line and the apply button land within the first screen of an iPhone, with five features and the "All 9 features" button under them. The rules follow as ruled rows. Nothing scrolls sideways at 320 pixels, and in right-to-left pages the layout mirrors.
When should I use a single eligibility card instead of a plan comparison?
Use a single card when the offer is one package gated by who qualifies: it keeps attention on the value and the rules, and asks for one action. Use a comparison when you offer several tiers whose features differ, so buyers can weigh them side by side.