dnd kit

There’s a new kit on the block. A modern, lightweight, performant, accessible and extensible drag & drop toolkit for React.

[Tristan Rhodes @tristanbob]

Did you know Tanstack (the one and only) also provides the best visualization of NPM statistics?

I submitted a PR to include drag and drop libraries so you can see how their popularity has changed over time.

In short, @dndkit is now the favorite by a wide margin.

[brendan @brendonovich]

tab transitions, courtesy of @dndkit

[define @define_app]

Underrated drag and drop UX detail:

Slightly rotate items while you drag them. It feels physical, playful, and instantly clear what’s happening.

TBF, drag and drop is sooo tricky to nail. At define we use @dndkit. Thank you @clauderic_d!

[ReUI @reui_io]

Free @shadcn Data Grid with 20 advanced examples built with @tan_stack table and @dndkit:

- Wrapper for TanStack table
- Fully customizable table, row & cell
- Drag & drop: rows/columns
- Pinnable & movable columns
- Local & remote data support
- Rows selections
- Movable columns
- Columns visibility
- Sticky header
- Horizontal & vertical scrolling
- Expandable rows and more...

[dnd kit @dndkit]

@puruvjdev @ClintFix https://t.co/APujOaSbyL

[Claudéric Demers @clauderic_d]

Just open-sourced PositionObserver – the missing observer to detect position, size & visibility changes.

⚡️ Async & efficient — zero polling, powered by native observers
🎯 Track elements relative to viewport or any root element

Try it out 👉 npm install position-observer

[Kevin Thomas Van Cott @KevinVanCott]

I just updated the TanStack Table drag and drop examples to use @dndkit along with a new column ordering guide with recommendations on how to achieve best results when combining TanStack React Table with DnD libraries.

[Eelco Wiersma @eelcodotdev]

@dndkit is simply amazing. Building this new sortable task list for @saas_js blocks.

[Brotzky @brotzky]

Drag and drop ✨

Never roll your own. It's always a mistake.

So what do we use?

[Eric Lee (ayrock) @ItsAyrock]

dndkit is great btw

I’ve been implementing database-persisted ordering, and @dndkit has been a breeze to work with - including optimistic updates

https://t.co/VY1x71JawD

[kliton @KlitonBare]

Hi everyone!
Just a quick preview of the next video project: PageForm.
It's a fullstack drag-and-drop web form builder that allows us to create forms, share them, and collect submissions.

We will also implement a custom ( and simple ) validation logic for our forms.

Stack:
- @nextjs ( with server actions )
- @reactjs @typescript
- @tailwindcss
- @shadcn /ui ( what an amazing library )
- @dndkit
- @prisma
- @vercel (deploy and postgresql storage )

This is not a clone: I've just made this project for the upcoming video.

I plan (and hope) to release the video in 1 week.
Hope you like it, and let me know what you think 😃

Ps. Video will be available on my youtube channel: codewithkliton

[dnd kit @dndkit]

@peteduncanson This is something that is actively being worked on, expect things to be easier to setup and more robust in the near future. Refer to this post for more details https://t.co/TNXxcGcPjS

[dnd kit @dndkit]

@pagebakers Using index as key perhaps? As opposed to a stable key

[dnd kit @dndkit]

@philkellr @phuctm97 Touch devices are supported yes. There are two sensors that can be used, either the Pointer sensor which supports any pointer input (including touch), or a dedicated TouchSensor

https://t.co/0lLvMRHpWn

[kxlaa @kxlaa_]

✨ First Article

Learn how to use the @dndkit library to build beautiful & accessible drag-and-drop interactions in React: https://t.co/fVNfNPjShD

The article includes many interactive demos that should help explain the concepts:

[Zach Capshaw @zachcapshaw]

Finally got drag and drop working in Daybuilder 🎉

I was worried this would be really tricky. But @dndkit actually made it quite simple. h/t to @clauderic_d for a building an awesome open source library for this 🫡

[Steven Fabre @stevenfabre]

Blocks can be reordered via drag-and-drop. Thanks to the awesome @dndkit library.

[dnd kit @dndkit]

@maccaw The cool kids use https://t.co/33WiDhJ1Mw 😎

[Adam Fuhrer @adamfuhrer]

Album Rotation - Organize and visualize your favorite albums 💿

https://t.co/JjyngMo4dL

Uses:
- @dndkit for drag & drop (https://t.co/bAYAOrJUF7)
- React Spring for delete animation (https://t.co/dmTW2IwmMk)
- Local storage for persisting album artwork

[dnd kit @dndkit]

@codylindley @react @clauderic_d Nice! You should add the CSS property `touch-action: none` on your board pieces so the browser doesn’t try to scroll the page when pieces are picked up on mobile. You can learn more about that here: https://t.co/Law30R81XD