shadcn.io is not affiliated with official shadcn/ui
Export Schedule Settings Block for Solid
A scheduled export panel where you choose and order the columns with Move up and Move down, see the first three rows and the exact header line in that order with a Copy button, and pick a format, a frequency and an S3 or SFTP destination that shows only its own two fields.
Installation
Overview
Let people see the file before it exists, with this scheduled export panel for Solid with Ark UI. Inside a hairline frame with a plus mark on each corner, a checklist of the order columns sits beside a preview. Each row is a Checkbox with the column's name and what it holds and two ghost Buttons, Move up and Move down; the order id is locked in, because it keys every row. The preview is a table of the first three sample rows with the columns you chose in the order you set, and under it the exact line the file starts with (the header row, or for JSON Lines the first record) in a code well with a Copy Button. Under them a Segment Group picks CSV, semicolon CSV or JSON Lines, a Native Select says how often it runs, and a second segment group picks Amazon S3 or SFTP: each shows only its own two fields, and a line below spells out the next file's name and address ("s3://skiffwick-exports/orders/orders-2026-10-10.csv"). A bucket name or a path that can't work is refused when you press Save, with the reason and focus on the field. The last band counts unsaved changes in a status line beside a Shine Button to save them and an outline Button to discard them. On a phone the preview sits under the checklist and the save bar stays pinned to the bottom of the screen. It's built from Checkbox, Button, Copy Button, Segment Group, Native Select, Input, Shine Button and Guides, with a CSS entrance only. For a data warehouse, sync or reporting product.
FAQ
How do I fill it with my own columns?
Edit COLUMNS. Each has an id (the name written in the file), a hint, whether it is a number (written unquoted in JSON Lines) and its sample: its value in the three preview rows. KEY names the column that is always in the file. SAVED is the setup the account has stored when the page opens: the order, which columns are on, the format, the frequency and both destinations' fields. The preview, the header line and the next file's address are all computed from these.
How do Move up and Move down work, and why not dragging?
Each button swaps the column with its neighbour, says where it went in the status line ("sku moved to position 2 of 9") and keeps keyboard focus on the button you pressed, even though its row has moved. The buttons at the ends stay focusable and say the column is already first or last. Dragging would need a pointer, so it isn't the baseline here; add it on top if your product wants it, and keep these buttons for the keyboard.
What is the line under the preview, and what does Copy copy?
The exact first line of the file for the chosen format: the column names joined by a comma or a semicolon, or, for JSON Lines, the first record as one line of JSON with numbers unquoted. Copy puts that text on the clipboard, and the status line says so. It always matches the table above it, since both come from the same list.
Why does each destination show only its own fields?
Because a bucket means nothing to an SFTP server. Both pairs are always in the layout, one of them hidden and inert, so switching destination never moves the page, and each keeps what you typed. Save checks the visible pair: a bucket name has to be 3 to 63 lowercase letters, digits, dots or hyphens, a prefix has no leading slash, a host looks like a host name and a path starts with a slash. The error appears under the field in words, the field is marked invalid, and focus goes to it.
What happens when I press Save, and what stays local?
Nothing leaves the page and no export ever runs. The block keeps two copies of the setup, the saved one and the one being edited, and counts how many settings differ, so the status line can say "4 changes not saved yet." Save makes the edited copy the saved one and says it was saved in this demo; Discard puts the saved copy back. The next file's name uses the typed starting moment, not the clock. To make it real, send the setup to your scheduler in the save handler, and keep credentials out of this form.