shadcn.io is not affiliated with official shadcn/ui
Mentor Match Onboarding Block for Solid
A mentor step with four interest chips and three mentor cards that re-rank by how many interests they share, with the match said in words and an intro to request.
Installation
Overview
Pair a new member with the people most likely to help, with this mentor step for Solid with Ark UI. It is a whole screen of Pairwold, a career-mentoring network: the page's rails and one band, a step header ("Step 5 of 7" and a hairline) and a heading, then the band splits in two. The four interests (Career change, Leadership, Freelancing, Pay talks) are Toggle Group chips first in the page, and from the large breakpoint the three mentors sit at the start; on a phone the chips are a row that scrolls sideways and the mentors follow. Each mentor is a card with an initials Avatar, a role, the days they are free and three topic Badges. The cards re-rank by how many of your interests they share: "Shares 2 of your 3" with the shared topics named in words, the shared badges solid and "Best match" on the first card. Request an intro is an outline button on each card; Continue is the one Shine Button, with a quiet Skip for now.
FAQ
How do I change the interests and the mentors?
Edit TOPICS and MENTORS. The first four topics are the chips; a mentor lists three topic ids, and may cover topics that are not chips (Portfolio, Hiring) so that the score is not just a copy of the chips. A mentor has an id, initials, a name, a role and the days they are free. Keep three mentors so the cards keep their fixed slots.
How is the match worked out?
Each interest you pick that a mentor also covers counts once: the score is that count over the number you picked, said as "Shares 2 of your 3" and spelled out ("You both care about Career change and Freelancing."). The mentors are sorted by it, most first; ties keep their usual order. Nothing else, no hidden weight, goes into it.
Why do the cards not jump when the order changes?
The three cards are fixed slots, each keyed by its place: a re-rank changes the words and badges inside them and not the boxes, which are all one height. "Best match" is always rendered and hidden on the others, so the line it sits on never changes.
What does Request an intro do?
In the demo it marks that mentor "Requested" and says so in the status line ("Asked Yaw Ankomah for an intro in this demo. Nothing was sent."). Pressing it again says you already asked. In your app send the request from the card's onAsk handler and show the mentor's own reply state.
What if no interest is picked?
The mentors say "Pick an interest to see what you share." Continue stays in the tab order and looks quiet; pressing it says "Pick an interest to continue." under the chips and puts focus on the first one. Skip for now leaves the step for later and clears nothing.
What stays local in the demo, and are the people real?
Everything is local and nobody is real: the names, roles and availability are typed fiction, avatars are initials and no photo is used. Continue says it saved in this demo and sends nothing; in your app send the interests and any requests to your server where submit says so.