> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Introducing Drag and Drop

export const BlogMeta = ({date, author, tags}) => {
  const formatList = items => {
    if (!Array.isArray(items)) return items;
    if (items.length === 1) return items[0];
    if (items.length === 2) return `${items[0]} & ${items[1]}`;
    return `${items.slice(0, -1).join(", ")}, & ${items[items.length - 1]}`;
  };
  return <div className="flex flex-wrap items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
      <span>{date}</span>
      <span>|</span>
      <span>{formatList(author)}</span>
      {tags && tags.length > 0 && <>
          <span>|</span>
          <div className="flex flex-wrap gap-1.5">
            {tags.map(tag => <span key={tag} className="px-2 py-1 rounded bg-gray-100 dark:bg-neutral-800 text-xs">
                {tag}
              </span>)}
          </div>
        </>}
    </div>;
};

<div style={{ position: "relative", paddingBottom: "56.25%", height: 0 }}>
  <iframe src="https://www.loom.com/embed/6bba3414923542c5a6ee733dcc120110" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }} />
</div>

<BlogMeta date="December 17, 2025" author="James Coyle" tags={["Design & Engineering", "Figma", "New Features", "Web"]} />

Anvil2 has released a set of drag and drop components, available for immediate use.

Anvil now provides a drag and drop solution for design system consumers. Starting today, designers can begin assembling drag and drop experiences through the Anvil Figma library, and developers can assemble pre-made sorting solutions, or roll their own solution using our base UI components.

## How Drag and Drop works in Anvil

We've developed drag and drop for Anvil with flexibility in mind, offering two distinct approaches: Dnd, a foundational set of low-level UI building blocks, and Dnd Sort, a more opinionated solution for common sorting and bucketing needs.

<Frame>
  <div className="w-full h-full bg-[#FFFFFF] p-2 rounded flex items-center justify-center">
    <img src="https://mintcdn.com/servicetitan/WNDNlpam1n3RauQR/images/blog/dnd/how-dnd-works.gif?s=b0cadccaaa0b48c2980d921b09965410" alt="Animation of how Drag and Drop works in Anvil2" width="808" height="480" data-path="images/blog/dnd/how-dnd-works.gif" />
  </div>
</Frame>

### Dnd

Dnd provides a set of standardized UI components needed to create a drag and drop experience. Critically, Dnd on its own lacks functionality or an underlying library. For a design system consumer, Dnd serves to build drag and drop experiences which can't be done with Anvil's more opinionated solutions (currently just Dnd Sort).

Components that Dnd offers include drop zones, the drag handle, and sort line.

<Frame>
  <div className="w-full h-full bg-[#FFFFFF] p-2 rounded flex items-center justify-center">
    <img src="https://mintcdn.com/servicetitan/WNDNlpam1n3RauQR/images/blog/dnd/dnd-assets.png?fit=max&auto=format&n=WNDNlpam1n3RauQR&q=85&s=106b62fdf5ae98226e4cbdcecaeac064" alt="Assets for Drag and Drop" width="1136" height="414" data-path="images/blog/dnd/dnd-assets.png" />
  </div>
</Frame>

### Dnd Sort

Dnd Sort brings its own functionality to solve for drag and drop related to sorting and bucketing. In addition to using the base Dnd components, Dnd Sort brings in Draggable Cards and its own underlying library to solve some of the most common use cases of drag and drop.

<Frame>
  <div className="w-full h-full bg-[#FFFFFF] p-2 rounded flex items-center justify-center">
    <img src="https://mintcdn.com/servicetitan/WNDNlpam1n3RauQR/images/blog/dnd/dnd-sort-ex.gif?s=edf406a02bc0d824d44af21294f4076d" alt="Animation of Dnd Sort in action" width="1416" height="480" data-path="images/blog/dnd/dnd-sort-ex.gif" />
  </div>
</Frame>

## Future drag and drop use cases

Sorting and bucketing is the first major use case that has been developed. Overtime, Anvil plans to expand its use cases to other topics such as:

* File uploading via drag and drop
* Applying drag and drop directly to components such as Table rows, Chips, and Listboxes.
* Canvas-based dragging
* Nesting of drag and drop items