shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Show how close a role is to the person reading it with this job listing card for React with Radix UI. A hairline frame holds a Toggle Group called "Your skills" (React, TypeScript, Testing, Accessibility, Design systems, GraphQL) over three job tiles, each marked at its corners by Guides. Press the skills you have and every tile re-reads at once: the requirement chips you have fill in and carry a check and the words "you have it", a segmented meter says "You match 3 of 5", and a salary range bar sits on one shared scale with the typed market median as a tick. Save is a Toggle; Quick apply is an outline Button that turns into "Applied" with a Withdraw, and a polite line says what changed. Nothing is sent or stored. On a phone the tiles are a row you swipe with the next one showing. For careers pages, job boards and any listing where fit matters more than the title.
FAQ
How do I change the roles and the pay?
Edit JOBS. Each role has a needs list of skill ids, a lowCents, highCents and medianCents (so $90,000 is 9_000_000), and a posting day. The match count, the meter, the chips and the position of the range on the scale are all worked out from those, so they always agree. Edit SKILLS to change the skills you can press, and SCALE_LOW and SCALE_HIGH to change the pay scale shared by every tile.
How is the match worked out?
It counts the role's required skills that are pressed. Nothing is weighted or scored: "3 of 5" means three of the five listed skills are on. The meter has one segment per requirement, and a segment is filled when you have that skill.
Is the salary data real?
No. The ranges and medians are typed in this demo. The bar uses one scale for all three tiles so the ranges compare honestly, and the median is a tick, not a promise. In a real listing, load the range from the posting and the median from your own data, and say where it comes from.
What stays local, and how do I wire it for real?
Skills, saved roles and applications are page state; nothing is stored or sent. Replace the bodies of apply, withdraw and save with calls to your applicant system, and load the skills from the visitor's profile instead of the starting useState list.
How does it look on a phone?
The tiles become a row you swipe sideways, each about four fifths of the width so the next one shows. The row is a focusable region, so the arrow keys scroll it. The skill buttons wrap onto more lines.
Is it accessible?
The skills are a named group of toggle buttons. A chip you have is filled, has a check and says "you have it" to a screen reader, so colour is never the only signal. The salary bar is a named image with the range and median in words, the buttons name their role, and every change is announced by the polite status line.
