Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

File Upload blocks

Pro

Spreadsheet Preview File Upload Block for React

A spreadsheet import preview: three sheets in tabs, each a table of its first eight rows with column letters, row numbers and a type chip per column, a formula line for the selected cell, and a checkbox per sheet before importing.

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

Check how a spreadsheet will land before you import it, with this preview panel for React with Base UI. It is Cellarbook, a data-import tool. Three typed sheets (Customers, Orders and Products) sit in Tabs; each is a native table of its first eight rows with A, B, C column letters, row numbers and a Badge per column that names the type read from the values (Text, Number, Date or Currency). Every cell is a button: press it or move with the arrow keys and its address and value show in the formula line above the grid. A checkbox per sheet picks what to bring in and the one Shine Button reads "Import 2 sheets". A File Upload strip lists a chosen file's name and size. The panel is ruled by Guides, with a CSS entrance only. For data onboarding, migration tools and any import that needs a look first.

FAQ

How does it decide a column's type?

A small detector at module scope looks at every value under the header: all currency amounts make Currency, all ISO dates make Date, all numbers (with thousands commas) make Number, anything else is Text. Number and Currency columns align to the end.

How do I move around the grid?

Tab enters the grid at the selected cell. Arrow keys move one cell, Home and End jump to the row's ends, and the formula line follows. Only one cell is a tab stop, so Tab leaves the grid in one press.

What does Import do?

Nothing leaves the page: it says "Imported 2 sheets in this demo. Nothing was saved." The button counts the ticked sheets, and with none ticked it says to tick one.

What stays local in this demo?

The three sheets are typed data. A chosen or dropped file is listed by name and size only and is never read or uploaded, so the sample sheets stay on screen.

How do I wire it to a real file?

Parse the file in the accept handler with your spreadsheet library into the same Sheet shape (head, rows, total), keep typesOf for the chips and send the ticked sheets to your import endpoint.

What changes on a phone?

The tabs scroll sideways, the grid scrolls inside its own region with the row numbers staying put, and the foot stacks with the import button at full width.

All 100 file upload blocks