Repolode
Enviar
clauderic

clauderic/dnd-kit

Um toolkit moderno e leve de arrastar e soltar para a web, com um core independente de framework e adapters para React, Vue, Svelte e SolidJS.

Ver no GitHubSite
Estrelas
17,738
Forks
927
Issues abertas
134
Último commit
há 7 dias

O que é?

dnd-kit é um toolkit de arrastar e soltar para criar interfaces interativas na web. Ele é dividido em camadas: um core independente de framework (@dnd-kit/abstract), uma implementação para DOM (@dnd-kit/dom) e adapters leves para React, Vue, Svelte e SolidJS, além de uma opção em JavaScript puro.

O toolkit dá suporte a listas, grades, múltiplos contêineres, contextos aninhados, itens de tamanhos variados e listas virtualizadas. Ele inclui sensores de ponteiro, mouse, toque e teclado, e permite que desenvolvedores substituam os sensores, os algoritmos de detecção de colisão e as associações de teclas. Uma camada de ordenação (@dnd-kit/dom/sortable), criada sobre o core, atende a casos comuns de listas reordenáveis.

A acessibilidade é contemplada com suporte a teclado, atributos ARIA padrão, instruções personalizáveis para leitores de tela e regiões live. O projeto é escrito em TypeScript e distribuído sob a licença MIT.

Recursos principais

  • 01Core independente de framework, com adapters para React, Vue, Svelte e SolidJS
  • 02Sensores de ponteiro, mouse, toque e teclado incluídos
  • 03Dá suporte a listas, grades, múltiplos contêineres e listas virtualizadas
  • 04Sensores, detecção de colisão e associações de teclas personalizáveis
  • 05Camada de ordenação baseada no core para listas reordenáveis
  • 06Suporte a teclado e atributos ARIA padrão para acessibilidade

Casos de uso

  • Criar listas ordenáveis ou quadros no estilo kanban em um app React ou Vue
  • Criar grades ou layouts de arrastar e soltar com múltiplos contêineres
  • Adicionar reordenação por toque e teclado, com acessibilidade, a uma interface web

Início rápido

  1. 1

    Escolha seu framework e siga o guia de início rápido em dndkit.com

  2. 2

    Instale as dependências do monorepo com bun

    bun install
  3. 3

    Inicie o modo de desenvolvimento

    bun run dev

Tópicos

#drag-and-drop#react#vue#svelte#typescript#accessibility#sortable#ui-components#drag#draggable

Perguntas frequentes

O que é dnd-kit?
Um toolkit moderno e leve de arrastar e soltar para a web, com um core independente de framework e adapters para React, Vue, Svelte e SolidJS. dnd-kit é um toolkit de arrastar e soltar para criar interfaces interativas na web. Ele é dividido em camadas: um core independente de framework (@dnd-kit/abstract), uma implementação para DOM (@dnd-kit/dom) e adapters leves para React, Vue, Svelte e SolidJS, além de uma opção em JavaScript puro.
dnd-kit é gratuito? Qual é a licença?
dnd-kit é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
dnd-kit ainda é mantido?
Manutenção ativa. O último commit de dnd-kit foi em 15 de out. de 2026.
Para que posso usar dnd-kit?
Criar listas ordenáveis ou quadros no estilo kanban em um app React ou Vue Criar grades ou layouts de arrastar e soltar com múltiplos contêineres Adicionar reordenação por toque e teclado, com acessibilidade, a uma interface web
Como instalar dnd-kit?
Escolha seu framework e siga o guia de início rápido em dndkit.com Instale as dependências do monorepo com bun: bun install Inicie o modo de desenvolvimento: bun run dev
Onde consigo dnd-kit?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/clauderic/dnd-kit

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados