shadcn.io is not affiliated with official shadcn/ui
Stepper Wizard Progression Features Block for Vue
A working CSV import wizard in a framed card: Upload, Map columns, Preview and Import, with real Back and Next buttons, selects that match columns to fields and a preview that follows the choices.
Installation
Overview
A features section for Vue with Ark UI, built as a working multi-step wizard for a spreadsheet-import tool. A framed card with plus marks on its corners holds four steps (Upload, Map columns, Preview, Import) with real Back and Next buttons. Step one shows the file and the six columns it found; step two matches each column to a field with a select, and won't go on while two columns share a field or no column is the email; step three previews four rows under the field names you chose and flags the one whose email is invalid; step four says how many rows were imported and how many skipped, all worked out from your choices. Next is the block's only Shine Button. It's built from Steps, Select, Progress, Badge, Button and the Guides line kit, with your theme's tokens for every colour. For onboarding flows, importers, setup wizards and any task that is easier in stages.
FAQ
How do I change the file, the columns and the fields?
Edit the top of the file. SOURCES lists the columns the file has, each with its first four values; TARGETS lists the fields they can be matched to; GUESS is the match the wizard starts with; ROWS is how many rows the file holds. The skipped row, the preview table, the imported count and the labels on Next are all worked out from those, so they can't disagree. Real parsing and the upload itself go where each step's Next button runs.
What stops someone going on?
On the Map step, Next is disabled while two columns are matched to the same field or no column is matched to Email, and a line under the list says which. Back is always available except on the first step. The steps in the list at the top can be clicked only up to the furthest step reached, and not after the import.
What does a keyboard or screen reader user get?
When you move to another step, focus goes to its heading (never on page load), and a polite status says "Step 3 of 4: Preview", or the result after the import. The step list is one tab stop with the arrow keys moving along it; each select is named for its column ("Field for email_addr"), and the preview table is a real table in a focusable, named region that scrolls sideways on a phone.
Which select is it on each library?
It's the catalog's Select on every version, so the arrow keys, type-ahead and Escape behave as they do wherever else you use it.
How does it fit on a phone?
The step list is replaced by "Step 2 of 4" with its title and a progress bar, each column's select goes under its name, and the preview table scrolls sideways inside its own region. Every step has the same minimum height, so the buttons stay where they are. Nothing scrolls the page sideways at 320 pixels.