Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

File Upload blocks

Pro

Handoff Export Design File Upload Block for Ark UI

A handoff window with five artboards to tick, a drawn canvas of the previewed one, greyscale palette swatches that copy their hex, Format and Scale controls and a named, sized export list with Copy manifest.

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

Choose what to hand off and see the file names before anything is rendered, with this design file upload window for React with Ark UI. It is the export window of Layerloft, a design-handoff tool, in three panes. The first lists five typed artboards with a Checkbox each and a preview button; the second draws the previewed artboard from typed shapes in greys over a row of greyscale palette swatches where a click copies the hex; the third sets the Format (Segment Group: PNG, JPG, SVG, PDF) and the Scale (Toggle Group: 1x, 2x, 3x) and lists what would be exported, named and sized, such as "Home@2x.png, 2880 by 1800", with Copy manifest. A File Upload button opens your own file. For design handoff, asset export and any tool that previews names before it renders.

FAQ

What stays local in the demo?

The file, its five artboards, their sizes and the palette are typed, and the canvas is drawn from a few shapes. Nothing is rendered, exported or saved: Export writes the status line. A design file you pick (FIG, Sketch, PSD, AI or XD) is listed by name and never opened, so the sample file's artboards stay. Copy manifest and the swatches copy real text to your clipboard. To wire it for real, parse the file on the server, render the artboards and return the files the list names.

How are the names and sizes worked out?

From the ticked artboards, the format and the scale: the name is the artboard name with spaces as hyphens, an @2x or @3x suffix for raster formats at 2x or 3x, and the extension. The size is the artboard size times the scale.

What do SVG and PDF do with the scale?

They ignore it: the list shows the artboard's own size marked vector and no suffix, and a line under the Scale control says so.

What does Copy manifest copy?

One line per ticked artboard: the file name, a comma and the size. It copies nothing when no artboard is ticked, and the status line says so.

Why are the swatches grey?

So the block adds no colour of its own to your theme. Each swatch is a button that copies its hex; the status line confirms what was copied.

What happens on a phone?

The three panes stack in one scrolling region inside the window, which keeps its height. The controls keep their names and touch sizes.

All 100 file upload blocks