127 Components
Elastic Snap Sortable
MotionReorderable priority queue where list items swap positions with Hooke's Law layout spring projection and full keyboard arrow-key control.
Priority QueueClick arrows or use ↑/↓ keys
P0GPU Radial Mask Compositor
P1Hooke's Law Velocity Solver
P2Shadcn v2 Registry Manifests
P3WAI-ARIA Reduced Motion Audit
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/elastic-snap-sortable.json"
Props
TypeScript props supported by <ElasticSnapSortable />.
| Prop | Type | Default | Description |
|---|---|---|---|
| items | SortableTaskItem[] | — | Initial array of task items containing id, title, and priority tag. |
| stiffness | number | 380 | Spring stiffness coefficient for row swap layout projection. |
| damping | number | 26 | Spring damping coefficient controlling row settle oscillation. |
| onReorder | (items: ElasticSortableItem[]) => void | — | Callback fired when items are reordered via drag-and-drop |
Key Features
- Automatic FLIP layout projection via Framer Motion layout prop when rows swap positions.
- Full keyboard reordering using ArrowUp and ArrowDown keys directly on focused list items.
- Tactile up/down stepper triggers for single-click touch and pointer sorting.
Keyboard & Accessibility
- Implements role='list' and role='listitem' with live position announcements in aria-label.
- Supports ArrowUp and ArrowDown keyboard reordering without requiring pointer drag dexterity.
- Snaps reordered rows instantaneously when prefers-reduced-motion is enabled.