@wizeworks/silicaui-dnd

Silica UI drag-and-drop — dnd-kit wrapped in a Silica-styled <SortableList>, plus the full dnd-kit primitive set re-exported for custom drag surfaces.

Install

pnpm add @wizeworks/silicaui-dnd @wizeworks/silicaui-react
pnpm add -D @wizeworks/silicaui tailwindcss

Usage

import { SortableList } from "@wizeworks/silicaui-dnd";

<SortableList
  items={items}
  getItemId={(item) => item.id}
  onReorder={setItems}
  renderItem={(item, ctx) => (
    <div className={ctx.isDragging ? "opacity-50" : ""}>
      <span {...ctx.handleProps}>⠿</span> {item.label}
    </div>
  )}
/>

<SortableList> props

| Prop | Type | | --- | --- | | items | T[] — the ordered items | | getItemId | (item: T) => string \| number — stable id, used for drag identity + React key | | onReorder | (items: T[]) => void — called with the reordered array after a drag or keyboard move | | renderItem | (item: T, ctx: SortableItemContext) => ReactNode — ctx.isDragging + ctx.handleProps (spread onto your drag handle, or the whole row if no separate handle) |

Also re-exports dnd-kit's core and sortable primitives — DndContext, DragOverlay, sensors (PointerSensor, KeyboardSensor, …), SortableContext, useSortable, arrayMove, collision strategies, and CSS — so you can build custom drag surfaces (kanban boards, canvas drops) without a separate dnd-kit install.

Links

• silicaui.com — website & docs

• GitHub repo

• Issues

• @wizeworks/silicaui-react — the component layer this package extends