Pro

Magic plus

A list with an add button you can drag: drop the plus between two rows and the new item goes exactly there, the rows parting to show where while you move. A tap adds at the end.

Pro

pnpm dlx shadcn@latest add @caliper/magic-plus

Launch week

Drag the + between two to-dos, or tap it to add at the end.

Installs components/ui/magic-plus.tsxDepends on lucide-reactMotion none in component source

When to use

Use it for

To-do lists, outlines and checklists where position matters.
Touch-first lists where inserting in the middle is otherwise fiddly.

Skip it when

Lists sorted automatically; position would be ignored.
Very long lists that scroll while dragging.

Decisions

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

Stable gap: The insertion point is measured against rows as laid out, not as parted, so the gap does not chase the pointer.
Springs home: The button returns to its corner on the settle curve after every drag, dropped or not.
Keys choose the place: Arrow keys on the button walk the insertion point, Enter adds there and Escape cancels; the place is announced.

Installation

terminal

pnpm dlx shadcn@latest add @caliper/magic-plus

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx

import { MagicPlus } from "@/components/ui/magic-plus"

The worked example comes with Pro

The 56-line example behind the preview opens here, ready to copy.

576 Pro parts, blocks and page templates, all with source
$199 once, with a year of updates. What you have stays yours
A full refund within 14 days if it is not for you

Checking your licence…

API reference

MagicPlus

component

Also accepts the native props of its root element and a ref.

PropTypeDefaultDescription

items *MagicPlusItem[]—

onAdd *(index: number) => void—Insert a new item at this index (items.length means at the end).

labelstring"Items"Names the list for assistive technology.

addLabelstring"Add item"Accessible name of the add button.

It is built on native elements and keeps aria-label, aria-hidden and aria-live in step with state. Changes that matter are announced through a live region.

KeyBehaviour

↑Moves to the previous item or value.

↓Moves to the next item or value.

EscapeCloses or cancels, then returns focus to where it came from.

EnterActivates the focused control.

SpaceActivates the focused control.

Motion

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.