Draggable Card List

An interactive, fluid Draggable Card List component featuring spring-driven reordering (in a GSAP build and a Motion build that move identically), right-side grip handles, light pastel badges with borders, left accent bars, and dynamic hover border color shifts.

Variations

Classic Card List

Reorderable cards with right-side drag grip handles, dynamic border hover color shift, and pastel bordered badges.

Modern Ambient Tint Card List

Reorderable cards with subtle ambient gradient tones, glowing left accent bar, separated footer, floating grip handles, and dynamic hover border color shift.

Installation

New project? Follow the installation guide to set up Tailwind CSS, shadcn, the cn helper and lucide-react, register the @algorize-ui registry once, then copy your styles from the Themes page.

Two builds, same props and file — install one.

Install Draggable Card List

npx shadcn@latest add @algorize-ui/draggable-card-list

components/custom/draggable-card-list.tsx is written into your project. Copy any snippet from a Usage tab above and it runs.

Install dependencies

Step 1 installs this for you. Run it yourself only if you are adding Draggable Card List to an existing project by hand. The cn helper and lucide-react are not listed — the installation guide covers them once for every component.

gsap is an npm package.

npm install gsap

Features

Butter-Smooth Spring Reordering: Cards lift, swap and glide into place on springs. Ships as a GSAP build (the default) and a Motion build on its Reorder engine — pick either from the Code tab; both reorder on the same rules with the same springs.
2 Distinct Card Variants: Supports "classic" (clean cards with border hover shift) and "modern" (ambient gradient tone with glowing accent strip & separated footer).
Dynamic Hover Border Shift: Automatically highlights each card's border matching its individual accent color upon hover.
Subtle Pastel Badges: Lightweight semi-transparent badge backgrounds with subtle borders (bg-amber-500/10 text-amber-700 border border-amber-500/30).
Right-Side Grip Handles: Dedicated drag handles prevent accidental drag triggers on text selection.

Props Reference: DraggableCardList

Prop	Type	Default	Description
`items`	`DraggableCardItem[]`	`DEFAULT_ITEMS`	Array of card item objects to display and reorder.
`variant`	`"classic" \| "modern"`	`"classic"`	Design style variant of the cards.
`onReorder`	`(newItems: DraggableCardItem[]) => void`	`undefined`	Callback fired when the list order changes.
`onToggleComplete`	`(id: string \| number, completed: boolean) => void`	`undefined`	Callback fired when a card's completion checkbox is toggled.
`title`	`string`	`undefined`	Optional title heading text rendered above the list.
`subtitle`	`string`	`undefined`	Optional sub-heading text rendered under the title.
`dragHandlePosition`	`"right" \| "left"`	`"right"`	Position of the grip handle icon on each card.
`enableCheckboxes`	`boolean`	`false`	Toggles completion checkboxes on cards.
`enableBadges`	`boolean`	`true`	Toggles category badges on cards.