Jelly Splitter, animated React component

A bill splitter where the bill is a slab of glossy watermelon jelly on a plate. Move over the jelly and a cleaver follows you; click or tap and it chops down, the slab splits there and the two pieces wobble apart, each one labelled with the next person and what they owe. Drag the handle in a gap to move the cut and the neighbouring pieces squash and stretch while the amounts follow, snapping to whole percents with a pull at every 5%. The small cross on a piece squishes it back into its neighbour, “Split evenly” glides every cut into place with a jiggle that runs left to right, and “Send requests” hands you the shares. Keyboard: Tab to a cut handle and use the arrow keys (1%, or 5% with Shift); “Add a cut” halves the biggest piece, and each piece's cross button merges it.

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.

Dinner at Nori

Friday, 8 November

$186.40

Total bill

Just Maya so far

Maya

$186.40100%

Click the jelly to cut a share.

Everyone pays

Maya$186.40

Jelly Splitter

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
total	number	186.4	the bill
currency	string	"$"	The currency shown in the component.
title	string	"Dinner at Nori"	The title shown in the component.
subtitle	string	"Friday	a second line under the title, e.g. the date
people	JellyPerson[]	—	who can be in, in the order the pieces are handed out (up to 6; more slices add guests)
defaultShares	{ personId: string; percent: number }[]	—	where to start: the pieces from left to right, each a person and their percent
onChange	(shares: JellyShare[]) => void	—	Called with the new value whenever the visitor changes it.
onRequest	(shares: JellyShare[]) => void	—	Called when the visitor uses request.
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
Jelly Splitter 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}"
    }
  }
}
```

Jelly Splitter, animated React component

Play with it

Dinner at Nori

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

Jelly Splitter, animated React component

Play with it

Dinner at Nori

Props

Add it to your project

Set up your project once

Connect the registry with your API key

More inputs & controls