Animated List

A scrollable, animated list component with keyboard navigation, hover states, and smooth entrance physics. Perfect for settings menus, notifications, or selecting items from a large list.

Live Preview

Installation

CLI

npx @modus-ui/cli add animated-list

Manual

Copy the code from the component tab.
Create a file at components/ui/animated-list.tsx.
Paste the code.

Usage

tsx

import { AnimatedList } from "@/components/ui/animated-list";

export default function Example() {
  const items = ["Item 1", "Item 2", "Item 3"];

  return <AnimatedList items={items} />;
}

Props

Prop	Type	Default	Description
`items`	`ReactNode[] \| string[]`	`[...]`	The items to display in the list.
`onItemSelect`	`(item: any, index: number) => void`	-	Callback when an item is clicked or selected via Enter key.
`itemClassName`	`string`	-	Classes for each item.
`showGradients`	`boolean`	`true`	Whether to show fading gradients at the top and bottom of the scroll container.
`enableArrowNavigation`	`boolean`	`true`	Whether to enable up/down arrow and tab key navigation.
`displayScrollbar`	`boolean`	`true`	Whether to show the scrollbar.
`initialSelectedIndex`	`number`	`-1`	The index of the item that is selected initially.

Animated List

Installation

CLI

Manual

Usage

Props

Comments