shadcn.io is not affiliated with official shadcn/ui
Template Import File Upload Block for Radix UI
A template builder for an employee import: pick the optional columns, download a real CSV header and example row, then paste your header line to see missing, extra and out-of-order columns.
Installation
Overview
Tell people what columns a file needs, then check theirs, with this template import panel for React with Radix UI. It is the template step of Staffdeck's employee import, an HR onboarding tool for a payroll product. At the start, eight columns in a list: four required ones locked on and four optional ones to tick with a Checkbox. Under them, your template: the header row and one example row, which follow the ticks, and a Download Trigger that saves them as a real CSV. At the end, the header check: paste the first line of your file into an Input and a table compares it with the template, column by column, as Found, Missing, Extra or Out of order, with a count like "6 of 8 columns found". Names are compared in lower case without quotes. A File Upload zone lists a picked file by name only. Start import, a Shine Button, stays aria-disabled until the header matches. The panel is ruled by Guides. For payroll, HR and any importer with a fixed schema.
FAQ
How does the header check decide?
It splits your line on commas, trims each name, removes surrounding quotes and lowercases it. A template column that is not in your line is Missing, a name of yours that is not in the template is Extra. Of the columns both have, any whose place among them differs is Out of order. The count shows how many template columns were found.
Is the download real?
Yes. The file is built from the ticked columns in the browser, with the header row and one example row, and saved by your browser as staffdeck-employees-template.csv. Nothing is requested from a server.
Why can I not check a picked file directly?
The block never opens a file, so a picked file is only listed by name. To check a real file, read its first line with file.text() in the accept handler and set the header text state to it; the comparison follows. The demo asks you to paste the line so that nothing is read.
How do I change the columns?
Edit COLUMNS: each has an id (the header name), an example value and a required flag. The list, the template, the download and the check all derive from it.