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
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
Keyboard Controls
Tab to focus the list, then ↑↓ to move and Enter to select
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