Swapy

A framework-agnostic tool that converts any layout into a drag-to-swap one with just a few lines of code.

Default

4.875

Project Views

last year

New Users

57K

+10%

We Build Future of

Design Industry

Team of passionate designers and developers

Daily New clients

54+40%

UI-Layouts

Font

SK-Modernist

Smart Digital

Agency For Your

Business

Trusted By

500+ Users

Don't Take Our Words For It...

Cards balance

$ 12,457

Card HolderExpires

Robert Fox07/22

Handle

⚡ Turbocharge Everything

🧠 Brainy Decisions

🌈 Magical Moments

🚀 Innovate Like Crazy

💰 Save Big, Smile More

🔮 AI Vibes Only

Opacity

Streamline Operations

Decision Making

Customer Experiences

Accelerate Innovation

Reduce Costs

Future-Proof

Raws

Installation

npx uilayouts@latest add swapy

Structure

1<SwapyLayout id="swapy" >
2  <SwapySlot id="slot-1">
3    <SwapyItem id="item-1">
4      <DragHandle />
5      Item 1
6    </SwapyItem>
7    <SwapyItem id="item-2">
8      <DragHandle />
9      Item 2
10    </SwapyItem>
11    <SwapyItem id="item-3">
12      <DragHandle />
13      Item 3
14    </SwapyItem>
15  </SwapySlot>
16</SwapyLayout>

Props

SwapyLayout Props

Props	Type	Default	Description
`id`	`string`	—	A unique identifier for the layout container.
`enable`	`boolean`	—	Whether to enable drag-and-drop (currently unused in logic).
`onSwap`	`(event: { newSlotItemMap: { asArray: SlotItemMapArray } }) => void`	—	Callback fired when an item is swapped.
`config`	`Partial<{ animation: "dynamic" \| "spring" \| "none"; continuousMode: boolean; manualSwap: boolean; swapMode: "hover" \| "drop"; autoScrollOnDrag: boolean; }>`	`{}`	Configuration object for swapy behavior.
`className`	`string`	—	Additional class names to apply to the layout container.
`children`	`React.ReactNode`	—	Child components (usually `SwapySlot`s containing `SwapyItem`s).

SwapyItem Props

Prop	Type	Default	Description
`id`	`string`	—	Unique identifier for the draggable item.
`className`	`string`	—	Additional class names.
`children`	`React.ReactNode`	—	Content to render inside the draggable item.
`dragItemOpacity`	`number` (10–100)	`100`	Tailwind opacity value applied when item is being dragged (e.g., 50 = 50%).

SwapySlot Props

Prop	Type	Default	Description
`id`	`string`	—	Unique identifier for the slot (drop target).
`className`	`string`	—	Additional class names.
`children`	`React.ReactNode`	—	Content to render inside the slot.

DragHandle Props

Prop	Type	Default	Description
`className`	`string`	—	Optional class names for the handle.

Buy Me A Coffee Drag Items