ScrollX UI Components — Preview & Copy

Also in the ScrollX UI registry

Copy a prompt for your agent, copy the install command, or open the docs that ship it.

Animated Button

animated-button

AnimatedButton is a highly customizable animated button component with shimmer effects, glow, and visual styling options.

@radix-ui/react-slot, class-variance-authority, clsx, tailwind-merge1 file

Animated Tabs

animated-tabs

A headless and styled tab UI component set for switching content views.

tailwind-merge1 file

Animated Testimonials

animated-testimonials

Minimal testimonials with image and quote for clean, modern design.

clsx, tailwind-merge1 file

Animated TextGenerate

animated-textgenerate

Generates animated text word-by-word with blur, highlights, links, and smooth effects.

motion, clsx, tailwind-merge1 file

Announcement

An announcement component that highlights key info with icons, effects, and expandable content.

motion, class-variance-authority, lucide-react, clsx1 file

Aurora Dots

aurora-dots

A captivating background effect featuring softly glowing, animated dots that mimic the ethereal beauty of the aurora borealis.

clsx, tailwind-merge1 file

Avatar Group

avatar-group

Overlapping avatar circles that expand smoothly to reveal each user's name on hover.

clsx, tailwind-merge1 file

Background Meteors

backgroundmeteors

animated background featuring vertical meteor-like beams falling from the top to the bottom of the screen over a grid pattern.

motion1 file

Background Paths

background-paths

A set of SVG paths that animate as if being drawn. Great for tech hero backgrounds.

motion, clsx, tailwind-merge1 file

BarsWave

Vertical wave bars animate in symmetry, forming a subtle motion-driven background layer.

motion, clsx, tailwind-merge1 file

Beams Upstream

beams-upstream

Multiple background beams travel upstream, forming a hero section background.

motion, clsx, tailwind-merge1 file

Bento Grid

bento-grid

A responsive grid layout for showcasing features in varied card sizes with optional tilt effects.

motion, clsx, tailwind-merge1 file

Bento with Focus

bento-with-focus

Modern Bento Grid with blur and smooth reveal animations.

lucide-react1 file

Bolt Strike

bolt-strike

lightning bolts burst randomly with sparks and particles, creating a high-energy, reactive background effect.

clsx, tailwind-merge1 file

Border Glide

border-glide

Modern UI cards with a moving border and smooth transitions.

motion, clsx, tailwind-merge1 file

Card Flip

card-flip

Renders a card component with flip animation, supporting front/back content.

motion, lucide-react, clsx, tailwind-merge1 file

Card Tilt

card-tilt

smooth card tilt that responds naturally to your cursor, giving the card a more polished, modern look.

motion, clsx, tailwind-merge1 file

Checkbox Pro

checkbox-pro

A customizable checkbox component with animated checkmark and indeterminate states.

motion, lucide-react, clsx, tailwind-merge1 file

Checklist Cell

checklist-cell

Animated checklist illustration with sliding tasks and progressive completion.

motion, lucide-react, clsx, tailwind-merge1 file

Clock

clock component with rotating hands and glowing effects, perfect for CTA sections.

motion, clsx, tailwind-merge1 file

CodeBlock

Syntax-highlighted codeblock component built on top of react-syntax-highlighter.

lucide-react, react-syntax-highlighter, @types/react-syntax-highlighter1 file

ColumnLines

column grid background with radial fade and subtle noise. Great for hero backgrounds.

clsx, tailwind-merge1 file

Contact with Globe

contact-with-globe

Modern Contact with globe and smooth reveal animations.

lucide-react, motion1 file

Contact with Pixel Background

contact-with-pixelbackground

Minimal contact section with animated pixel background and stagger button.

lucide-react1 file

Cosmic Background

cosmic-background

A modern cosmic background featuring smooth motion and immersive depth effects.

three1 file

CTA Section with Avatars

cta-section-with-avatars

Modern CTA with avatars and smooth reveal animations.

lucide-react1 file

CTA Section With Dashed Border

cta-section-with-dashed-border

CTA section with dashed border effects.

clsx, lucide-react, tailwind-merge1 file

CTA Section With Floating Gallery

cta-section-with-floating-gallery

CTA section with staggered image gallery.

motion1 file

Cursor Highlight

cursor-highlight

Text is revealed on scroll with pointer, gradient, and border effects.

motion, clsx, tailwind-merge1 file

Cursor ImageTrail

cursorimagetrail

The CursorImageTrail component creates an interactive mouse trail effect with animated images.

motion1 file

Decorated Text

decorated-text

decorative text frame with corner accents and a compact entrance effect.

motion, clsx, tailwind-merge1 file

Dot Wave

dot-wave

Dot-based waves ripple outward in symmetry, creating a subtle, motion-driven background layer

clsx, tailwind-merge1 file

Download Section with ColumnLines

download-with-columnlines

A download section with subtle column lines.

motion1 file

Download Section with Iphone

download-with-iphone

A download section with an iPhone mockup.

motion1 file

Draggable Avatar

draggable-avatar

It displays a circular, draggable avatar with customizable size and style.

motion1 file

Drift Card

drift-card

An interactive card with a drift hover effect that visually highlights content.

clsx, tailwind-merge1 file

Dual Sparks

dualsparks

Corner-based spark waves that radiate inward and outward with smooth motion.

clsx, tailwind-merge1 file

Electric Text

electric-text

Animated electric text with glowing, distorted outline-solid for dynamic neon effects.

clsx, tailwind-merge1 file

Expandable Cards

expandable-cards

Interactive card layout where hovered cards expand smoothly for focused content viewing.

motion, clsx, tailwind-merge1 file

Expandable Dock

expandable-dock

A customizable expandable dock component.

motion, clsx, tailwind-merge1 file

Facescape

Interactive, animated user avatars with hover effects and responsive layout.

@radix-ui/react-avatar, motion, @radix-ui/react-tooltip, clsx1 file

Fancy Text

fancy-text

A refined text reveal animation with smooth character motion and a clean, modern visual flow.

motion, clsx, tailwind-merge1 file

Features with Panel

features-with-panel

Interactive feature list with sticky media panel and smooth transitions.

motion1 file

Features with Spotlight

features-with-spotlight

Interactive feature list with animated spotlight panel and smooth transitions.

clsx, motion, tailwind-merge1 file

Flashy Card

flashy-card

Interactive card with smooth animated activation and visual effects.

clsx, tailwind-merge1 file

Flex Navbar

flex-navbar

A modern navbar with smooth expansion, media panels, and theme controls.

motion, clsx, tailwind-merge, lucide-react1 file

FlipFlow

A looping flow of flip cards with smooth motion and subtle interactive effects.

motion, clsx, tailwind-merge1 file

FlipStack

A stylish and animated card stack UI for showcasing content in layered views.

motion, clsx, tailwind-merge1 file

Flowing Logos

flowing-logos

Flowing logo showcase with smooth animations, hover effects, and modern UI.

clsx, tailwind-merge1 file

Folder

Interactive 3D Folder UI component with hover & click animations for modern apps.

clsx, tailwind-merge1 file

Folder Tree

folder-tree

A customizable folder tree component for displaying hierarchical data with expandable nodes.

motion, lucide-react, clsx, tailwind-merge1 file

Follow Cursor

followcursor

Colorful, fluid cursor trails that respond to mouse movement.

ogl1 file

Footer with Faded Brand

footer-with-faded-brand

Modern footer with oversized faded brand name and smooth transitions.

clsx, lucide-react, motion, tailwind-merge1 file

Footer with Minimal Outline

footer-with-minimal-outline

Clean footer with minimal outlined brand text and smooth animations.

clsx, motion, tailwind-merge1 file

Footer with Newsletter

footer-with-newsletter

Interactive footer with newsletter and smooth transitions.

clsx, lucide-react, motion, tailwind-merge1 file

Footer with Suite

footer-with-suite

Modern footer with oversized split sections.

clsx, tailwind-merge1 file

Frequently asked questions Stack

frequently-asked-questions-stack

A modern FAQ section with layered stack design and smooth scroll-triggered animations.

1 file

Frequently asked questions with Accordion

frequently-asked-questions-with-accordion

Elegant and minimal FAQs with grid, accordions and micro-interactions

motion1 file

Glass

glass surface with interactive ripple and dynamic cursor effects.

motion, clsx, tailwind-merge1 file

Globe

The Globe component creates beautiful 5kb WebGL Globe.

@react-spring/web, cobe1 file

Globe Wireframe

globe-wireframe

The Globe Wireframe component creates beautiful globe with smooth city rotations, responsive design, and premium motion.

d3, topojson-client, @types/d3, @types/topojson-client1 file

Glowing Border Card

glowingbordercard

A customizable card with a glowing border effect that changes colors based on light and dark modes.

clsx, tailwind-merge1 file

Gravity

Gravity pulls objects as they launch, soar, and fall inside a container.

motion, clsx, tailwind-merge1 file

Hero Sections

heroui

A set of hero sections ranging from simple to complex layouts.

motion, @react-spring/web, cobe, next-themes1 file

Hero Section with Cards

hero-with-cards

A hero section with a fan of photo cards and animated entrance.

motion1 file

Hero Section with Iphone

hero-with-iphone

A hero section with an iPhone mockup and animated background.

1 file

Hero Section with Layers

hero-with-layers

A hero-section for AI startups

1 file

Hero Section with Pixel Background

hero-with-pixelbackground

A hero-section for modern AI interfaces with motion.

1 file

Hero Section with Reel

hero-with-reel

A hero section with an animated image reel and motion entrance.

motion1 file

Hold ToConfirm

hold-toconfirm

A button that requires holding down to confirm irreversible or critical actions.

motion, @radix-ui/react-slot, class-variance-authority, clsx1 file

Hyperlink

hyperlink component with animated underline, smooth hover & customizable style.

clsx, tailwind-merge1 file

Infinite Canvas

infinite-canvas

Infinite draggable canvas with zoomable, repeating cards and touch/mouse controls.

clsx, tailwind-merge1 file

Interactive input

interactive-input

A highly customizable interactive input component with shimmer effects, glow, and visual styling options.

@radix-ui/react-slot, class-variance-authority, clsx, tailwind-merge1 file

Iphone

IPhone mockup with screen, header, and custom children content.

lucide-react1 file

Kbd

A component for displaying keyboard shortcuts and key combinations.

clsx, tailwind-merge1 file

Keyboard

Interactive keyboard component with customizable key styling and a beautifully minimal interface.

lucide-react, clsx, tailwind-merge1 file

Kinetic Testimonials

kinetic-testimonials

Smoothly scrolling, animated testimonials for modern developer websites to showcase user feedback visually.

@radix-ui/react-avatar, clsx, tailwind-merge1 file

Lamphome

A stylish, animated header component with dark/light mode toggle functionality.

motion, next-themes1 file

Layered Button

layered-button

A layered button with a radial expand effect and smooth sliding hover label animation.

@radix-ui/react-slot, class-variance-authority, clsx, tailwind-merge1 file

Layered Text

layered-text

Layered text effect with offset shadows, customizable styling, and animations.

motion, clsx, tailwind-merge1 file

Layer Stack

layer-stack

Interactive stacked card layout with drag and scroll momentum.

motion, @radix-ui/react-progress, clsx, tailwind-merge1 file

Lean Card

lean-card

A card component with a striped back card revealed on hover

clsx, tailwind-merge1 file

Loader

Animated versatile loader with different variants, customizable size and content.

motion, clsx, tailwind-merge1 file

Login Form

loginform

Modern, responsive login form with smooth transitions and gradient accents.

motion, @radix-ui/react-slot, class-variance-authority, @radix-ui/react-label1 file

Login Minimal

A clean, animated login form with Google OAuth and email/password fields.

motion2 files

Logo Cloud Flipflow

logo-cloud-flipflow

A logo-cloud for AI startups with flipflow animation.

1 file

Logo Cloud with Marquee

logo-cloud-marquee

A logo cloud with flowing marquee motion, perfect for bold AI startups.

motion1 file

Logo Cloud with Minimal Animation

logo-cloud-with-minimal-animation

A clean logo cloud with smooth blur and fade-in animations.

clsx, motion, tailwind-merge1 file

Logo Stepper

logo-stepper

logo showcase with names, smooth animations, hover effects, and modern UI.

motion, clsx, tailwind-merge1 file

Lustre Text

lustretext

A lustrous text component with animated gradient shine.

class-variance-authority1 file

Magic Dock

magicdock

MacOS-style React dock with smooth animation and customizable magnification.

motion, lucide-react1 file

Media Card

media-card

An Interactive media cards with a fluid cursor and a polished, modern aesthetic.

motion, clsx, tailwind-merge1 file

Meteor Orbit

meteor-orbit

orbit system featuring rotating meteors and gracefully animated icons.

motion, clsx, tailwind-merge1 file

Modern Loader

modern-loader

A modern, dynamic code loader designed for AI-powered coding environments.

motion, react-type-animation, clsx, tailwind-merge1 file

MorphoText Flip

morphotextflip

Animated text component that flips between words with smooth transitions.

motion, clsx, tailwind-merge1 file

Morphy Button

morphy-button

Morphing button with dynamic dot motion, reversible animation.

@radix-ui/react-slot, class-variance-authority, clsx, tailwind-merge1 file

MotionCards

Elegant cards in seamless flow for clean web design.

motion1 file

Motion Grid

motion-grid

A set of diagonal lines that move continuously with gradientglow.

motion, clsx, tailwind-merge1 file

Motion Navbar

motion-navbar

modern react navbar with smooth animations, dropdown menus, and mobile-friendly design.

motion, lucide-react1 file

MovingLines Background

movinglines-background

A set of diagonal lines that move continuously. Great for hero backgrounds.

motion, clsx, tailwind-merge1 file

Navbar Flow

navbar-flow

A customizable, animated navigation bar with hover effects and dropdowns.

motion, lucide-react1 file

Not Found

not-found

A beautifully designed 404 page to guide users when content is missing.

@radix-ui/react-slot, class-variance-authority, clsx, three1 file

Not Found with GlitchyText

not-found-with-glitchytext

A clean 404 page with glitch animation and smooth reveal transitions.

motion1 file

Orb Button

orb-button

Modern orb-style button featuring smooth hover expansion and icon reveal.

clsx, tailwind-merge, class-variance-authority, lucide-react1 file

Parallax Cards

parallaxcards

A vertical sticky-scroll component that displays stacked cards with parallax behavior.

clsx, tailwind-merge1 file

Pixel Background

pixel-background

A flexible pixel animation background with customizable origins and smooth atmospheric motion.

1 file

Pixel Highlight

pixel-highlight

Animated pixel-based text reveal with directional shimmer using canvas-rendered particles.

motion, clsx, tailwind-merge1 file

Pricing Minimal

pricing-minimal

A clean three-tier pricing section with a highlighted popular plan.

lucide-react, motion1 file

Pricing with Switch

pricing-with-switch

A pricing section with a monthly/yearly billing toggle, animated card reveal.

lucide-react, motion1 file

Profile Card

profilecard

A reusable profile card component displaying a user's image, name, bio, skills, and social links with interactive animations.

motion, lucide-react1 file

Radial Flow

radialflow

Dynamic radial graph for visualizing networks & hierarchies with animated nodes.

motion, class-variance-authority, clsx, tailwind-merge1 file

Radial Socials

radial-socials

radial social icons arranged in circles, with smooth expansion and rotation

clsx, tailwind-merge1 file

Reel

A scrolling media strip that displays images and videos in flowing rows.

clsx, tailwind-merge1 file

Reveal Text

reveal-text

a clean text reveal component providing directional animation and stagger options.

motion, clsx, tailwind-merge1 file

ScrollArea Pro

scroll-areapro

advanced scrollarea with auto-hide scrollbars, progress bars, and cross-axis scroll.

@radix-ui/react-scroll-area, motion, clsx, tailwind-merge1 file

Search Cell

search-cell

An animated search input illustration that cycles through queries with a typewriter effect and blur-in result rows.

motion, lucide-react, clsx, tailwind-merge1 file

Sensitive Text

sensitive-text

Interactive text that subtly compresses or stretches characters based on cursor proximity.

clsx, tailwind-merge1 file

Seperator Pro

seperatorpro

Separates layout sections with customizable styles and orientations.

@radix-ui/react-separator, clsx, tailwind-merge1 file

Shiny Button

shiny-button

Interactive button with spotlight effect that follows mouse cursor and highlights borders on hover.

motion, @radix-ui/react-slot, class-variance-authority, clsx1 file

Showcase

An interactive showcase component with smooth content and image transitions.

motion, clsx, tailwind-merge1 file

Side Sheet

side-sheet

A customizable sheet component for creating elegant slide-out interfaces.

motion, clsx, tailwind-merge1 file

Signup Form

signupform

Modern, responsive signup form with smooth transitions and gradient accents.

motion, @radix-ui/react-slot, class-variance-authority, @radix-ui/react-label1 file

SignUp Minimal

signup-minimal

A clean, animated signup form with Google OAuth and email/password fields.

motion2 files

Slide Text

slide-text

motion, clsx, tailwind-merge1 file

Social Orbit

social-orbit

orbits your socials in smooth motion where icons spin, ripple, and glow with purpose.

motion, clsx, tailwind-merge1 file

Spark Waves

spark-waves

Vertical wave bars animate in symmetry, forming a subtle motion-driven background layer.

clsx, tailwind-merge1 file

Splitter

A customizable splitter component with collapsible panels and smooth animations.

motion, lucide-react, clsx, tailwind-merge1 file

Spotlight Card

spotlightcard

An interactive card with a spotlight hover effect that highlights content and enhances user engagement visually.

motion, clsx, tailwind-merge1 file

Squonk

elastic squircles illustration with fall and shrink movement.

clsx, tailwind-merge1 file

Stagger Button

stagger-button

Interactive button with animated stagger text and customizable styles for modern uis.

motion, @radix-ui/react-slot, class-variance-authority, clsx1 file

Stagger Chars

stagger-chars

An animated text component that creates a smooth, staggered character animation effect when hovered

motion, clsx, tailwind-merge1 file

Stats Carousel

statscarousel

Animated statistics counter in stacked carousel for modern websites.

motion1 file

StatsCount

Animated statistics counter with responsive layout and scroll triggers.

motion, clsx, tailwind-merge1 file

Status

A small status component with customizable variants, indicator and shiny animation effects.

class-variance-authority, clsx, tailwind-merge1 file

Stripe Button

stripe-button

Smooth animated button crafted with refined glow and modern motion.

motion, clsx, tailwind-merge1 file

Striped Grid

striped-grid

Animated diagonal stripes with optional base grid, creating a dynamic textured background.

motion, clsx, tailwind-merge1 file

Testimonial Carousel

testimonial-carousel

Minimal, responsive testimonial slider with avatars, names, and quotes for clean, modern design.

embla-carousel-react, @radix-ui/react-avatar, lucide-react, @radix-ui/react-slot1 file

Testimonials with Carousel

testimonials-with-carousel

A testimonial carousel with staggered title animations and smooth transitions, showcasing customer feedback in an elegant layout.

motion1 file

Testimonials with Marquee

testimonials-with-marquee

Horizontal scrolling testimonials with infinite marquee animation across multiple rows.

motion1 file

Testimonials with Vertical Marquee

testimonials-with-verticalmarquee

Vertical scrolling testimonial columns with alternating directions and smooth infinite animations.

motion1 file

Text Highlighter

text-highlighter

A customizable text highlighter with smooth animated highlights to emphasize key text.

motion, clsx, tailwind-merge1 file

Text Modifier

text-modifier

text highlighter with solid background and decorative markers for emphasis..

motion1 file

Text Spotlight

text-spotlight

spotlight text effect with hover and mobile reveal, customizable size and color.

motion, clsx, tailwind-merge1 file

Theme Switch

theme-switch

A flexible and accessible theme mode switcher component for Next.js projects using next-themes.

lucide-react, clsx, tailwind-merge, next-themes1 file

Thunder Loader

thunder-loader

Animated thunderbolt loader with glow and shimmer effects, customizable sizes and colors.

motion, class-variance-authority, clsx, tailwind-merge1 file

Timeline

Smoothly animated timeline slider with resizable handles for interactive use.

motion, clsx, tailwind-merge1 file

Toggle Vault

toggle-vault

Expandable vault component with animated open/close, trigger button, and content panel.

motion1 file

Top Sheet

top-sheet

A customizable component for creating elegant, slide-out panels from the top of the screen.

motion, clsx, tailwind-merge1 file

Transition

Smooth page transitions with curved or slide effects.

motion1 file

Type Animation

typeanimation

Displays an animated typing effect.

motion, react-type-animation, clsx, tailwind-merge1 file

Venom Beam

venom-beam

A glowing particle canvas with motion-reactive trails. Perfect for immersive, high-tech hero sections.

1 file

Vercel Card

vercel-card

A smooth interactive vercel inspired card.

motion, clsx, tailwind-merge1 file

Waitlist Section with Iphone

waitlist-with-iphone

A waitlist section with an iPhone mockup.

motion1 file

Waitlist Section with Layers

waitlist-with-layers

Waitlist section with a draggable stack of layered image cards.

motion1 file

Wavy Button

wavy-button

Interactive wavybutton with animated text and customizable styles for modern uis.

motion, @radix-ui/react-slot, class-variance-authority, clsx1 file

Whitestripes

Dynamic motion background for hero sections and modern layouts.

motion1 file

From the ScrollX UI readme

The most expansive and imaginative collection of motion-rich, interactive React components.

Documentation

Go to scrollxui.dev to view the documentation.

About

ScrollX UI is a collection of animated, interactive React components & blocks built to help your web interfaces feel modern and alive. The library delivers a broad spectrum of components - from text animations and motion-driven interactions to polished UI elements and dynamic backgrounds and blocks from hero sections to faq sections - all free to use and fully customizable through simple props, giving you exactly what you need right out of the box.

Key Features

140+ total components (text animations, animations, interactive components, backgrounds), 30+ blocks and 2+ templates growing every week
Supports ShadCN registries, GitHub registries, and MCP integration
All components are built with minimal dependencies, and are highly customizable through props
You get the code, so you can modify, extend, and personalize every detail
Designed to integrate seamlessly with any modern React project
Components come in one clean format: TypeScript + Tailwind for everyone

Installing Components Via CLI

ScrollX UI supports shadcn for quick installs. Each component demo provides CLI commands, ready for you to copy and run. Detailed instructions can also be found here. If the documentation website is unavailable, you can view the same guide on GitHub here.

How To Contribute?

Contributions are welcome! Check the Open Issues to see how you can help or submit ideas using the Feature Request template. Please review the Contribution Guide and follow our standards. Thanks for your time!

ScrollX UI contents

Particles

About ScrollX UI

Also in the ScrollX UI registry

Animated Button

Animated Tabs

Animated Testimonials

Animated TextGenerate

Announcement

Aurora Dots

Avatar Group

Background Meteors

Background Paths

BarsWave

Beams Upstream

Bento Grid

Bento with Focus

Bolt Strike

Border Glide

Card Flip

Card Tilt

Checkbox Pro

Checklist Cell

Clock

CodeBlock

ColumnLines

Contact with Globe

Contact with Pixel Background

Cosmic Background

CTA Section with Avatars

CTA Section With Dashed Border

CTA Section With Floating Gallery

Cursor Highlight

Cursor ImageTrail

Decorated Text

Dot Wave

Download Section with ColumnLines

Download Section with Iphone

Draggable Avatar

Drift Card

Dual Sparks

Electric Text

Expandable Cards

Expandable Dock

Facescape

Fancy Text

Features with Panel

Features with Spotlight

Flashy Card

Flex Navbar

FlipFlow

FlipStack

Flowing Logos

Folder

Folder Tree

Follow Cursor

Footer with Faded Brand

Footer with Minimal Outline

Footer with Newsletter

Footer with Suite

Frequently asked questions Stack

Frequently asked questions with Accordion

Glass

Globe

Globe Wireframe

Glowing Border Card

Gravity

Hero Sections

Hero Section with Cards

Hero Section with Iphone

Hero Section with Layers

Hero Section with Pixel Background

Hero Section with Reel

Hold ToConfirm

Hyperlink

Infinite Canvas

Interactive input

Iphone

Kbd

Keyboard