Anatomy

The section has three layers. At the top, an optional header block (badge, h2, subtitle) fades in from below on viewport entry. Below that, a Reorder.Group wraps a vertical flex column. Each Reorder.Item is a rounded card containing a GripVertical drag handle on the left, an accent-colored Lucide icon, a bold title, and a muted description paragraph. The grid stays single-column and caps at max-w-3xl for readable line lengths.

How it works

Framer Motion's Reorder.Group takes a `values` prop (the current order array) and an `onReorder` callback that replaces it with the new sorted array. Each Reorder.Item receives the `value` it represents, an object reference, not an index. When a card is dragged, Framer Motion computes intersections with other items and fires onReorder in real time, producing a live-sorted list without manual index juggling. The `whileDrag` prop adds scale:1.03 and a box-shadow during the drag gesture; `transition` with spring stiffness 300 / damping 25 governs how the card settles after release.

How to build it in React

1. Set up the ordered state

   Store your items array in a useState hook. Pass the state value to Reorder.Group's `values` prop and the setter to `onReorder`. The group handles the rest, no index tracking needed on your side.

   const [items, setItems] = React.useState(initialItems);
   
   <Reorder.Group axis="y" values={items} onReorder={setItems}>
     {items.map((item) => (
       <DraggableCard key={item.id} item={item} />
     ))}
   </Reorder.Group>

2. Wrap each card in Reorder.Item

   Pass the item object itself as the `value` prop. Framer Motion uses reference equality to identify which item moved, so the value must be the same object reference that lives in the `values` array. Add `cursor-grab active:cursor-grabbing` for clear affordance.

   <Reorder.Item
     value={item}
     className="rounded-2xl border p-6 cursor-grab active:cursor-grabbing"
   >
     {/* card content */}
   </Reorder.Item>

3. Add spring physics on drag

   Use `whileDrag` to scale the card up slightly and cast a shadow. The `transition` spring config on the item governs how it snaps back into position when dropped. Keep stiffness high and damping moderate so the settle feels instant but not jarring.

   whileDrag={{
     scale: 1.03,
     boxShadow: "0 10px 40px rgba(0,0,0,0.1)",
   }}
   transition={{ type: "spring", stiffness: 300, damping: 25 }}

4. Resolve Lucide icons by name

   Import the entire Lucide namespace and write a small helper that returns the icon component by string name. Store the icon name in your data objects so the component stays purely presentational with no hard-coded imports per icon.

   import * as LucideIcons from "lucide-react";
   
   function getIcon(name?: string) {
     if (!name) return null;
     return (LucideIcons as unknown as Record<string, React.ElementType>)[name] ?? null;
   }

When to use it

Reach for this pattern on product dashboards where users personalize a feature list or priority order, onboarding checklists where sequence matters, or landing pages where you want to show flexibility and interactivity without a full drag-and-drop library. Skip it on purely informational pages where reordering carries no meaning, the affordance creates an expectation that the order is persisted or acted on. Make sure you save the new order to state (or a backend) when the interaction matters.

Used by

• Linear, Drag-to-reorder is core to issue and project priority management across the app.
• Notion, Every block in Notion is draggable with a grip handle, the same GripVertical affordance used here.
• Trello, Card drag-and-drop within and between columns is the product's primary interaction model.
• Framer, Reorderable layers panel and component lists throughout the design tool use spring-driven drag interactions.

FAQ