shadcn.io is not affiliated with official shadcn/ui
Data Import Onboarding Block for Vue
An import step with three sources as tabs: a CSV read in the tab to count its records, an API address with a Test connection button, and a small form that types people into a table.
Installation
Overview
Let a new user bring their first records in without leaving the sign-up flow, with this import step for Vue with Ark UI. It is a whole screen of Hopperby, a data-cleanup tool: the page's rails and one band across it, with the step header ("Step 3 of 5" and a hairline), a centred heading and three Tabs. CSV file is the File Upload: a CSV up to 2 MB is read in the tab to count its records, and the file never leaves the device. Connect an API takes an address and a Test connection button. Type it in is a small form that adds people to a table. A band adds the three up as "Ready to import", and Import is the one Shine Button: quiet until there is something to bring in, and pinned to the bottom of a phone screen.
FAQ
What does the block do with the CSV?
It reads the file's text in the tab and counts the non-empty lines under the header line; that count is the record count shown in the pane and added to "Ready to import". It does not parse quotes or columns, and nothing is uploaded. A file that is not a .csv, is over 2 MB, or has no records under its header is refused in words under the drop zone, and the line is always reserved so nothing moves.
Does Test connection call the address?
No. The answer is worked out from the address's shape and says so: an https address whose path contains "records" finds 120 records, any other https address is reachable but finds none, and anything else is refused ("Use an https address."). Editing the address clears the answer, so the total never counts a result for an address you have since changed.
How many people can I type in, and can I undo it?
Up to six. Name and Email are checked when you press Add (an empty name or an address without an at sign is refused in words, and focus goes to the field), the row appears in the table, and each row has a Remove button named for the person. The table sits in a held scroll region, so adding rows never changes the page's height.
What does Import do?
With nothing ready it stays quiet and pressing it says to add a source first. With records ready it says "Imported 4 records in this demo. Nothing was sent." and nothing else happens. Skip for now only says it was skipped.
How does it work with the keyboard?
The tabs follow the usual pattern: Tab reaches the list, the arrow keys move between tabs and the panel follows. The drop zone opens the file picker with Enter or Space, Enter in the address or form fields does not submit anything, and the status line is one polite region, so each result is spoken once.
What stays local in the demo, and how do I wire it?
Everything: the CSV is only read in the tab, the API answer is typed, and the people live in state. In your app send the file or its parsed rows to your import endpoint where submit says so, call the real address from your server where testAddress is, and save the typed people with the others.