shadcn.io is not affiliated with official shadcn/ui
School Email Verification Pricing Block for React
Education pricing behind a school email: type an address, press Verify and the price rolls from the list price to the education price while the plans unlock; anything else gets a line of guidance.
Installation
Overview
Gate an education price behind a school email with this verification pricing section. A compact header sits over one ruled band with the page's rails and + marks drawn by Guides. In its first cell, an email field and a Verify button; in the second, the Educator plan at the $30 list price in display-size type, with a locked button. Press Verify with a school address (.edu, .ac.uk, .edu.au and other school domains) and the price rolls down to $5 with Sliding Number, a line says which domain was recognised, and the button becomes a Shine Button link, the block's one primary control. Any other address, or text that isn't an address, gets a line saying what to do instead, and editing the field takes the unlock back. Under the band, the Student (free) and Classroom ($3 a seat) plans are compact rows that show the list price and lock until the same check passes, then strike it and show their education price. Built with Field, Input, Button, Badge, Sliding Number, Shine Button, Guides and Lucide icons, with CSS transitions only. For education discounts, student and teacher programs and any price that depends on who the buyer is.
FAQ
How do I change which addresses count as a school?
Edit SCHOOL_DOMAIN, a regular expression tested against the part after the @: it accepts .edu, .ac. and .edu. followed by a two-letter country ending. Add your own endings or a list of known school domains there. check returns invalid for text that isn't an address, other for an address that isn't a school and verified for one that is, and messageOf writes the line under the field for each of them.
How do I change the plans and prices?
LIST_PRICE is the price anyone pays and the struck figure after verifying. EDUCATOR is the plan in the price panel and OTHER_PLANS the rows under the band; each has its name, description, education price per seat a month (0 shows as Free) and the label of its button. The saving in the badge is worked out from the list price and the Educator price, so they never disagree.
Is the check enough to give the discount?
No. It runs in the browser and only decides what the page shows, so never take the price from it. Send the verified address to your server, confirm the visitor owns it by emailing a link, and only then give the account the education price in your billing system. The unlocked buttons are links, so point each href at that step. Each is a button with render set to an a element and nativeButton={false}.
Is the verification form accessible?
Yes. The field has a name ("School email") and is marked invalid when the address is wrong. The line under it is a polite live region, so a screen reader hears "school.edu is a school address. Education prices are unlocked" or the guidance when you press Verify. The price reads as one phrase, "Was $30, now $5 per seat per month", and the locked buttons are disabled and named for the plan they unlock. Enter in the field submits the form.
How does it look on a phone?
Everything stacks in one column: the field and Verify button, the status line, the Educator price and its button, then the two other plans as rows with their price and button wrapping under the description when there isn't room. The Educator button lands within the first screen and a half of an iPhone, and nothing scrolls sideways at 320 pixels. In right-to-left pages the layout mirrors and the prices stay left to right.
What about someone without a school email?
They get a link under the form to send a student or staff ID, which you review by hand, and the field says which domains are accepted. A school email check is quick but misses people at schools with unusual domains and those who can't use theirs, so keep a manual path and say how long it takes.
Related
- Pro
Pay-What-You-Can Nonprofit Pricing
Discounts and offersA sliding scale for nonprofits: a price slider from free to the list price, the chosen price riding its thumb, shortcuts to the minimum, suggested and supporter prices, and a line on what that price funds.
- Pro
Government Plan Pricing
Comparison tablesGovernment pricing led by its compliance: a strip of large certification cells under the heading, then one table comparing three annual plans, with specialist terms explained on demand.
- Pro
Startup Credits Pricing
Discounts and offersStartup 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.
- Pro
Open Source Pricing
Discounts and offersA 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.
- %%%Pro
Partner Program Pricing
Sales and partnersA three-tier partner program where the commission is the hero: each tier is a ruled row led by its percentage (10%, 20%, 30%) at display size, with its discounted seat price and perks, beside the pitch.
- Pro
Custom Quote Pricing
Sales and partnersA quote request for a security platform: the pitch and three ruled points beside a short form whose submit button sits inside the first screen, and a confirmation that takes focus once it's sent.