Skip to content

NewMCP server for your coding agent. Set it up ›

Nexus UI
Get Pro

Peel Delete, animated React component

Hold to delete, where holding peels the note off like a sticker. Press and hold the bin and the note's corner lifts, then the fold runs in across it, the paper back of the curl showing and its shadow falling on the note, with a rasp that follows the speed of the peel. Let go early and it sticks back down with a pat. Hold all the way and it rips off like a plaster in one continuous pull, leaving the patch where it was stuck. The bin turns into Undo with the time left drawn round it, and Undo slides the note back and smooths it flat. Space or Enter holds from the keyboard, and the bin's label says to press and hold.

  • Pro
  • Inputs & Controls
  • 3D
  • Spring

A rasp that follows the speed of the peel, a pat when it sticks back down, a rip and a rush of air when it comes free, and a soft slide and chime on Undo. 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.

Notes

3 notes
  • Groceries9:41

    Oat milk, lemons, rye bread

  • Gate codeYesterday

    4471, then the bell on the left

  • Book clubMon

    Chapters six to nine by Thursday

Hold the bin to peel a note off.

Props

PropTypeDefaultWhat it does
items{ id: string; title: string; text?: string; time?: string; color?: string }[]—The notes. Color is the sticker's paper colour.
onDelete(item) => void—Called when a note is really gone, after the undo window closes.
holdMsnumber1000How long to hold the bin, in milliseconds.
undoSecondsnumber5How long Undo stays.
titlestring"Notes"The card's heading.
enableSoundbooleantrueA rasp that follows the peel, a pat when it sticks back and a rip when it comes free. They also follow the site-wide sound switch.
volumenumber0.8Sound level, 0 to 1.
autoplaybooleanfalsePeels a note and undoes it 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

    Peel Delete 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 Peel Delete works

Hold to delete, where holding peels the note off like a sticker. Press and hold the bin and the note's bottom right corner lifts, then the fold runs in across it, the paper back of the curl showing and its shadow falling on the note, with a rasp that follows the speed of the peel. Let go early and it sticks back down with a pat.

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

Peel Delete questions

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

A rasp that follows the speed of the peel, a pat when it sticks back down, a rip and a rush of air when it comes free, and a soft slide and chime on Undo. 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