---
title: "Examples"
description: "Live demos with their code — every file you see runs on the page. Copy them, or open them in StackBlitz."
canonical_url: "https://zizigy.github.io/vue-dnd-kit/docs/examples"
---

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

Each example is a small Vue app: an `index.vue` with its `DnDProvider`, and the components it
needs. The code tabs under a demo are the very files that run it.

## Apps

Whole interfaces, the way you would build them: several lists, rules, overlays and the keyboard
working together.

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

Columns you reorder, WIP limits, a confirmation before Done, multi-select and a trash.

</card>

<card icon="i-lucide-calendar-days" title="Week calendar" to="/docs/examples/calendar">

Events dragged across days and half-hours, snapped to the grid.

</card>

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

A folder tree and a grid of files: select with a rubber band, drop on folders, Alt to copy.

</card>

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

Notion-like blocks moved by their handles, nested, and dragged in from a "/" menu or the
sidebar.

</card>

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

Legal moves light up, the piece in hand says why a square is refused, a pawn asks what it
becomes, and a bot plays back with real drags.

</card>

<card icon="i-lucide-text-cursor-input" title="Form builder" to="/docs/examples/form-builder">

Nuxt UI fields from a palette, set side by side in rows, filled in a live preview and
exported as Vue code.

</card>

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

Frames and layers on a zoomable canvas, smart guides, Alt to duplicate, and a layers panel
that is the design's tree.

</card>

<card icon="i-lucide-layout-template" title="Page builder" to="/docs/examples/page-builder">

Sections that turn into the real thing over the page, elements between columns, a layers
tree on the same data, inline editing.

</card>

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

A Nuxt UI table of 2,000 tasks: virtualized, searchable, sorted by its rows' grips.

</card>
</card-group>

## Sitemap

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