shadcn.io is not affiliated with official shadcn/ui
School Email Verification Pricing Block for Vue
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.
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.