Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Onboarding blocks

Pro

Export Format Onboarding Block for Svelte

A setup panel that asks what exports are for, compares CSV, JSON, PDF and Excel in a table, points at the best column and lets a radio in each head override it before Set as default.

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 pick the file type their reports arrive in, with this export step for Svelte with Ark UI. It is a setup panel of Pivotwick, a reporting tool. A Native Select asks "What will you use exports for?" (share with colleagues, analyse in a spreadsheet, feed another system, print) and a native table compares four formats as columns by what each opens in, whether it keeps formatting, whether a machine can read it and its typical size. The answer picks the best column and labels it "Best for this", with one sentence on why; a radio in each column head overrides it, and the chosen column is ringed. Set as default is the one Shine Button. On a phone the table becomes one card per format.

FAQ

How is the best format chosen?

From a typed map: each purpose names one format (Excel for sharing, CSV for analysing, JSON for feeding another system, PDF for printing) and a sentence on why. Changing the purpose clears your override and moves the ring to the new best column.

What does the radio in each column do?

It chooses that format whatever the purpose says. The four radios are one group: Tab reaches the chosen one, the arrow keys move between formats and pick the one they reach, and the table's ring follows. "Best for this" stays on the recommended column, so you can see when you chose something else.

How does the comparison look on a phone?

Each format is a card with its radio, the same "Best for this" line and a list of the four facts, so no column scrolls sideways. The two layouts share one choice, so changing the width keeps what you picked.

What does Set as default do?

It makes the chosen format the default and says so ("Default is now Excel."); the foot shows the current default until you do. Pressing it for the format that is already the default says that instead. The change is kept in the page only.

Are the sizes real?

They are example figures for a 10,000-row report, typed in the file. In your app show the size of the user's own last export, or leave the row out.

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

Everything: choosing and saving only change state in the tab. In your app save the default on the workspace or the user where save says so, and use it as the format your export button produces.

All 100 onboarding blocks