Docs/Examples

Examples

Live demos with their code — every file you see runs on the page. Copy them, or open them in StackBlitz.

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.

Project board

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

Week calendar

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

File manager

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

Block editor

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

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.

Form builder

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

Design canvas

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

Page builder

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

Data table

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