A list where items pin to the top and move up or down with buttons or Alt and arrow keys, animated with a FLIP transition.
npx shadcn@latest add https://hyperblur.dev/r/list-pinned-reorder.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/list-pinned-reorder.tsx.
import { ListPinnedReorder } from "@/components/hyperblur/list-pinned-reorder"
<ListPinnedReorder onChange={(items) => console.log(items.map((i) => i.id))} />| Prop | Type | Default | Description |
|---|---|---|---|
| value | { id: string; title: string; subtitle?: string; pinned?: boolean; color?: string }[] | Controlled items. Pinned items always render first. Pair with onChange. | |
| defaultValue | PinnedItem[] | five example projects | Initial items when uncontrolled. |
| onChange | (items: PinnedItem[]) => void | Called with the new order after a pin, unpin or move. | |
| rowHeight | number | 36 | Height of each row in pixels. |
| accent | string | "#2f7bff" | Accent for pinned rows, the pin icon and focus rings. |