shadcn.io is not affiliated with official shadcn/ui
Resume Parser File Upload Block for Ark UI
An editable parsed profile with Contact, Skills, Experience and Education sections, skills as tags, and Check this flags from real checks such as overlapping role dates.
Installation
Overview
Hand a recruiter what a parser found and let them correct it, with this resume review panel for React with Ark UI. It is the profile review of Recruitloft, an applicant tracker. A list at the start names four sections (Contact, Skills, Experience, Education), each with a one-line summary and a Check this badge when something in it is off. The open section is at the end, read only until you press Edit: fields are Inputs, skills are tags in a Tags Input you add to and remove from, and the experience section holds two roles with their dates. The flags come from checks on the text: an email that is not an address, fewer than three skills, a date that is not YYYY-MM or two roles whose dates overlap (the sample has two overlapping by two months), a graduation year that is not a year. Fix the text and the flag clears. A File Upload zone lists a picked resume by name only. Save profile, a Shine Button, and Discard work on a local snapshot. The panel is ruled by Guides. For applicant tracking, onboarding and any parsed record.
FAQ
Is the resume really parsed?
No. The profile is a typed sample, labelled as one, and a picked file is listed by name and never read. The block is the review screen: in your app, fill the profile from your parser and keep the editing and the checks, which run on whatever is in the fields.
How do the Check this flags work?
Each section has a small check that returns a reason or nothing. The badge shows when there is a reason, and the reason is written above the fields with the same words. There are no confidence percentages, since a parser's number would be invented here. Experience reads dates as YYYY-MM, treats an empty end as the present and compares the two roles.
Why is Edit a separate step?
A section is read only until you press Edit, so scrolling and tapping around a profile cannot change it by accident. Each section has its own Edit button, and its fields keep one height either way.
What do Save profile and Discard do?
They compare the profile with the last saved snapshot, in this tab only. Save is aria-disabled until something changed and says so when pressed early; Discard restores the snapshot. In your app, post the profile at Save.