Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Onboarding blocks

Pro

File Upload Onboarding Block for Radix UI

A setup panel with two cells: upload your own CSV or XLSX, or download a typed three-row sample and use it, with the chosen file listed as Ready and Continue waiting for one.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Let a new user start with a file of their own or with ours, with this first-file step for React with Radix UI. It is a setup panel of Cratemoor, a file-sharing tool for studios, with two cells on shared hairlines. "Upload your own" is the File Upload: a CSV or an XLSX up to 10 MB. "Start with a sample" shows a typed three-row table, a Download the sample button that really saves a CSV, and Use the sample, which lists it as if it had been uploaded. Under them a band called "Your source" lists the chosen file with its name, size, Ready and a Remove, and counts it ("Ready: 1 file"). Continue is the one Shine Button and waits quietly until there is a file.

FAQ

Is my file uploaded?

No. The block reads the file's name and size in the tab and nothing else, shows it in "Your source", and the text under the drop zone says it stays on your device. A file that is not a CSV or XLSX, or is over 10 MB, is refused in words under the drop zone, and the line is always reserved so nothing moves.

Is the sample download real?

Yes. Download the sample builds the CSV from the three typed jobs, saves it through a temporary link and releases it straight away, so you get a real cratemoor-sample-jobs.csv. Use the sample does not read that file; it lists the typed one as the source, at its true size.

Can I have both a file and the sample?

No: there is one source. Choosing a file replaces the sample and the other way round, and Remove empties the list. The count is derived from the source, so it can only read "Ready: no files" or "Ready: 1 file".

What does Continue do?

With no source it stays quiet, and pressing it says to choose a file or use the sample first. With one it says "Continued in this demo. Nothing was uploaded." and stays where it is.

How does it work with the keyboard?

The drop zone opens the file picker with Enter or Space, both sample buttons and Remove are ordinary buttons, and the sample table is read as a table with a caption. The status in the foot is one polite region, so each result is spoken once.

What stays local in the demo, and how do I wire it?

Everything: no file is sent and the chosen source is kept in state. In your app upload the file to your storage where next says so, let your server read the first rows to check the columns, and keep the sample CSV in your product's own files.

All 100 onboarding blocks