HomeBookmarks
ScrollX UIScrollX UI
ScrollX UI

ScrollX UI

SCby scrollxui
59components621.8Kviews2Kbookmarks

Installs all 157 components. Without our CLI, run instead.

Auto-indexed

ScrollX UI contents

  • Testimonials Vertical MarqueeTestimonials Vertical Marquee

    Testimonials Vertical Marquee

  • Waitlist with iPhone MockupWaitlist with iPhone Mockup

    Waitlist with iPhone Mockup

  • CTA Section with AvatarsCTA Section with Avatars

    CTA Section with Avatars

  • Testimonials Marquee

    Testimonials Marquee

  • Column LinesColumn Lines

    Column Lines

  • Hero Section with CardsHero Section with Cards

    Hero Section with Cards

  • Navbar FlowNavbar Flow

    Navbar Flow

  • Logo StepperLogo Stepper

    Logo Stepper

  • Electric TextElectric Text

    Electric Text

  • Slide TextSlide Text

    Slide Text

  • Stats CountStats Count

    Stats Count

  • Pixel HighlightPixel Highlight

    Pixel Highlight

  • Dual Sparks

    Dual Sparks

  • Dot Wave

    Dot Wave

  • BarsWave

    BarsWave

  • GravityGravity

    Gravity

  • Contact with GlobeContact with Globe

    Contact with Globe

  • Footer with Faded BrandFooter with Faded Brand

    Footer with Faded Brand

  • Modern LoaderModern Loader

    Modern Loader

  • Hero SectionHero Section

    Hero Section

  • Hero Section with ReelHero Section with Reel

    Hero Section with Reel

  • Hero With Pixel BackgroundHero With Pixel Background

    Hero With Pixel Background

  • Logo Cloud FlipflowLogo Cloud Flipflow

    Logo Cloud Flipflow

  • Not Found with Glitchy TextNot Found with Glitchy Text

    Not Found with Glitchy Text

  • About ScrollX UI

    ScrollX UI publishes a shadcn registry at scrollxui.dev, with 157 components installable through the shadcn CLI.

    Components
    157
    GitHub stars
    309
    Last commit
    Jun 8, 2026
    Repository
    Adityakishore0/ScrollX-UI

    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
    • 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
    • Cosmic Background

      cosmic-background

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

      three1 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
    • 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
    • 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
    • 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
    • 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
    • Follow Cursor

      followcursor

      Colorful, fluid cursor trails that respond to mouse movement.

      ogl1 file
    • Footer with Newsletter

      footer-with-newsletter

      Interactive footer with newsletter and smooth transitions.

      clsx, lucide-react, motion, tailwind-merge1 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
    • 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
    • Hero Section with Iphone

      hero-with-iphone

      A hero section with an iPhone mockup and animated background.

      1 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
    • 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
    • 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
    • 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
    • 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
    • MorphoText Flip

      morphotextflip

      Animated text component that flips between words with smooth transitions.

      motion, clsx, tailwind-merge1 file
    • MotionCards

      Elegant cards in seamless flow for clean web design.

      motion1 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
    • 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
    • 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
    • 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
    • Reveal Text

      reveal-text

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

      motion, 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
    • 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
    • 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
    • Status

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

      class-variance-authority, 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
    • 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
    • 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 Layers

      waitlist-with-layers

      Waitlist section with a draggable stack of layered image cards.

      motion1 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!

    Contributors

    Maintainers

    Aditya kishore

    Stats

    License

    Licensed under the MIT license.

    Read the rest on GitHub →

    What ScrollX UI builds on

    The packages and primitives its components pull in, counted across the registry.

    utils125

    Hooks and utilities

    • accordion
    • alert-dialog
    • aspect-ratio
    • avatar
    • badge
    • button
    • calendar
    • card
    • carousel
    • collapsible
    • dropdown-menu
    • input-otp
    • label
    • pagination
    • popover
    • progress
    • radio-group
    • select
    • slider
    • table
    • toast
    • tooltip

    Registries like ScrollX UI

    Magic UI

    Magic UI

    by Dillion Verma

    64

    components

    coss

    coss

    by coss

    74

    components

    cult ui

    cult ui

    by cult/ui

    50

    components

    Motion Primitives

    Motion Primitives

    by Julien Thibeaut

    39

    components

    ReUI

    ReUI

    by Sean Hello

    263

    components

    UI Layouts

    UI Layouts

    by UI Layouts

    127

    components

    Browse every shadcn registry we track →

    1. Components
    2. /
    3. scrollxui
    4. /
    5. ScrollX UI

    Related libraries

    AnimateIcons / Lucide

    AnimateIcons / Lucide

    by Avijit Dey

    434

    components

    FirstReply

    FirstReply

    by Jason Mohab-Ali

    27

    components

    Illos

    Illos

    by Naved

    23

    components

    lndev-ui

    lndev-ui

    by LN

    59

    components

    Cnippet

    Cnippet

    by Cnippet

    347

    components

    8bitcn

    8bitcn

    by OrcDev

    103

    components

    About ScrollX UI

    ScrollX UI is a component library on 21st.dev by scrollxui with 59 public React components. Every component ships with a live interactive preview and full TSX source — copy the code, install it through the shadcn CLI, or pull it into Cursor or Claude Code over MCP.

    All 59 ScrollX UI components

    • BarsWave
    • Column Lines
    • Contact with Globe
    • Contact with Pixel Background
    • CTA Section with Avatars
    • CTA Section With Dashed Border
    • CTA Section With Floating Gallery
    • Dot Wave
    • Download Section with Column Lines
    • Download with iPhone
    • Dual Sparks

    Browse all component libraries →

    Electric Text
  • Fancy Text
  • FAQ Accordion
  • Features With Panel
  • Features with Spotlight
  • Folder Tree
  • Footer with Faded Brand
  • Footer with Minimal Outline
  • Footer with Suite
  • Frequently Asked Questions Stack
  • Globe Wireframe
  • Gravity
  • Hero Section
  • Hero Section with Cards
  • Hero Section with Reel
  • Hero With Layers
  • Hero With Pixel Background
  • Keyboard
  • Lean Card
  • Login Minimal
  • Logo Cloud Flipflow
  • Logo Cloud Marquee
  • Logo Stepper
  • Meteor Orbit
  • Modern Loader
  • Morphy Button
  • Motion Grid
  • Navbar Flow
  • Not Found with Glitchy Text
  • Particles
  • Pixel Highlight
  • Pricing Minimal
  • Pricing with Switch
  • Radial Flow
  • Radial Socials
  • ScrollArea Pro
  • Search Cell
  • Shiny Button
  • Slide Text
  • Stats Count
  • Stripe Button
  • Testimonials Marquee
  • Testimonials Vertical Marquee
  • Testimonials with Carousel
  • Thunder Loader
  • Timeline
  • Waitlist with iPhone Mockup
  • Wavy Button