shadcn.io is not affiliated with official shadcn/ui
Data Portability Transfer Account Block for Radix UI
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 Radix 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.