Drag and Drop with Dnd Kit and Shadcn/UI

This is a simple example of how to create a Drag and Drop for pills (of any widths) with Dnd Kit and Shadcn/UI.

Demo: https://shadcn-drag-and-drop.vercel.app/

Details

Dnd Kit

• Uses dnd-kit/core and dnd-kit/sortable with a line indicator for drop position.
• Width of the pills are calculated based on the width of the text in the container with padding.
• The pills are draggable and can be dropped into any position in the container.