[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-3813":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":23,"hasPages":23,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":32,"readmeContent":33,"aiSummary":34,"trendingCount":16,"starSnapshotCount":16,"syncStatus":35,"lastSyncTime":36,"discoverSource":37},3813,"dnd-kit","clauderic\u002Fdnd-kit","clauderic","The modern toolkit for building drag and drop interfaces","http:\u002F\u002Fdndkit.com",null,"TypeScript",17229,885,37,78,0,7,26,137,28,105.84,"MIT License",false,"main",[26,27,28,29,30,31],"drag","drag-and-drop","draggable","droppable","react","sortable","2026-06-12 04:00:19","\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fdndkit.com\">\n    \u003Cimg alt=\"@dnd-kit – the modern toolkit for building drag & drop interfaces\" src=\".github\u002Fassets\u002Fdnd-kit-hero-banner.svg\">\n  \u003C\u002Fa>\n\u003C\u002Fp>\n\u003Cp align=\"center\">\nA modern, lightweight, performant, accessible and extensible drag and drop toolkit for the web\n\u003C\u002Fp>\n\n## Features\n\n- **Framework agnostic core:** The architecture is built in layers — a framework-agnostic core (`@dnd-kit\u002Fabstract`), a DOM implementation (`@dnd-kit\u002Fdom`), and thin adapters for your framework of choice.\n- **Supports a wide range of use cases:** lists, grids, multiple containers, nested contexts, variable sized items, virtualized lists, 2D games, and more.\n- **Built-in support for multiple input methods:** Pointer, mouse, touch and keyboard sensors.\n- **Fully customizable & extensible:** Customize every detail — animations, transitions, behaviours, styles. Build your own sensors, collision detection algorithms, customize key bindings and more.\n- **Accessibility:** Keyboard support, sensible default ARIA attributes, customizable screen reader instructions and live regions built-in.\n- **Performance:** Built with performance in mind to support silky smooth animations.\n- **Sortable:** Need to build a sortable interface? Check out `@dnd-kit\u002Fdom\u002Fsortable`, a thin layer built on top of the core.\n\n\u003Ch2 align=\"left\">Getting started\u003C\u002Fh2>\n\n\u003Cp>\nChoose your preferred framework to get started:\n\u003C\u002Fp>\n\n\u003Cbr>\n\n\u003Ctable width=\"100%\" cellpadding=\"32\">\n\u003Ctr>\n\u003Ctd width=\"50%\" valign=\"top\">\n\u003Cbr>\n\u003Cimg src=\"https:\u002F\u002Fcdn.simpleicons.org\u002Fjavascript\u002FF7DF1E\" height=\"22\" alt=\"JavaScript\" \u002F>\n\u003Cbr>\n\n\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fdndkit.com\u002Fquickstart\">Vanilla\u003C\u002Fa>\u003C\u002Fstrong>\n\nBuild drag and drop interfaces using plain JavaScript\n\u003Cbr>\n\n\u003C\u002Ftd>\n\n\u003Ctd width=\"50%\" valign=\"top\">\n\u003Cbr>\n\u003Cimg src=\"https:\u002F\u002Fcdn.simpleicons.org\u002Freact\u002F61DAFB\" height=\"22\" alt=\"React\" \u002F>\n\u003Cbr>\n\n\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fdndkit.com\u002Freact\u002Fquickstart\">React\u003C\u002Fa>\u003C\u002Fstrong>\n\nBuild drag and drop interfaces using React components and hooks\n\u003Cbr>\u003Cbr>\n\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\n\u003Ctr>\n\u003Ctd width=\"50%\" valign=\"top\">\n\u003Cbr>\n\u003Cimg src=\"https:\u002F\u002Fcdn.simpleicons.org\u002Fvue.js\u002F4FC08D\" height=\"22\" alt=\"Vue\" \u002F>\n\u003Cbr>\n\n\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fdndkit.com\u002Fvue\u002Fquickstart\">Vue\u003C\u002Fa>\u003C\u002Fstrong>\n\nBuild drag and drop interfaces using Vue composables and components\n\u003Cbr>\u003Cbr>\n\n\u003C\u002Ftd>\n\n\u003Ctd width=\"50%\" valign=\"top\">\n\u003Cbr>\n\u003Cimg src=\"https:\u002F\u002Fcdn.simpleicons.org\u002Fsvelte\u002FFF3E00\" height=\"22\" alt=\"Svelte\" \u002F>\n\u003Cbr>\n\n\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fdndkit.com\u002Fsvelte\u002Fquickstart\">Svelte\u003C\u002Fa>\u003C\u002Fstrong>\n\nBuild drag and drop interfaces using Svelte primitives and components\n\u003Cbr>\u003Cbr>\n\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\n\u003Ctr>\n\u003Ctd width=\"50%\" valign=\"top\">\n\u003Cbr>\n\u003Cimg src=\"https:\u002F\u002Fcdn.simpleicons.org\u002Fsolid\u002F2C4F7C\" height=\"22\" alt=\"SolidJS\" \u002F>\n\u003Cbr>\n\n\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fdndkit.com\u002Fsolid\u002Fquickstart\">Solid\u003C\u002Fa>\u003C\u002Fstrong>\n\nBuild drag and drop interfaces using SolidJS hooks and components\n\u003Cbr>\u003Cbr>\n\n\u003C\u002Ftd>\n\n\u003Ctd width=\"50%\" valign=\"top\">\n\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftable>\n\n## Documentation\n\nVisit **[dndkit.com](https:\u002F\u002Fdndkit.com)** for full documentation, API reference, guides, and interactive examples.\n\n## Packages\n\n| Package                                    | Version                                                                                          | Description                  |\n| ------------------------------------------ | ------------------------------------------------------------------------------------------------ | ---------------------------- |\n| [`@dnd-kit\u002Fabstract`](packages\u002Fabstract)   | [![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@dnd-kit\u002Fabstract.svg)](https:\u002F\u002Fnpm.im\u002F@dnd-kit\u002Fabstract)   | Abstract core                |\n| [`@dnd-kit\u002Fcollision`](packages\u002Fcollision) | [![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@dnd-kit\u002Fcollision.svg)](https:\u002F\u002Fnpm.im\u002F@dnd-kit\u002Fcollision) | Collision detection          |\n| [`@dnd-kit\u002Fdom`](packages\u002Fdom)             | [![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@dnd-kit\u002Fdom.svg)](https:\u002F\u002Fnpm.im\u002F@dnd-kit\u002Fdom)             | Framework-agnostic DOM layer |\n| [`@dnd-kit\u002Fgeometry`](packages\u002Fgeometry)   | [![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@dnd-kit\u002Fgeometry.svg)](https:\u002F\u002Fnpm.im\u002F@dnd-kit\u002Fgeometry)   | Geometry utilities           |\n| [`@dnd-kit\u002Fhelpers`](packages\u002Fhelpers)     | [![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@dnd-kit\u002Fhelpers.svg)](https:\u002F\u002Fnpm.im\u002F@dnd-kit\u002Fhelpers)     | Helper functions             |\n| [`@dnd-kit\u002Freact`](packages\u002Freact)         | [![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@dnd-kit\u002Freact.svg)](https:\u002F\u002Fnpm.im\u002F@dnd-kit\u002Freact)         | React adapter                |\n| [`@dnd-kit\u002Fsolid`](packages\u002Fsolid)         | [![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@dnd-kit\u002Fsolid.svg)](https:\u002F\u002Fnpm.im\u002F@dnd-kit\u002Fsolid)         | SolidJS adapter              |\n| [`@dnd-kit\u002Fstate`](packages\u002Fstate)         | [![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@dnd-kit\u002Fstate.svg)](https:\u002F\u002Fnpm.im\u002F@dnd-kit\u002Fstate)         | Reactive state management    |\n| [`@dnd-kit\u002Fsvelte`](packages\u002Fsvelte)       | [![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@dnd-kit\u002Fsvelte.svg)](https:\u002F\u002Fnpm.im\u002F@dnd-kit\u002Fsvelte)       | Svelte adapter               |\n| [`@dnd-kit\u002Fvue`](packages\u002Fvue)             | [![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002F@dnd-kit\u002Fvue.svg)](https:\u002F\u002Fnpm.im\u002F@dnd-kit\u002Fvue)             | Vue adapter                  |\n\n## Contributing\n\nThis is a monorepo managed with [Turborepo](https:\u002F\u002Fturbo.build\u002F) and [bun](https:\u002F\u002Fbun.sh\u002F).\n\n```bash\n# Install dependencies\nbun install\n\n# Build all packages\nbun run build\n\n# Run dev mode\nbun run dev\n```\n\n## License\n\n[MIT](.\u002FLICENSE)\n","dnd-kit 是一个用于构建拖放界面的现代工具包。其核心功能包括框架无关的核心层、支持多种使用场景（如列表、网格、多容器等）、内置多种输入方法支持（指针、鼠标、触摸和键盘）以及高度可定制性和扩展性。该项目使用 TypeScript 编写，具有良好的性能和无障碍支持，适合需要创建流畅且易用的拖放交互体验的 Web 应用开发。无论是简单的拖拽排序还是复杂的2D游戏，dnd-kit 都能提供强大的支持。",2,"2026-06-11 02:56:27","top_language"]