Image Press, animated React component

A toy press that really shrinks photos before you upload them. Drop a photo on it (or choose one, or drag the sample in) and it sits on top of the machine, wobbling. Turn the cobalt dial to Tiny, Balanced or Crisp and hit the red button: the photo is pulled into the slot between striped rollers, the machine rumbles while the LCD counts the size down, and the pressed copy slides out of the bottom slot, smaller, with a perforated edge and a sticker showing how much it saved. Download it or press another. Anything that isn't a photo is spat back out. The compression is real: the photo is redrawn at the level's size limit and exported as WebP (JPEG where WebP isn't available), and onCompressed hands you the new File. Keyboard: the tray is a button that opens the file picker, the dial is a slider (arrow keys, Home, End), and the red button presses. Progress is announced politely.

Pro
Inputs & Controls

Play with it

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

Image Press

Balanced

Press

Photos are pressed right here in your browser. Nothing is uploaded.

Image Press

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
onCompressed	(file: File, info: PressResult) => void	—	Called when the visitor uses compressed.
levels	PressLevel[]	LEVELS	the dial's notches, smallest file first
defaultLevel	string	—	id of the level the dial starts on
accept	string	"image/*"	The accept shown in the component.
autoplay	boolean	false	Plays a demo by itself until the first touch. Held still under reduced motion.
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
Image Press 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}"
    }
  }
}
```

Image Press, animated React component

Play with it

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

Image Press, animated React component

Play with it

Props

Add it to your project

Set up your project once

Connect the registry with your API key

More inputs & controls