Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

No Training Data Empty State Block for Svelte

A fine-tuning tool's empty dataset page: a format picker that swaps a typed example file, a drop zone with a drawn three-layer network, and an extension check that accepts the file or says what the format expects.

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.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Show an empty dataset page that teaches the file shape first, with this no training data empty state for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds Tuneloft's page in two cells. A Segment Group picks the format, CSV, JSON or TXT, and the first cell shows a code window with the few lines of file the tool expects in that format. The second cell is a drop zone with a drawn network of three layers whose input layer is only dashed, and the Shine Button, the only colored control, opens the picker: Upload dataset. A file chosen or dropped is checked by its extension against the format picked: a match is listed as Accepted and fills the input layer, a mismatch says what the format expects, such as Expects .json, and picking another format checks the same file again. The File Upload does the picking and dropping, the frame is ruled by Guides, and everything moves with CSS only. For the empty data page of any tool that learns from files.

FAQ

What stays in the page, and how do I make it real?

The file stays in the tab: the page reads only its name and size, never its contents, so nothing is parsed, checked for shape or uploaded, and a reload clears it, as does Start over. The check is by extension only. To wire it for real, upload the file to your storage where the code says so, then validate its rows on your server and report problems per line in the status line.

How does the format picker work?

The three formats are a real segment group: arrow keys move between them and the example in the code window changes to that format's lines. All three examples sit in one cell and only the chosen one is shown, so the window never changes size. Edit the lines and extensions in the data at the top of the file to match what your tool takes.

What does the extension check do?

A file named like the format's own extension, in any letter case, is Accepted and the network's input layer fills in. Any other file is listed with what the format expects, and if you pick the format that matches it the same file is Accepted without choosing it again. Only one file is held at a time; a new pick replaces it, and dropping several at once is turned down with a line that says so.

Is it usable with a keyboard and a screen reader?

Tab reaches the format group, the example (a focusable region, because a long line scrolls), Upload dataset and Start over. The drawing is hidden from assistive technology and the one polite status line says whether the file matched, so the result is never only a color or a shape.

How does it look on a phone?

The example sits above the zone, in a window that scrolls sideways inside itself if a line is long. The format group, the button and the result follow, and the page never scrolls sideways, even at 320 px wide.

Does anything change the panel's height?

No. The three examples share one cell, the result row is always there, dashed and empty until a file is picked, and the status line reserves its lines, so choosing a format or a file never moves the panel.