Animated List

List items enter with staggered motion variants for polished reveals.

Default

Scroll the list, hover an item or use the arrow keys. Every prop is wired to the controls underneath.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Fade ItemsKeyboard NavigationShow Scrollbar

Prop	Type	Default	Description
`items`	`string[]`	`['Item 1', 'Item 2', ...]`	An array of items to display in the scrollable list.
`@itemSelect`	`(item, index) => void`	`undefined`	Event emitted when an item is selected. Receives the selected item and its index.
`showGradients`	`boolean`	`true`	Toggle to display the top and bottom gradient overlays.
`enableArrowNavigation`	`boolean`	`true`	Toggle to enable keyboard navigation via arrow and tab keys.
`itemClassName`	`string`	`''`	Additional CSS class names for each list item.
`displayScrollbar`	`boolean`	`true`	Toggle to display or hide the custom scrollbar.
`initialSelectedIndex`	`number`	`-1`	Initial index of the selected item. Set to -1 for no selection.

Keyboard shortcuts and ARIA behavior.

Shortcut	Description
`ArrowDown` + `Tab`	Select the next item.
`ArrowUp` + `Shift+Tab`	Select the previous item.
`Enter`	Emit itemSelect for the selected item.

Keyboard handling is attached to the window, so Tab is captured while navigation is enabled. Turn it off if the list shares a page with forms.