Context Menu, animated React component

The right-click menu, made of liquid. Right-click a file, or press and hold on a phone, or press Shift+F10, and a drop forms under the pointer and flows out into the menu while the drop is absorbed. The highlight glides from row to row, and Move To buds a submenu off the side that snaps free like a droplet. Every action works: rename in place, duplicate, copy a link, pin to the top, favourite, tag, move into a folder (the file flies in and the folder bounces) or move to Trash with Undo. On close the menu drains back into the point it came from. Arrow keys, Enter and Escape work throughout. Until you touch it, it plays a few right-clicks by itself.

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.

Q4 Launch

6 items

Right-click a file

Context Menu

Window title

Right-click 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
files	FileItem[]	Six sample files	The items in the grid. kind is one of pdf, sheet, image, video or folder; a folder can carry a count.
title	string	"Q4 Launch"	The window title, also used in the grid's accessible label.
autoplay	boolean	false	Plays a few right-clicks by itself until the first interaction.
onAction	(action: MenuAction, file: FileItem, detail?: string) => void	—	Fires for every action, after the grid has updated. detail depends on the action: the previous name for rename, the copy's id for duplicate, the link for link, the tag name for tag and the folder id for move.
onChange	(files: FileItem[]) => void	—	Called with the whole list after any change.
className	string	—	Extra classes for the outer wrapper.

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
Context Menu 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}"
    }
  }
}
```

Pro
New
Liquid Send
Pro
New
Folder Tree
Pro
New
Consent Dock
Pro
New
Liquid Pagination

Context Menu, animated React component

Play with it

Q4 Launch

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

Context Menu, animated React component

Play with it

Q4 Launch

Props

Add it to your project

Set up your project once

Connect the registry with your API key

More inputs & controls