Reorderable List
Drag-and-drop sortable list with smooth layout animations. Supports full-card or handle-based dragging.
Design system tokens
highDefine color, spacing, and typography tokens for the component library.
Set up CI pipeline
mediumConfigure GitHub Actions for automated testing and deployment.
Write documentation
lowCreate usage guides and API references for each component.
Accessibility audit
highReview all components for WCAG 2.1 AA compliance.
Performance benchmarks
mediumMeasure render times and bundle sizes across components.
Dark mode polish
lowFine-tune contrast ratios and color mappings for dark theme.
Installation
npx shadcn@latest add https://wise-ui.com/r/reorderable-list.jsonProps
| Prop | Type | Default | Description |
|---|---|---|---|
| items | T[] | - | Array of items to render. Each must have a unique `id` field. |
| onReorder | (items: T[]) => void | - | Callback when items are reordered via drag-and-drop. |
| renderItem | (item: T, index: number) => ReactNode | - | Render function for each sortable item. |
| gap | number | 8 | Gap between items in pixels. |
| dragTarget | "card" | "handle" | "card" | Whether the entire card is draggable or only a drag handle. |
| className | string | - | Class applied to the list container. |
| itemClassName | string | - | Class applied to each sortable item wrapper. |