shadcn.io is not affiliated with official shadcn/ui
Data Portability Transfer Account Block for React
A transfer to another app in five steps: choose where, tick what moves, map each field, review what stays behind and start, with a real download of the sample records.
Installation
Overview
Let people take their data to another service and see exactly what comes with it, with this transfer panel for React with Base UI. A read-only Steps bar numbers five steps: Destination, Data, Mapping, Review and Transfer. Destination is three radio rows, each saying what the app takes. Data ticks what to move with a Checkbox, shows counts and sizes, and says plainly what the chosen app cannot take. Mapping puts each of your fields beside a Native Select of the app's own, and a field with no match is flagged in words and dropped. Review adds it up: what moves, what is dropped, what stays behind and about how long it would take. Start transfer, the foot's Shine Button, ends on a result in the same place with a real Download Trigger of the two sample records as the app would receive them. Every step sits in one grid cell, so the panel keeps the tallest step's height. It's built from Steps, Checkbox, Native Select, Download Trigger, Button, Shine Button and Guides, with a CSS entrance only. For account settings and any app that owes people a way out.
FAQ
How do I fill it with my data and destinations?
Edit CATEGORIES (a count and a size in kilobytes), COLUMNS (your fields and the category each belongs to) and DESTINATIONS. A destination lists what it takes, its own fields, and in suggest what it proposes for each of your fields in the order of COLUMNS, with an empty string for no match. The estimate is the size divided by SPEED, megabytes a minute. Nothing is typed twice: the counts, the sentences and the review are all worked out from these lists.
What stays local, and how do I make it real?
All of it. Start transfer only moves the panel to its result, and nothing is read or sent. To make it real, build the transfer on your server from the same choices (the destination, the categories and the mapping), send the person to the app's own authorisation, run it as a job and show its progress; keep this page's review so people see what is left behind before they start.
What happens to a field with no match?
It is flagged in words, Not mapped, so it is dropped, and the review lists it under Dropped. You can go on while some fields are unmapped, but not when none are: pressing Next then says to map at least one and puts focus on the first select. A field whose data is not ticked, or that the app does not take, is not offered at all and says why.
What is in the download?
A real JSON file with two typed sample records, written with the app's own field names as you mapped them, and a note that it is a sample made by a demo. It is the shape of what would be sent, never the person's reading list. Replace recordsOf with a function that builds the real records, and keep the file as a way for people to see exactly what moves.
How does it look on a phone?
The steps shrink to numbers with a line under them, Step 3 of 5 and its name, and the foot stays pinned to the bottom of the screen with Back and Next. The mapping rows stack their label over the select. Because all five steps share one cell, moving between them never changes the panel's height.
Is it accessible?
The destination rows are real radios in a named group and the data rows real checkboxes, each named and described. Each step's heading takes focus when you arrive, the steps in other positions are hidden from screen readers and the tab order, and the one status line is polite. Pressing Next early says what is missing and focuses it. The Steps bar here only shows where you are: use Back and Next to move.
Related
- Pro
Export requests as a lifecycle: a request checked with the password, a four-stage track that moves one stage per press, and a real sample file to download once it is ready.
- Pro
An import in progress into a new account: an overall count, a row for each resource with its state, a log in the theme's colours, Run next one resource per press and Retry for a failure.
- Pro
Standing exports to other services: four destinations on shared hairlines, each with its state, the kinds of record it receives, how often it runs, its last export and Export now.
- Pro
Merge Two Accounts Account
Connected appsA merge in three steps: the other account's email and code, the two accounts side by side with what moves, what is lost and three choices, and a confirm that closes the other account behind an alert dialog.
- Pro
Import and Export Settings
Backups and exportsAn import rules panel with a dry run: three rules decide how rows match items on file, and a sample file of eight rows shows each row's verdict and four totals that change as the rules do, plus a real header-row CSV template to download.
- Pro
Two-Factor Methods Account
Sign-in methodsAn account's two-factor methods as rows with their role, history and a Test that opens a code field in place, Make primary, a guarded Remove, and a Set up that opens a QR code, a key name or a number.