---
title: "Exemplos"
description: "Demos ao vivo com o código — todo arquivo que você vê roda na página. Copie-os, ou abra-os no StackBlitz."
canonical_url: "https://zizigy.github.io/vue-dnd-kit/pt/docs/examples"
---

> Index of every page on this site: [llms.txt](https://zizigy.github.io/vue-dnd-kit/llms.txt)

Cada exemplo é um pequeno app Vue: um `index.vue` com o seu `DnDProvider`, e os componentes de
que ele precisa. As abas de código abaixo de uma demo são exatamente os arquivos que a fazem
rodar.

## Apps

Interfaces completas, do jeito que você as construiria: várias listas, regras, overlays e o
teclado trabalhando juntos.

<card-group>
<card icon="i-lucide-square-kanban" title="Quadro de projeto" to="/docs/examples/board">

Colunas que você reordena, limites de WIP, uma confirmação antes de Done, seleção múltipla e uma lixeira.

</card>

<card icon="i-lucide-calendar-days" title="Calendário semanal" to="/docs/examples/calendar">

Eventos arrastados entre dias e meias horas, encaixados na grade.

</card>

<card icon="i-lucide-folder-open" title="Gerenciador de arquivos" to="/docs/examples/file-manager">

Uma árvore de pastas e uma grade de arquivos: seleção por retângulo, drop em pastas, Alt para copiar.

</card>

<card icon="i-lucide-blocks" title="Editor de blocos" to="/docs/examples/block-editor">

Blocos no estilo Notion, movidos pelos handles, aninhados e arrastados de um menu "/" ou da barra
lateral.

</card>

<card icon="i-lucide-chess-knight" title="Xadrez" to="/docs/examples/chess">

Os lances legais se acendem, a peça na mão diz por que uma casa é recusada, um peão pergunta em
que vai se transformar, e um bot responde com arrastes de verdade.

</card>

<card icon="i-lucide-text-cursor-input" title="Construtor de formulários" to="/docs/examples/form-builder">

Campos do Nuxt UI a partir de uma paleta, colocados lado a lado em linhas, preenchidos em uma
prévia ao vivo e exportados como código Vue.

</card>

<card icon="i-lucide-pen-tool" title="Canvas de design" to="/docs/examples/design-canvas">

Frames e camadas em um canvas com zoom, guias inteligentes, Alt para duplicar e um painel de
camadas que é a árvore do design.

</card>

<card icon="i-lucide-layout-template" title="Construtor de páginas" to="/docs/examples/page-builder">

Seções que viram a coisa real sobre a página, elementos entre colunas, uma árvore de camadas
sobre os mesmos dados, edição inline.

</card>

<card icon="i-lucide-table-2" title="Tabela de dados" to="/docs/examples/data-table">

Uma tabela do Nuxt UI com 2.000 tarefas: virtualizada, pesquisável, ordenada pelas alças das linhas.

</card>
</card-group>

## Sitemap

See the full [sitemap](https://zizigy.github.io/vue-dnd-kit/sitemap.md) for all pages.