Inputs

UploadFiles

Drag-and-drop uploader with morphing, shimmering progress.

A controlled file uploader: a clean dashed dropzone (drag-drop + browse), per-file rows with type-colored badges, complete and uploading states, and a distinctive segmented progress bar. While a file is in flight, its status line morphs through a long, varied upload vocabulary under a Claude-style shimmer sweep — so the wait stays alive. Dark by default, light and auto themes, every surface a CSS variable.

Drag and drop or

MAX FILE SIZE: 20 MB

14 MB/Complete

2.7 MB of 4 MB/Uploading…

68%

4.5 MB of 14 MB/Wrangling chunks…

32%

This pattern is a faithful rebuild of a concept by Maxim Kuznetsov — the layout, the segmented upload bars, the light and dark themes, and the drag-and-drop flow are all his design. I turned it into a controlled React component and added one tiny refinement of my own: the morphing, shimmering status line while a file uploads.

Originally designed byMaxim Kuznetsov

Installation

Install the package and import the component. The styles come with it — there's no extra CSS file to add.

pnpm add @roy-ui/ui

Import

import { UploadFiles } from '@roy-ui/ui';

Usage

You give UploadFiles a list of files to show. When someone drops or browses for files, you get them back through onFilesSelected — you do the uploading and update the list with the new progress. While a file is uploading, the status text animates and the bar fills up.

Drag, drop, upload

This demo runs on its own: the files fill up to 100%, then start over. Drop or browse to add your own — they begin at 0% and climb.

Drag and drop or

MAX FILE SIZE: 20 MB

14 MB/Complete

2.7 MB of 4 MB/Hang tight…

68%

4.5 MB of 14 MB/Almost there…

32%

tsx

const MB = 1024 * 1024;
const [files, setFiles] = useState<UploadFile[]>([
  { id: '1', name: 'investor-pitch-deck.pdf', size: 14 * MB,
    uploaded: 14 * MB, progress: 100, status: 'complete' },
  { id: '2', name: 'landing-copy-update.docx', size: 4 * MB,
    uploaded: 2.7 * MB, progress: 68, status: 'uploading' },
  { id: '3', name: 'product-ui-concepts.fig', size: 14 * MB,
    uploaded: 4.5 * MB, progress: 32, status: 'uploading' },
]);

<UploadFiles
  files={files}
  onFilesSelected={(picked) => {
    // kick off your real upload here, then update `files`
    setFiles((prev) => [
      ...prev,
      ...picked.map((f, i) => ({
        id: crypto.randomUUID(),
        name: f.name,
        size: f.size,
        uploaded: 0,
        progress: 0,
        status: 'uploading' as const,
      })),
    ]);
  }}
  onRemove={(id) => setFiles((p) => p.filter((f) => f.id !== id))}
  onRemoveAll={() => setFiles([])}
  onClose={() => {/* close your modal */}}
/>

Selecting and deleting many

Add the selectable prop to let people pick several files and delete them at once. To start picking: long-press a row on a phone, or click a row's trash on a computer. Then tap rows to check or uncheck them and press Delete. You get the chosen file ids in onRemoveSelected.

Pick a few, then delete

All four files are done. Start picking (long-press a row, or click its trash), check a few, and press Delete. Click a file's name to preview it. A Reset button shows up once the list is empty.

Drag and drop or

MAX FILE SIZE: 20 MB

3.2 MB/Complete

8 MB/Complete

2.1 MB/Complete

614.4 KB/Complete

tsx

const [files, setFiles] = useState<UploadFile[]>(initial);

<UploadFiles
  selectable
  files={files}
  onRemoveSelected={(ids) =>
    setFiles((prev) => prev.filter((f) => !ids.includes(f.id)))
  }
  onRemove={(id) => setFiles((prev) => prev.filter((f) => f.id !== id))}
  onRemoveAll={() => setFiles([])}
/>

Previewing a file

Click a file's name to open it in a pop-up. If you give the file a url, the pop-up shows the image, PDF, or video. If not, it shows a simple card with the file's name and size. Close it with Escape or by clicking outside. Turn this off with previewable={false}, or supply your own pop-up content with renderPreview.

Click a filename

These files have no url, so the pop-up shows the simple info card. In the example above, hero-shot.png and cover.jpg have a url, so they show a real image.

Drag and drop or

MAX FILE SIZE: 20 MB

14 MB/Complete

2.7 MB of 4 MB/Uploading…

68%

4.5 MB of 14 MB/Beaming bytes…

32%

tsx

<UploadFiles
  files={files}
  // previewable is true by default
  onPreview={(file) => {
    // optionally fetch + attach file.url here
  }}
  renderPreview={(file) => <MyViewer file={file} />} // optional
/>

Theming

It's dark by default. Use theme="light" for a light look, or theme="auto" to match the user's system. Colors are CSS variables (the --royui-upload-* names), so you can change any of them inline.

Light surface

The same component with theme="light".

Drag and drop or

MAX FILE SIZE: 20 MB

14 MB/Complete

2.7 MB of 4 MB/Beaming bytes…

68%

4.5 MB of 14 MB/Almost there…

32%

tsx

<UploadFiles theme="light" files={files} /* … */ />

Change the accent color

Set --royui-upload-accent to recolor the link, the dropzone highlight, and the progress bar — all in one line.

Drag and drop or

MAX FILE SIZE: 20 MB

14 MB/Complete

2.7 MB of 4 MB/Beaming bytes…

68%

4.5 MB of 14 MB/Pushing pixels…

32%

tsx

<UploadFiles
  files={files}
  style={{ ['--royui-upload-accent' as string]: '#6366f1' }}
/>

Props

Every native div attribute is forwarded — id, style, className, data-*, ref.

Prop	Type	Default	Description
`files`	`UploadFile[]`	`—`	The list of files to show. Each one: { id, name, size, status, and optionally uploaded, progress, url, icon }.
`onFilesSelected`	`(files: File[]) => void`	`—`	Called with the files the user dropped or browsed for. Start your upload here, then update the files list.
`onRemove`	`(id: string) => void`	`—`	Called when a row's trash (done) or × (uploading) is clicked.
`onRemoveAll`	`() => void`	`—`	Called when the footer "All" button is clicked.
`selectable`	`boolean`	`false`	Let users pick several files and delete them together. Long-press a row on touch, or click a row trash on a computer.
`onRemoveSelected`	`(ids: string[]) => void`	`—`	Called with the picked file ids when Delete is pressed. If you skip it, onRemove is called once per id.
`previewable`	`boolean`	`true`	Make filenames clickable to open the preview pop-up.
`renderPreview`	`(file: UploadFile) => ReactNode`	`—`	Your own content for the preview pop-up. Without it, the file's url is shown as an image, PDF, or video, or a simple info card.
`onPreview`	`(file: UploadFile) => void`	`—`	Called when a filename is clicked. Good for loading the file url just in time. The pop-up still opens.
`onClose`	`() => void`	`—`	If set, a close (×) button shows in the header and calls this.
`onAction`	`() => void`	`—`	Called when the footer button (Done / Uploading…) is clicked.
`title`	`ReactNode`	`'Upload files'`	The heading at the top.
`maxSizeLabel`	`string`	`'MAX FILE SIZE: 20 MB'`	The small caption under the dropzone.
`accept`	`string`	`—`	Which file types the file picker allows (e.g. "image/*").
`multiple`	`boolean`	`true`	Allow picking more than one file at a time.
`theme`	`'auto' \| 'light' \| 'dark'`	`'dark'`	Color scheme. "auto" follows the system setting.
`statusWords`	`string[]`	`15-word default set`	The words that cycle in the status line while a file uploads.
`actionLabel`	`ReactNode`	`auto`	The footer button text. Defaults to "Uploading…" while files upload, otherwise "Done".
`...rest`	`HTMLAttributes<HTMLDivElement>`	`—`	Any extra div props (className, style, id, data-*, ref).

UploadFiles

Drag-and-drop uploader with morphing, shimmering progress.

const [files, setFiles] = useState<UploadFile[]>(initial); <UploadFiles selectable files={files} onRemoveSelected={(ids) => setFiles((prev) => prev.filter((f) => !ids.includes(f.id))) } onRemove={(id) => setFiles((prev) => prev.filter((f) => f.id !== id))} onRemoveAll={() => setFiles([])} />

Previewing a file

<UploadFiles files={files} // previewable is true by default onPreview={(file) => { // optionally fetch + attach file.url here }} renderPreview={(file) => <MyViewer file={file} />} // optional />

Prop

Type

Default

Description

files

UploadFile[]

—

The list of files to show. Each one: { id, name, size, status, and optionally uploaded, progress, url, icon }.

onFilesSelected

(files: File[]) => void

—

Called with the files the user dropped or browsed for. Start your upload here, then update the files list.

onRemove

(id: string) => void

—

Called when a row's trash (done) or × (uploading) is clicked.

onRemoveAll

() => void

—

Called when the footer "All" button is clicked.

selectable

boolean

false

Let users pick several files and delete them together. Long-press a row on touch, or click a row trash on a computer.

onRemoveSelected

(ids: string[]) => void

—

Called with the picked file ids when Delete is pressed. If you skip it, onRemove is called once per id.

previewable

boolean

true

Make filenames clickable to open the preview pop-up.

renderPreview

(file: UploadFile) => ReactNode

—

Your own content for the preview pop-up. Without it, the file's url is shown as an image, PDF, or video, or a simple info card.

onPreview

(file: UploadFile) => void

—

Called when a filename is clicked. Good for loading the file url just in time. The pop-up still opens.

onClose

() => void

—

If set, a close (×) button shows in the header and calls this.

onAction

() => void

—

Called when the footer button (Done / Uploading…) is clicked.

title

ReactNode

'Upload files'

The heading at the top.

maxSizeLabel

string

'MAX FILE SIZE: 20 MB'

The small caption under the dropzone.

accept

string

—

Which file types the file picker allows (e.g. "image/*").

multiple

boolean

true

Allow picking more than one file at a time.

theme

'auto' | 'light' | 'dark'

'dark'

Color scheme. "auto" follows the system setting.

statusWords

string[]

15-word default set

The words that cycle in the status line while a file uploads.

actionLabel

ReactNode

auto

The footer button text. Defaults to "Uploading…" while files upload, otherwise "Done".

...rest

HTMLAttributes<HTMLDivElement>

—

Any extra div props (className, style, id, data-*, ref).