What library handles the drag and drop?

dnd-kit. The block builds a reusable Sortable component on @dnd-kit/core and @dnd-kit/sortable, wrapped into Sortable, SortableItem, and SortableItemHandle primitives you can reuse elsewhere in your app.

How do I save the new card order?

The grid order is a plain array in React state, and dnd-kit hands you the reordered array in a single callback, the same place the demo fires its confirmation toast. Posting that array to your API is all persistence takes.

Does drag and drop work on touch screens?

Yes. dnd-kit supports pointer and touch sensors, so the cards can be reordered with a finger on mobile as well as with a mouse, and it also provides keyboard-accessible dragging.

Is the source code free?

The preview is free to try, but Sortable Cards is a pro block. The code tab and the shadcn CLI install become available with an All Access plan.

Are Vuejs and Svelte versions available, and do they drag the same way?

Yes. The block ships in React, Vuejs, and Svelte editions built on the shadcn-vue and shadcn-svelte ports, each wired to an equivalent drag and drop setup so the reordering behavior matches across frameworks.

Can the cards show my own content instead of media files?

Absolutely. The media asset cards are just example content; the Sortable primitives wrap arbitrary markup, so task cards, product tiles, or dashboard widgets slot in without changing the drag logic.

Sortable Cards - Shadcn UI Examples and Blocks

Shadcn Sortable Cards Examples

Sortable Cards is a drag and drop grid block for reordering media asset cards such as images, documents, audio, and video files. It builds a reusable Sortable component on top of dnd-kit, with grip handles, priority badges, and file size labels styled using Shadcn UI and Tailwind, plus sonner toasts on reorder. Grid order lives in simple React state, so persisting the new order is a single callback away. Use it in React projects, or grab the Vuejs or Svelte version of the same grid.

Drag and Drop Cards With dnd-kit

Sortable Cards is a drag and drop grid block for reordering items by hand: grab a card by its grip handle, drag it to a new slot, and the grid reflows around it. The demo presents a set of media asset cards, images, documents, audio, and video files, each with a priority badge and a file size label, but the pattern generalizes to any collection where order carries meaning.

The heavy lifting is done by a reusable Sortable component built on dnd-kit, the modern drag and drop toolkit for React. The block wraps dnd-kit's core, sortable, and utilities packages into three clean primitives, Sortable, SortableItem, and SortableItemHandle, so the example page reads like declarative markup rather than event-handler soup.

When Reordering Beats Menus

Manual ordering shows up wherever priority is subjective: arranging portfolio pieces, sequencing lessons in a course builder, ranking features on a roadmap, curating a media library, or ordering dashboard widgets. A drag interaction communicates that order instantly, where a move up and move down menu would take five clicks to say the same thing.

If your reordering needs grow into columns and workflow states, the same dnd-kit foundation powers our kanban boards, making this block a good on-ramp to that larger pattern.

Component Anatomy and Framework Coverage

The card chrome uses Shadcn UI pieces: Badge renders the priority labels, and the layout, handles, and hover states are Tailwind utilities throughout. The internal Sortable primitive composes a Slot from radix-ui so it can wrap arbitrary markup without adding wrapper nodes. When a drag completes, a toast from sonner confirms the reorder, a small touch that makes the interaction feel finished.

Grid order lives in a single React useState array, and dnd-kit reports the new order through one callback. The block is available in React, Vuejs, and Svelte versions; the Vuejs and Svelte editions build on the shadcn-vue and shadcn-svelte ports and pair them with a matching drag and drop setup, so the reordering experience is consistent across all three.

Styling and Theming

Cards, badges, and drag states are colored exclusively through the design tokens in globals.css: card and border for surfaces, muted-foreground for metadata, primary for emphasis. Retheming the grid is a matter of editing those CSS variables, and the dark values of the same tokens give you dark mode support without touching the components.

The drag affordances are also easy to tune. The grip handle, drop animation, and dragging opacity are Tailwind classes on the sortable primitives, so tightening or exaggerating the interaction feel is a few utility changes.

Install, Then Persist the Order

The example page shows the shadcn CLI install command at the top, in npm, pnpm, yarn, and bun flavors, and the code tab exposes the full source including the reusable Sortable component. This is a pro block, so both unlock with an All Access plan via the pricing page.

Integration is deliberately minimal: the grid order is one state array, so persisting user arrangements means sending that array to your backend in the reorder callback where the toast currently fires. From there, the Sortable primitive is yours to reuse for any other list or grid in your app.