ScrollX UI is an open-source React and shadcn-compatible component library for animated, interactive, and customizable user interfaces. It offers motion-driven components that blend seamlessly with modern ShadCN setups.
A modal dialog used to convey critical information and require a user response before proceeding..
AnimatedButton is a highly customizable animated button component with shimmer effects, glow, and visual styling options.
Generates animated text word-by-word with blur, highlights, links, and smooth effects.
An announcement component that highlights key info with icons, effects, and expandable content.
A responsive container component that maintains a fixed aspect ratio, commonly used for media like images and videos.
A captivating background effect featuring softly glowing, animated dots that mimic the ethereal beauty of the aurora borealis.
Customizable Avatar component with animated borders for status indicators like "close friends" or "normal story".
Overlapping avatar circles that expand smoothly to reveal each user's name on hover.
animated background featuring vertical meteor-like beams falling from the top to the bottom of the screen over a grid pattern.
A set of SVG paths that animate as if being drawn. Great for tech hero backgrounds.
Vertical wave bars animate in symmetry, forming a subtle motion-driven background layer.
Multiple background beams travel upstream, forming a hero section background.
A responsive grid layout for showcasing features in varied card sizes with optional tilt effects.
Modern Bento Grid with blur and smooth reveal animations.
lightning bolts burst randomly with sparks and particles, creating a high-energy, reactive background effect.
smooth card tilt that responds naturally to your cursor, giving the card a more polished, modern look.
A customizable checkbox component with animated checkmark and indeterminate states.
Animated checklist illustration with sliding tasks and progressive completion.
Syntax-highlighted codeblock component built on top of react-syntax-highlighter.
An interactive component which expands/collapses a panel with a smooth motion.
column grid background with radial fade and subtle noise. Great for hero backgrounds.
Modern Contact with globe and smooth reveal animations.
Minimal contact section with animated pixel background and stagger button.
A modern cosmic background featuring smooth motion and immersive depth effects.
Modern CTA with avatars and smooth reveal animations.
CTA section with dashed border effects.
CTA section with staggered image gallery.
The CursorImageTrail component creates an interactive mouse trail effect with animated images.
Dot-based waves ripple outward in symmetry, creating a subtle, motion-driven background layer
A download section with subtle column lines.
A download section with an iPhone mockup.
It displays a circular, draggable avatar with customizable size and style.
An interactive card with a drift hover effect that visually highlights content.
Animated Dropdown Menu Reveals a menu of options or actions when activated by a button.