dnd-kit vs Puck
Which should you use? A side-by-side look at what each one does, who it suits, what it costs, how hard it is to set up, and where each falls short.
Open source · MIT
A toolkit for building drag and drop interfaces on the web, with adapters for several frameworks.
Open source · MIT
A visual drag-and-drop page editor you embed in your own React app.
The short answer
Choose dnd-kit if you need…
- Developers building sortable lists or grids in a React, Vue, Svelte, or Solid app
- Teams that want keyboard and screen reader support built into drag and drop
- Developers who need to customize sensors, collision detection, or animations
- Projects that want a lightweight, MIT-licensed drag and drop dependency
Choose Puck if you need…
- React developers adding a page builder to an existing app
- Teams that want content editors to arrange pre-approved components visually
- Projects using Next.js or React Router, which the README mentions as supported recipes
- Companies that need a self-hosted, MIT-licensed editor
Side-by-side
| dnd-kit | Puck | |
|---|---|---|
| Type | Library | Library |
| Price | Free and open source | Free and open source |
| Licence | MIT | MIT |
| GitHub stars | 17.8k | 13.6k |
| Setup difficulty | Intermediate | Intermediate |
| How you get it | Install with a package manager | Install with a package manager |
| Main language | TypeScript | TypeScript |
| Last code update | 5 days ago | 8 days ago |
What each one is
dnd-kit
dnd-kit is a set of JavaScript packages that let developers add drag and drop to web pages and apps. It has a framework-agnostic core and a DOM layer, plus thin adapters for React, Vue, Svelte, and SolidJS, with plain JavaScript also supported. It is used to build things like sortable lists, grids, and multi-container layouts.
Puck
Puck is an open-source React component that gives your app a visual editor, so people can build pages by dragging and arranging components you define. You control the components, the data is yours to store, and the README says there is no vendor lock-in. It is released under the MIT license.
Best for
dnd-kit
- Developers building sortable lists or grids in a React, Vue, Svelte, or Solid app
- Teams that want keyboard and screen reader support built into drag and drop
- Developers who need to customize sensors, collision detection, or animations
- Projects that want a lightweight, MIT-licensed drag and drop dependency
Puck
- React developers adding a page builder to an existing app
- Teams that want content editors to arrange pre-approved components visually
- Projects using Next.js or React Router, which the README mentions as supported recipes
- Companies that need a self-hosted, MIT-licensed editor
Strengths
dnd-kit
- Supports pointer, mouse, touch, and keyboard input out of the box
- Framework-agnostic core with adapters for several popular frameworks
- Ships with default ARIA attributes and customizable screen reader instructions
Puck
- MIT license, which the README says suits internal and commercial use
- Built on React, so it works with your existing components
- You own the data and can store it wherever you like
Not ideal for
dnd-kit
- Non-programmers looking for a ready-made tool; it is a code library that must be integrated into a project
- Projects that only need simple file upload drop zones, since the README focuses on element dragging and does not cover that case
Puck
- People who want a ready-made website builder with hosting and no coding, since Puck is a library you integrate into your own code
- Non-React projects, because Puck is described as a React component
- Those who need the README-documented support beyond community channels, which is limited to GitHub issues, Discord, or a paid consultancy call
Trade-offs
dnd-kit
- As a toolkit, it requires writing code and understanding its layered package structure
- The README is truncated and points to external docs for full API details, so this entry relies on limited information
Puck
- Requires React and coding to set up; it is not a finished no-code tool
- The README is truncated and does not detail every feature or limit
- Community support is described mainly through Discord and GitHub issues
Getting started
dnd-kit
Clone the repository (contributors)
git clone https://github.com/clauderic/dnd-kitInstall dependencies (monorepo, from README)
bun installPuck
Install the package
npm i @puckeditor/core --saveOr create a pre-configured app
npx create-puck-app my-appFrequently asked questions
What is the difference between dnd-kit and Puck?
dnd-kit: A toolkit for building drag and drop interfaces on the web, with adapters for several frameworks. Puck: A visual drag-and-drop page editor you embed in your own React app. dnd-kit suits developers building sortable lists or grids in a react, vue, svelte, or solid app, while Puck suits react developers adding a page builder to an existing app.
Are dnd-kit and Puck free?
dnd-kit: Free and open source. Puck: Free and open source.
Is dnd-kit or Puck more popular?
dnd-kit has more GitHub stars (17.8k) than Puck (13.6k). Popularity isn't the same as fit — check which one matches your use case above.
What are other alternatives to dnd-kit and Puck?
Other options people compare them with include React DnD, interact.js, Sortable, Muuri, React-Grid-Layout.
Keep comparing
Built from our catalogue entries for both products: open-source details come from each project's README (AI-assisted, refreshed weekly) and GitHub data; AI-tool details are editorial. Spotted something wrong? Let us know from either product's page.