My Experience Using dnd-kit in React and Next.js
For a long time, I avoided building drag-and-drop features in frontend projects π
Not because I did not need them.
Mostly because drag and drop always felt unnecessarily complicated.
When you think about implementing it, your brain immediately jumps to:
- animations
- sorting logic
- touch support
- accessibility
- performance
- state synchronization
and suddenly a simple UI interaction feels like a massive feature.
But recently, in one of my React and Next.js projects, I decided to finally try dnd-kit.
Honestly, it changed my perspective completely.
I used AI to help me with the initial setup and understanding some concepts like sortable contexts and drag events, but after that, working with the library felt surprisingly smooth.
And that's what impressed me most.
dnd-kit feels lightweight, modern, and flexible without becoming overwhelming.
It gives you the tools you need without forcing a huge architecture or complicated patterns on your app.
Things I Personally Liked About dnd-kit
- Very clean React-first API
- Lightweight and composable
- Works really well in React and Next.js projects
- Building sortable lists feels much simpler than expected
- Flexible enough for custom UI and interactions
- Good developer experience overall
Something Interesting I Noticed
When a library has a clean architecture and predictable patterns, AI becomes much more useful while learning it.
The generated examples were easier to understand, easier to debug, and easier to customize compared to many older drag-and-drop solutions.
If you are building things like:
- kanban boards
- sortable lists
- draggable cards
- dashboards
- reorderable tables
I definitely recommend taking a look at dnd-kit.
It ended up being much simpler and more enjoyable than I expected.
Top comments (3)
Drag-and-drop is the canonical "looks trivial, is a swamp" feature, so a genuinely simple approach is worth sharing. The trap people fall into is reaching for a heavy DnD library for what's often a few pointer events, and then fighting the library's abstractions; but the flip side is the genuinely hard parts that the simple approach has to still get right - keyboard accessibility (DnD is notoriously bad for non-mouse users), touch support, and not janking the main thread on drag. Simplicity is great as long as it doesn't quietly drop a11y, because that's the corner everyone cuts and regrets.
The meta-pattern I like: reach for the platform/primitive before the library, which usually leaves you with less to maintain and fewer abstractions to fight. It's the same lean instinct I bias toward building Moonshift, the thing I work on - a multi-agent pipeline that takes a prompt to a deployed SaaS - prefer the simplest thing that solves it over reflexive dependencies. Multi-model routing keeps a build ~$3 flat, first run free no card. Nice writeup. Does your simple approach handle keyboard/touch, or is it pointer-first with a11y as a follow-up? That's the line where "simple" either holds up or needs the library after all.
Thanks for the thoughtful comment.
By "simple", I meant the experience of working with dnd-kit, not that drag and drop itself is a simple problem.
What surprised me was how quickly I got a working solution without fighting the library or adding a lot of complexity to my code.
Touch support worked well in my use case, and you're absolutely right that accessibility, keyboard interactions, and performance are where things become much more challenging.
That's actually one of the reasons I liked dnd-kit. It handles a lot of those concerns while still feeling lightweight and easy to work with.
That distinction lands, simple-to-use is a real goal even when the implementation underneath isn't. The libraries that win optimize the developer's experience of the common case and keep the gnarly stuff possible behind an escape hatch. As long as keyboard/touch a11y rides along (the corner that's easy to drop when chasing a clean API) you've got the right target. Bookmarking this; the pursuit of a genuinely pleasant DnD API is underrated work.