How to add drag-and-drop block on the admin side using Remix App Template?

Shopify Apps
,

Topic summary

A developer is building a Shopify app using the Remix template and needs to implement drag-and-drop functionality for admin-side blocks, with the ability to render these blocks on the storefront. An image showing the desired interface is included in the original post.

Suggested Solutions:

  • React DnD was initially recommended as a potential library
  • @dnd-kit emerged as the preferred option, particularly because Shopify Polaris components already use it

Key Comparison:

  • @dnd-kit: Modern, modular approach with better mobile/touch support, excellent for sortable lists, more accessible and performant. Requires more initial setup but offers consistent cross-device behavior.
  • React DnD: Mature, stable library with Redux-like model. Better for complex enterprise use cases but has HTML5 backend limitations and a more verbose API.

Recommendation:
Use @dnd-kit for modern Shopify apps, especially since it’s already integrated with Polaris components and provides the @dnd-kit/sortable package for easier implementation. The Polaris components documentation provides helpful reference examples.

The discussion remains open regarding specific implementation details for rendering blocks on the storefront.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Hi Everyone,

I am developing a Shopify app using the Remix app template. I want to create a drag-and-drop block for the admin side. Can anyone help me with how to create it or suggest a library to use?

I would also like to know how to render this block on the storefront.

Jay_RW_0-1746167163692.png
Jay_RW_0-1746167163692.png607×356 11.3 KB

2

Hi @Jay_RW

Let try React DnD

3

Hi @BiDeal-Discount ,

I was exploring the Polaris component https://www.polariscomponents.com/components/sortable-list and I found that they are using the dnd kit. So, are both the same or different? If different then will it work with the Shopify Polaris?

As I can see, you have created many apps, so I hope you will have a better idea about this, and I think you have gone through this process.

4

Hi @Jay_RW

I actually worked with both of them to develop my apps, with recent project as BiDeal Bundle Volume Discounts I’m using @dnd-kit because they support @dnd-kit/sortable help me easier to do.

Your reference link is very good but let choose which one fitable with you as my comparation below:

react-dnd- Built on the concept of Drag Sources and Drop Targets.

  • Uses a Redux-like model under the hood.

  • More opinionated and comes with structured ways to do things.

  • Supports complex use-cases like dragging between different types, custom backends.

Pros:

  • Mature, stable, with lots of examples.

  • Good for complex enterprise use cases (e.g., Kanban boards).

  • Detailed hooks like useDrag, useDrop.

Cons:

  • HTML5 DnD backend limitations (e.g., no touch support unless using custom backends).

  • API can feel dated or verbose.

@dnd-kit- Fully modular and composable.

  • Provides building blocks: useDraggable, useDroppable, useSensor, useSortable.

  • Doesn’t rely on the HTML5 DnD API — more consistent behavior across devices.

Pros:

  • Modern design, excellent for lists and grids.

  • Sortable list support is powerful and extensible.

  • Better touch and mobile support.

  • Lightweight and fast.

Cons:

  • Requires more setup to implement basic drag-and-drop.

  • Steeper learning curve for custom use-cases.

? Recommendation- Use @dnd-kit if:

  • You want a modern, performant drag-and-drop system.

  • You’re building sortable lists or need good mobile support.

  • You care about accessibility and consistent cross-device behavior.

  • Use react-dnd if:

    • You’re working on a complex app that relies on drag types or backends.

    • You need a more traditional or stable solution with a longer track record.

    • You prefer opinionated APIs that abstract more complexity.

1 Like