Skip to content

NewMCP server for your coding agent. Set it up ›

Nexus UI
Get Pro

Upload Morph, animated React component

An upload status that takes itself apart to do the job. Tap it and the cloud's puffs smooth out, from the top round to the bottom, into a ring that becomes the progress track; a glowing head leads the progress round it while the arrow keeps rising up through the ring like a conveyor. When it lands the ring gives a soft pulse and a ripple, puffs back out into the cloud, and the arrow's head folds into a check. If the upload fails the ring turns red and shakes, and the cloud comes back with its arrow. Its sounds follow the picture: a tap, air as the cloud rounds, a note for each tenth that climbs the scale, a chime as it lands.

  • Pro
  • Inputs & Controls
  • Spring

A tap, air as the cloud rounds into a ring, a note for each tenth that climbs the scale, a chime as it lands, and a soft fall when it fails. Sound is off on this site until you switch it on.

Play with it

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

Props

PropTypeDefaultWhat it does
fileNamestring"Q3-report.pdf"The file name under the glyph.
fileSizestring"2.4 MB"The file size under the glyph.
onUpload(report: (progress: number) => void) => Promise<void>—Upload the file yourself: call report with 0 to 1 as it goes and resolve when it is done, or throw to show the failure. Without it the demo fills over about three seconds.
sizenumber300Width of the card in pixels.
enableSoundbooleantrueA tap, air as the cloud rounds, a rising note per tenth and a landing chime. They also follow the site-wide sound switch.
volumenumber0.8Sound level, 0 to 1.
autoplaybooleanfalseUploads by itself until the visitor touches it. Never runs under reduced motion.
classNamestring—Extra classes for the card.

Add it to your project

  1. 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. 2

    Connect the registry with your API key

    Upload Morph 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}"
    }
  }
}

How Upload Morph works

An upload status that takes itself apart to do the job. Tap it and the cloud's puffs smooth out, from the top round to the bottom, into a ring that becomes the progress When it lands the ring gives a soft pulse and a ripple, puffs back out into the cloud, and the arrow's head folds into a check. If the upload fails the ring turns red and shakes, and the cloud comes back with its arrow.

The source, the install command and the build prompt come with Pro.

Upload Morph questions

Does it make sound, and how do I turn it off?

A tap, air as the cloud rounds into a ring, a note for each tenth that climbs the scale, a chime as it lands, and a soft fall when it fails. Sounds are synthesised with the Web Audio API, so there are no audio files, and they only play after a click or key press. Pass `enableSound={false}` to silence this component, or call `setSoundsEnabled(false)` from `@/lib/ui-sounds` to switch every sound off at once. The CLI installs `@/lib/ui-sounds` with the component.

More inputs & controls