Paperclip Attach, animated React component

A message composer that clips attachments on with a real paperclip. Attach a file (or drop it on the message) and the clip springs open, the file flies in from the button and slides under the wire, and the clip snaps shut, jiggling the stack. Older files fan out behind, pinned at the same corner; tap one to slip it out and back on top, or pull the top one off with its close button. Keyboard: the paperclip button opens the file picker; every card and close button is reachable with Tab.

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.

ToPSPriya Shah

Attach files with the paperclip, or drop them here.

Props

Prop	Type	Default	What it does
to	string	"Priya Shah"	The to shown in the component.
placeholder	string	"Write a message"	The placeholder shown in the component.
defaultMessage	string	—	Starting value of message when you leave it uncontrolled.
maxFiles	number	6	most files that fit under the clip
onSend	(message: string, files: Attachment[]) => void \| Promise<void>	—	Called when the visitor uses send.
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
Paperclip Attach 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}"
    }
  }
}
```

Paperclip Attach, 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

Paperclip Attach, 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