Genie Uploader, animated React component

Genie Uploader: a file drop that swallows files the way macOS minimises a window. Drop files on the well, or click it to choose some. Each file appears as a card where it landed (a real thumbnail for images), then bends into a funnel and pours into the cloud, which gulps it and fills with blue as the uploads run. The files settle into a list with a progress line each; a file that's too big goes halfway in, gets spat back out and shakes its head, and a failed upload can be retried, which sends it into the cloud again. A check lands on the cloud when everything is up. Keyboard: Tab to the well and press Enter or Space to choose files; each row's buttons remove or retry.

Pro
Inputs & Controls
Spring

Play with it

Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.

Upload files

Photos, documents and videos up to 25 MB

Drop files here

or browse · up to 25 MB

Genie Uploader

Demo it by itself

The code you copy has the settings you chose. Pro also gives you the one-line install and a build prompt to rebuild it with your AI tool.

Props

Prop	Type	Default	What it does
title	string	"Upload files"	The title shown in the component.
subtitle	string	"Photos	The subtitle shown in the component.
accept	string	—	passed to the file picker, for example "image/*,.pdf"
maxSize	number	25 * MB	files larger than this many bytes are refused; 25 MB by default
onChange	(items: UploadItem[]) => void	—	the list, every time it changes
autoplay	boolean	false	Demo the gestures on its own until someone touches it. Off by default.
className	string	""	Extra classes for the outer element.

Add it to your project

1
Set up your project once
You need a Next.js project with Tailwind CSS and the @/ import alias. In its root folder, run this once. It creates components.json and the cn() helper in src/lib/utils.ts:
```
npx shadcn@latest init -d
```
Starting from nothing? The Quick Start walks through the whole thing.
2
Connect the registry with your API key
Genie Uploader is a Pro item, so the CLI has to send your API key. Do this once per project:
1. Create a key at nexus-ui.com/dashboard/api-key. Copy it straight away: it starts with nxs_ and is shown only once.
2. In your project root, next to package.json, create a file named .env.local with this line, using your own key:
```
NEXUS_API_KEY=nxs_your_key_here
```
3. Open components.json and add this entry inside the outermost braces, next to "aliases". Leave {name} and ${NEXUS_API_KEY} exactly as written; the CLI fills them in:
```
"registries": {
  "@nexus-labs": {
    "url": "https://www.nexus-ui.com/api/registry/{name}",
    "headers": {
      "Authorization": "Bearer ${NEXUS_API_KEY}"
    }
  }
}
```

Genie Uploader, animated React component

Play with it

Upload files

Props

Add it to your project

Set up your project once

Connect the registry with your API key

Add the component

Check what was added

Copying by hand? Skip the registry

Use it in a page

Genie Uploader, animated React component

Play with it

Upload files

Props

Add it to your project

Set up your project once

Connect the registry with your API key

More inputs & controls