앱에 직접 복사해 넣어 사용하는, 접근성과 커스터마이징을 고려한 shadcn/ui의 비공식 Svelte 포트입니다.
clauderic/dnd-kit
웹용 최신 경량 드래그 앤 드롭 툴킷으로, 프레임워크에 종속되지 않는 코어와 React, Vue, Svelte, SolidJS 어댑터를 제공합니다.
- 스타
- 17,738
- 포크
- 927
- 열린 이슈
- 134
- 마지막 커밋
- 7일 전
어떤 프로젝트인가요?
dnd-kit은 웹에서 인터랙티브한 인터페이스를 만들기 위한 드래그 앤 드롭 툴킷입니다. 프레임워크에 종속되지 않는 코어(@dnd-kit/abstract), DOM 구현(@dnd-kit/dom), React, Vue, Svelte, SolidJS용 얇은 어댑터로 구성되어 있으며, 순수 JavaScript로도 사용할 수 있습니다.
목록, 그리드, 여러 컨테이너, 중첩된 컨텍스트, 크기가 제각각인 항목, 가상화된 목록을 지원합니다. 포인터, 마우스, 터치, 키보드 센서를 기본 제공하며, 센서와 충돌 감지 알고리즘, 키 바인딩을 개발자가 교체할 수 있습니다. 코어를 기반으로 일반적인 순서 변경 가능 목록을 위한 정렬 레이어(@dnd-kit/dom/sortable)도 제공합니다.
키보드 지원, 기본 ARIA 속성, 사용자 지정 가능한 스크린 리더 안내 문구와 라이브 영역을 통해 접근성을 지원합니다. TypeScript로 작성되었으며 MIT 라이선스로 배포됩니다.
핵심 기능
- 01프레임워크에 종속되지 않는 코어와 React, Vue, Svelte, SolidJS 어댑터
- 02포인터, 마우스, 터치, 키보드 센서 기본 제공
- 03목록, 그리드, 여러 컨테이너, 가상화된 목록 지원
- 04센서, 충돌 감지, 키 바인딩 사용자 지정 가능
- 05순서 변경 가능 목록을 위한 코어 기반 정렬 레이어
- 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
요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.
관련 프로젝트
다크 모드와 Next.js RSC를 지원해 웹 앱을 빠르게 만들 수 있는 접근성 중심의 React 컴포넌트 라이브러리이자 디자인 시스템입니다.
React Aria와 Tailwind CSS v4를 기반으로 한 React UI 컴포넌트 라이브러리로, 이전 이름은 NextUI입니다.
디자인 시스템과 웹 앱을 만들기 위한, 스타일이 지정되지 않은 접근성 높은 React UI 프리미티브 오픈소스 모음입니다.
React 19과 StyleX 기반의 오픈 소스 React 디자인 시스템으로, 접근성 높은 컴포넌트 150개 이상과 테마, CLI를 제공합니다.
맞춤형 디자인 시스템 구축을 위한 접근성 높은 UI 기본 요소를 제공하는 스타일 없는 React 컴포넌트 라이브러리입니다.