Drag and drop components

Spec

Create reusable drag and drop components with radix-ui, react-dnd and tailwindcss. Radix-ui is already installed. You must create the components file drag-and-drop.tsx in apps/www/registry/ui/. Read CONTRIBUTING.md for more details.

drag-and-drop.tsx must export 3 components:

<DragAndDrop>: It is the provider of drag and drop system
<Draggable>: It is component we want to drag. It must be used in <DragAndDrop>
<DropZone>: It is component will receive dropped component. It must be used in <DragAndDrop>

Demo Design

After creation of components, create a demo in apps/www/registry/example/drag-and drop-demo.tsx and add it in apps/www/app/(sink)/page.tsx

Usage

Components usage must be like:

<DragAndDrop>
  <Draggable>
    <span> Draggable text <span>
  </Draggable>
  <DropZone>
    <span> Drop here </span>
  </DropZone>
</DragAndDrop>

<DragAndDrop>
  <DropZone>
    <Draggable>
      <span> Draggable text <span>
    </Draggable>
  </DropZone>
</DragAndDrop>

Note

Each components may have props. We want to make them headless as possible.

keky-tech / components