shadcn.io is not affiliated with official shadcn/ui
Recruiter Candidate Match Profile Block for Solid
A recruiter profile as a candidate match search: five skill toggles and a notice-period slider narrow eight blind-screened candidates, each saying how many skills it matches and whether the notice fits, with a Sort by match button.
Installation
Overview
Match people to a role without reshuffling the page under the recruiter, with this recruiter profile for Solid with Ark UI. A compact header holds the title and one sentence, and the hairline frame under it opens on the recruiter: initials, name, role and a Blind screen badge. The search sits in the end cell: a figure that says how many of the eight candidates fit ("5 of 8", "within 4 weeks"), five skill toggles in a Toggle Group where any mix works as long as one stays on, and a Slider for the longest notice period you can wait, from none to twelve weeks. The main cell lists the candidates by reference, title, years and notice. Each row says "3 of 4 skills" and either "Within notice" or "Over by 2 weeks" in words, with a glyph, so nothing rests on colour. The rows stay where they are while you change the search; the foot, ruled by Guides, holds a polite status line and a Button that sorts the list by match when you ask. It's built from Toggle Group, Slider, Avatar, Badge, Button and Guides, with a CSS entrance only. For a recruiting CRM, an applicant tracker or any list that scores records against a few criteria.
FAQ
How do I fill it with my own candidates and skills?
Edit the constants at the top. SKILLS lists the toggles, SKILLS_AT_LOAD and NOTICE_AT_LOAD set what the search opens on, and MAX_NOTICE ends the slider. Each entry in CANDIDATES has a reference id, a title, years, a notice in weeks and the skills it has. The match counts, the fit figure and the Within or Over wording are all worked out from those, so nothing is typed twice. References and titles stand in for names because the screen is blind.
How is a match counted?
A candidate matches a skill when it is in their list and the toggle is on; the row shows how many of the chosen skills they have, such as "3 of 4 skills". Notice fits when it is no longer than the slider, and otherwise the row says by how many weeks it is over. The big figure counts candidates whose notice fits, whatever their skills; the skills only rank them when you sort.
Why don't the rows move when I change a skill?
On purpose. A list that re-orders under your pointer loses your place, so the rows keep their order until you press Sort by match, which puts the most skills first and keeps the existing order between ties. The status line says when the order is unchanged. To sort live instead, call the same sort in the change handlers.
What stays local in this demo?
All of it. The candidates are typed samples, the search lives in the page, and nothing is fetched, ranked by a model or sent. To make it real, load the candidates from your applicant tracker and run the skill and notice filters on the server; the interface keeps working on a list the server returns.
Is it accessible?
The skill toggles are a labelled group, each with its pressed state announced, and the slider has a name and speaks its value in weeks ("4 weeks", "No notice"). The search is a fieldset with a hidden legend, the candidates are a labelled list, and the status line is a polite live region present from the start. Fit is a word and a glyph as well as weight, and counts keep their order in a right-to-left layout.
How does it look on a phone?
The search comes first, with the skills wrapping onto two lines and the slider full width, then the candidate rows each on two short lines. The foot with the sort button stays pinned to the bottom of the screen while the panel scrolls, and settles at the panel's end from the medium breakpoint. The Blind screen badge is hidden below the small breakpoint.