shadcn/ui 的 Svelte 社区移植版,提供可访问、可定制、可直接复制到项目中的组件。
clauderic/dnd-kit
一个现代、轻量的网页拖放工具包,核心与框架无关,并提供 React、Vue、Svelte、SolidJS 适配层。
- Star
- 17,738
- Fork
- 927
- 未关闭 Issue
- 134
- 最近提交
- 7天前
这是什么?
dnd-kit 是一个用于在网页中构建拖放交互界面的工具包。它采用分层设计:与框架无关的核心(@dnd-kit/abstract)、DOM 实现(@dnd-kit/dom),以及针对 React、Vue、Svelte、SolidJS 的轻量适配层,也可以直接用原生 JavaScript 使用。
它支持列表、网格、多容器、嵌套上下文、尺寸不一的元素和虚拟列表等场景,内置指针、鼠标、触摸和键盘传感器。开发者可以自定义传感器、碰撞检测算法和键位绑定。针对常见的可排序列表,项目还提供了基于核心构建的 sortable 模块。
在无障碍方面,它提供键盘操作、默认 ARIA 属性、可自定义的屏幕阅读器提示和实时区域。项目使用 TypeScript 编写,采用 MIT 许可证。
核心功能
- 01与框架无关的核心,并提供 React、Vue、Svelte、SolidJS 适配层
- 02内置指针、鼠标、触摸和键盘传感器
- 03支持列表、网格、多容器和虚拟列表
- 04可自定义传感器、碰撞检测和键位绑定
- 05基于核心构建的 sortable 模块,用于可重排列表
- 06提供键盘操作和默认 ARIA 属性等无障碍支持
适用场景
- 在 React 或 Vue 应用中实现可排序列表或看板式界面
- 构建多容器的拖放网格或布局
- 为网页界面添加支持触摸和键盘操作的重新排序功能
快速上手
- 1
选择你的框架,并按照 dndkit.com 上的快速入门指南操作
- 2
使用 bun 安装仓库依赖
bun install - 3
启动开发模式
bun run dev
标签
常见问题
- dnd-kit 是什么?
- 一个现代、轻量的网页拖放工具包,核心与框架无关,并提供 React、Vue、Svelte、SolidJS 适配层。 dnd-kit 是一个用于在网页中构建拖放交互界面的工具包。它采用分层设计:与框架无关的核心(@dnd-kit/abstract)、DOM 实现(@dnd-kit/dom),以及针对 React、Vue、Svelte、SolidJS 的轻量适配层,也可以直接用原生 JavaScript 使用。
- dnd-kit 可以免费使用吗?用的什么许可证?
- dnd-kit 以 MIT 许可证开源。用于商业产品前,请先确认许可证条款。
- dnd-kit 还在维护吗?
- 活跃维护中。dnd-kit 最近一次提交是在 2026年10月15日。
- dnd-kit 适合用来做什么?
- 在 React 或 Vue 应用中实现可排序列表或看板式界面 构建多容器的拖放网格或布局 为网页界面添加支持触摸和键盘操作的重新排序功能
- dnd-kit 怎么安装和运行?
- 选择你的框架,并按照 dndkit.com 上的快速入门指南操作 使用 bun 安装仓库依赖: bun install 启动开发模式: bun run dev
- 在哪里获取 dnd-kit?
- 源代码和安装说明在 GitHub 上:https://github.com/clauderic/dnd-kit
概要由 AI 根据项目 README 生成;GitHub 数据每日更新。
相关项目
9199575TypeScriptMIT更新于 昨天
面向 React 的无障碍组件库与设计系统,用于快速构建 Web 应用,支持深色模式和 Next.js RSC。
4.1万3652TypeScriptMIT更新于 4天前
基于 React Aria 与 Tailwind CSS v4 构建的 React UI 组件库,前身为 NextUI。
3.1万2237TypeScriptApache-2.0更新于 4天前
一套开源的无样式、注重无障碍的 React UI 基础组件,用于构建设计系统和 Web 应用。
1.9万1277TypeScriptMIT更新于 7天前
基于 React 19 与 StyleX 构建的开源设计系统,提供 150 多个无障碍组件、主题和 CLI。
1.4万1180TypeScriptMIT更新于 前天
无样式的 React 无障碍 UI 组件库,用于构建自定义设计系统。
1.1万582TypeScriptMIT更新于 昨天