Animated List
Smooth animated list component with keyboard navigation, scroll gradients, auto-scroll to selection, and interactive item highlighting for enhanced user experience
Pro features
What the Pro version adds to this component.
Smooth Animations
Framer Motion powered scale and opacity animations for elegant item entry
Keyboard Navigation
WAI-ARIA listbox semantics: a single tab stop, arrow-key navigation and Enter/Space selection
Interactive Selection
Mouse hover and click selection with visual feedback and callbacks
Scroll Gradients
Dynamic gradient overlays that fade based on scroll position
Auto-Scroll
Intelligent auto-scroll keeps selected items visible during keyboard navigation
Custom Styling
Full control over container and item appearance with className props
Flexible Configuration
Customize scrollbar visibility, gradients, and initial selection
In-View Detection
Items reveal progressively as they scroll into the list's own viewport
Installation
Install via CLI
npx @moontra/moonui-cli add animated-listUsage
Examples
Keyboard Navigation
Tab into the list, then move between items with the arrow keys and confirm with Enter or Space. Auto-scrolls to keep the selected item visible with smooth animations
Scroll Gradients
Beautiful gradient overlays that fade in/out based on scroll position to indicate more content above or below
Custom Scrollbar Styling
Choose between visible custom scrollbar or hidden scrollbar for clean minimal design
Interactive Item Selection
Select items via mouse click or hover with visual feedback and callback handlers for integration
Custom Styling
Customize container and item appearance with className props for perfect integration with your design system
Initial Selection
Set an initially selected item to highlight important content or guide user attention on load
Real-World Menu Navigation
Complete example of a navigation menu with icons, keyboard support, and selection handling
Compact Size Variant
Adjust container and item sizing for compact layouts or sidebars with custom width