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
Unlock advanced capabilities with the Pro version
Smooth Animations
Framer Motion powered scale and opacity animations for elegant item entry
Keyboard Navigation
Full keyboard support with arrow keys, Tab navigation, and Enter 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
Animate items as they enter viewport for progressive reveal
Installation
Install via CLI
moonui add animated-listUsage
Examples
Keyboard Navigation
Navigate through list items using arrow keys, Tab, and Enter. Auto-scrolls to keep selected item visible with smooth animations
Keyboard Controls
Use ↑↓ Arrow keys, Tab, or Enter to navigate
Scroll Gradients
Beautiful gradient overlays that fade in/out based on scroll position to indicate more content above or below
With Gradients
Gradients indicate scrollable content
Without Gradients
No gradient overlays
Custom Scrollbar Styling
Choose between visible custom scrollbar or hidden scrollbar for clean minimal design
Visible Scrollbar
Custom styled scrollbar
Hidden Scrollbar
Clean minimal design
Interactive Item Selection
Select items via mouse click or hover with visual feedback and callback handlers for integration
Hover or use keyboard to select items
Custom Styling
Customize container and item appearance with className props for perfect integration with your design system
Gradient Border
Neon Style
Initial Selection
Set an initially selected item to highlight important content or guide user attention on load
Featured Highlight
Item 2 is initially selected (Lightning Fast Performance)
Real-World Menu Navigation
Complete example of a navigation menu with icons, keyboard support, and selection handling
Navigation Menu
Select any item
Click or use keyboard to navigate
Compact Size Variant
Adjust container and item sizing for compact layouts or sidebars with custom width