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!

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

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

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.

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

Drag and drop ✨ Never roll your own. It's always a mistake. So what do we use?

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

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:

✨ 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:

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 🫡

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

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

third time I'm rebuilding this drag n drop interface and it's starting to shape up. switched from react-dnd to @dndkit by @clauderic_d and it's *chefs kiss*. looking forward to working on something else soon though :D

Spotted @dndkit in the wild 👀 Nice work @katherinecodes!

Fun fact: we couldn’t decide which tool to use to manage our roadmap so we built our own. We made this in about 2h using @reactjs for the UI, @tailwindcss for styling, @dndkit for the drag-and-drop behavior, and @liveblocks for the real-time collaboration side of things.

I broke down the Sortable tree example into a visualization of the different concepts of @dndkit being used to highlight how it all works. Each element in the tree uses the `useSortable` hook, which is an abstraction on top of the `useDraggable` and `useDroppable` hooks

Just tried using @dndkit in our product. The experience has been awesome. It's very intuitive, accessible, extremely extensible, and very easy to use. Best dnd library ever. If you haven't tried it yet, give it a try. You will not regret it. Thanks, @clauderic_d for @dndkit.

Someone built a sortable image grid with @dndkit today after having never used the library before, and it looks absolutely amazing ✨☺️ The images are from @unsplash I shared the code on @codesandbox if you're interested in how this was built: https://t.co/Frk5qnAZ2B

Always wanted to use that spell

Wingardium leviosa