Sortable List

Sortable List component documentation for Velyx. Installation, drag-and-drop usage examples, and customization guidance for Laravel Blade, Alpine.js, Livewire, and Tailwind CSS v4.

Sortable List

Sortable lists let users reorder content directly, which is useful for queues, priorities, and editorial workflows.

Installation

Add the sortable list component to your project:

npx velyx@latest add sortable-list
pnpm dlx velyx@latest add sortable-list
yarn dlx velyx@latest add sortable-list
bunx --bun velyx@latest add sortable-list

Alpine.js Required: The sortable list component depends on Alpine.js and a Sortable-compatible drag-and-drop runtime.

Usage

Default List

Sortable List

Live preview rendered from the registry in an isolated iframe.

Open preview

Loading preview...

Failed to load preview

Code

Sortable List

Full preview from the registry iframe.

Open in tab

Loading preview...

Without Handle

Sortable List

Live preview rendered from the registry in an isolated iframe.

Open preview

Loading preview...

Failed to load preview

Code

Sortable List

Full preview from the registry iframe.

Open in tab

Loading preview...

Props

Prop Type Default Description
items array [] Ordered items rendered in the list
itemKey string 'id' Property used as the unique item key
handle bool true Enables a visible drag handle
animation int 150 Drag animation duration
ghostClass string 'opacity-50' Class applied to the ghost item
dragClass string 'shadow-lg' Class applied while an item is dragged
disabled bool false Disables sorting

Next Steps