---
name: "@scrollxui"
slug: "scrollxui"
description: "ScrollX UI is an open-source, motion-rich React component library with 140+ animated, interactive components and 30+ marketing blocks, all in TypeScript + Tailwind CSS format. Components span text animations (electric text, decorated text, fancy text), interactive elements (hold-to-confirm, drag interactions, expandable dock, expandable cards, card tilt, card flip), backgrounds (aurora dots, meteors, grid, cosmic, beam, dot wave), and UI primitives (Globe, Keyboard, Infinite Canvas, Flowing Logos, Avatar Group, Bento Grid). Blocks include Hero Sections, CTA, Pricing, Testimonials, FAQ, Waitlist, Bento, and more. Tailwind v4, React, Framer Motion/Motion. Free (MIT). Use for: building visually expressive marketing pages, SaaS landing pages, or developer portfolios that need modern motion-driven components and marketing section blocks."
category: "Animated components"
tags: ["3d", "aesthetic", "animation", "auth", "backgrounds", "blocks", "buttons", "cards", "design-system", "forms", "glassmorphism", "hooks", "icons", "loaders", "maps", "marketing", "media", "mobile", "navigation", "onboarding", "overlays", "payments", "retro", "saas"]
framework: "react"
license: null
author: "Adityakishore0"
website: "https://www.scrollxui.dev"
github: "https://github.com/Adityakishore0/ScrollX-UI"
registry: "https://www.scrollxui.dev/registry/registry.json"
pro: false
pro_url: null
github_stars: 294
component_count: 180
generated_at: "2026-07-28T08:00:50.948Z"
---

# @scrollxui

ScrollX UI is an open-source, motion-rich React component library with 140+ animated, interactive components and 30+ marketing blocks, all in TypeScript + Tailwind CSS format. Components span text animations (electric text, decorated text, fancy text), interactive elements (hold-to-confirm, drag interactions, expandable dock, expandable cards, card tilt, card flip), backgrounds (aurora dots, meteors, grid, cosmic, beam, dot wave), and UI primitives (Globe, Keyboard, Infinite Canvas, Flowing Logos, Avatar Group, Bento Grid). Blocks include Hero Sections, CTA, Pricing, Testimonials, FAQ, Waitlist, Bento, and more. Tailwind v4, React, Framer Motion/Motion. Free (MIT). Use for: building visually expressive marketing pages, SaaS landing pages, or developer portfolios that need modern motion-driven components and marketing section blocks.

## Links

- Website: https://www.scrollxui.dev
- GitHub: https://github.com/Adityakishore0/ScrollX-UI
- Registry JSON: https://www.scrollxui.dev/registry/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/scrollxui
- This file: https://sh4dcn.vercel.app/md/scrollxui.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://www.scrollxui.dev/registry/registry.json
pnpm dlx shadcn@latest add https://www.scrollxui.dev/registry/registry.json
bunx shadcn@latest add https://www.scrollxui.dev/registry/registry.json
# clone the source repo
git clone https://github.com/Adityakishore0/ScrollX-UI.git
# fetch the raw registry index
curl -s https://www.scrollxui.dev/registry/registry.json
```

## Components (180)

| name | type | description | install |
| --- | --- | --- | --- |
| utils | registry:lib | Utils | `npx shadcn@latest add https://www.scrollxui.dev/registry/utils.json` |
| accordion | registry:ui | A collapsible component for showing and hiding content sections. | `npx shadcn@latest add https://www.scrollxui.dev/registry/accordion.json` |
| alert-dialog | registry:ui | A modal dialog used to convey critical information and require a user response before proceeding.. | `npx shadcn@latest add https://www.scrollxui.dev/registry/alert-dialog.json` |
| animated-button | registry:ui | AnimatedButton is a highly customizable animated button component with shimmer effects, glow, and visual styling options. | `npx shadcn@latest add https://www.scrollxui.dev/registry/animated-button.json` |
| animated-tabs | registry:ui | A headless and styled tab UI component set for switching content views. | `npx shadcn@latest add https://www.scrollxui.dev/registry/animated-tabs.json` |
| animated-testimonials | registry:ui | Minimal testimonials with image and quote for clean, modern design. | `npx shadcn@latest add https://www.scrollxui.dev/registry/animated-testimonials.json` |
| animated-textgenerate | registry:ui | Generates animated text word-by-word with blur, highlights, links, and smooth effects. | `npx shadcn@latest add https://www.scrollxui.dev/registry/animated-textgenerate.json` |
| announcement | registry:ui | An announcement component that highlights key info with icons, effects, and expandable content. | `npx shadcn@latest add https://www.scrollxui.dev/registry/announcement.json` |
| aspect-ratio | registry:ui | A responsive container component that maintains a fixed aspect ratio, commonly used for media like images and videos. | `npx shadcn@latest add https://www.scrollxui.dev/registry/aspect-ratio.json` |
| avatar | registry:ui | Customizable Avatar component with animated borders for status indicators like "close friends" or "normal story". | `npx shadcn@latest add https://www.scrollxui.dev/registry/avatar.json` |
| avatar-group | registry:ui | Overlapping avatar circles that expand smoothly to reveal each user's name on hover. | `npx shadcn@latest add https://www.scrollxui.dev/registry/avatar-group.json` |
| aurora-dots | registry:ui | A captivating background effect featuring softly glowing, animated dots that mimic the ethereal beauty of the aurora borealis. | `npx shadcn@latest add https://www.scrollxui.dev/registry/aurora-dots.json` |
| backgroundmeteors | registry:ui | animated background featuring vertical meteor-like beams falling from the top to the bottom of the screen over a grid pattern. | `npx shadcn@latest add https://www.scrollxui.dev/registry/backgroundmeteors.json` |
| background-paths | registry:ui | A set of SVG paths that animate as if being drawn. Great for tech hero backgrounds. | `npx shadcn@latest add https://www.scrollxui.dev/registry/background-paths.json` |
| badge | registry:ui | A small badge component with customizable variants and shiny animation effects. | `npx shadcn@latest add https://www.scrollxui.dev/registry/badge.json` |
| barswave | registry:ui | Vertical wave bars animate in symmetry, forming a subtle motion-driven background layer. | `npx shadcn@latest add https://www.scrollxui.dev/registry/barswave.json` |
| beams-upstream | registry:ui | Multiple background beams travel upstream, forming a hero section background. | `npx shadcn@latest add https://www.scrollxui.dev/registry/beams-upstream.json` |
| bento-grid | registry:ui | A responsive grid layout for showcasing features in varied card sizes with optional tilt effects. | `npx shadcn@latest add https://www.scrollxui.dev/registry/bento-grid.json` |
| bolt-strike | registry:ui | lightning bolts burst randomly with sparks and particles, creating a high-energy, reactive background effect. | `npx shadcn@latest add https://www.scrollxui.dev/registry/bolt-strike.json` |
| border-glide | registry:ui | Modern UI cards with a moving border and smooth transitions. | `npx shadcn@latest add https://www.scrollxui.dev/registry/border-glide.json` |
| button | registry:ui | Reusable button component with multiple variants and sizes. | `npx shadcn@latest add https://www.scrollxui.dev/registry/button.json` |
| card | registry:ui | Renders a card component comprising a header, content section, and footer... | `npx shadcn@latest add https://www.scrollxui.dev/registry/card.json` |
| card-flip | registry:ui | Renders a card component with flip animation, supporting front/back content. | `npx shadcn@latest add https://www.scrollxui.dev/registry/card-flip.json` |
| card-tilt | registry:ui | smooth card tilt that responds naturally to your cursor, giving the card a more polished, modern look. | `npx shadcn@latest add https://www.scrollxui.dev/registry/card-tilt.json` |
| carousel | registry:ui | A carousel component with card stack visualization for cycling through content. | `npx shadcn@latest add https://www.scrollxui.dev/registry/carousel.json` |
| calendar | registry:ui | A date field component that enables users to choose and edit a date. | `npx shadcn@latest add https://www.scrollxui.dev/registry/calendar.json` |
| checkbox-pro | registry:ui | A customizable checkbox component with animated checkmark and indeterminate states. | `npx shadcn@latest add https://www.scrollxui.dev/registry/checkbox-pro.json` |
| checklist-cell | registry:ui | Animated checklist illustration with sliding tasks and progressive completion. | `npx shadcn@latest add https://www.scrollxui.dev/registry/checklist-cell.json` |
| clock | registry:ui | clock component with rotating hands and glowing effects, perfect for CTA sections. | `npx shadcn@latest add https://www.scrollxui.dev/registry/clock.json` |
| codeblock | registry:ui | Syntax-highlighted codeblock component built on top of react-syntax-highlighter. | `npx shadcn@latest add https://www.scrollxui.dev/registry/codeblock.json` |
| collapsible | registry:ui | An interactive component which expands/collapses a panel with a smooth motion. | `npx shadcn@latest add https://www.scrollxui.dev/registry/collapsible.json` |
| columnlines | registry:ui | column grid background with radial fade and subtle noise. Great for hero backgrounds. | `npx shadcn@latest add https://www.scrollxui.dev/registry/columnlines.json` |
| cosmic-background | registry:ui | A modern cosmic background featuring smooth motion and immersive depth effects. | `npx shadcn@latest add https://www.scrollxui.dev/registry/cosmic-background.json` |
| cursor-highlight | registry:ui | Text is revealed on scroll with pointer, gradient, and border effects. | `npx shadcn@latest add https://www.scrollxui.dev/registry/cursor-highlight.json` |
| cursorimagetrail | registry:ui | The CursorImageTrail component creates an interactive mouse trail effect with animated images. | `npx shadcn@latest add https://www.scrollxui.dev/registry/cursorimagetrail.json` |
| decorated-text | registry:ui | decorative text frame with corner accents and a compact entrance effect. | `npx shadcn@latest add https://www.scrollxui.dev/registry/decorated-text.json` |
| dot-wave | registry:ui | Dot-based waves ripple outward in symmetry, creating a subtle, motion-driven background layer | `npx shadcn@latest add https://www.scrollxui.dev/registry/dot-wave.json` |
| draggable-avatar | registry:ui | It displays a circular, draggable avatar with customizable size and style. | `npx shadcn@latest add https://www.scrollxui.dev/registry/draggable-avatar.json` |
| drift-card | registry:ui | An interactive card with a drift hover effect that visually highlights content. | `npx shadcn@latest add https://www.scrollxui.dev/registry/drift-card.json` |
| dropdown-menu | registry:ui | Animated Dropdown Menu Reveals a menu of options or actions when activated by a button. | `npx shadcn@latest add https://www.scrollxui.dev/registry/dropdown-menu.json` |
| dualsparks | registry:ui | Corner-based spark waves that radiate inward and outward with smooth motion. | `npx shadcn@latest add https://www.scrollxui.dev/registry/dualsparks.json` |
| electric-text | registry:ui | Animated electric text with glowing, distorted outline-solid for dynamic neon effects. | `npx shadcn@latest add https://www.scrollxui.dev/registry/electric-text.json` |
| expandable-cards | registry:ui | Interactive card layout where hovered cards expand smoothly for focused content viewing. | `npx shadcn@latest add https://www.scrollxui.dev/registry/expandable-cards.json` |
| expandable-dock | registry:ui | A customizable expandable dock component. | `npx shadcn@latest add https://www.scrollxui.dev/registry/expandable-dock.json` |
| facescape | registry:ui | Interactive, animated user avatars with hover effects and responsive layout. | `npx shadcn@latest add https://www.scrollxui.dev/registry/facescape.json` |
| fancy-text | registry:ui | A refined text reveal animation with smooth character motion and a clean, modern visual flow. | `npx shadcn@latest add https://www.scrollxui.dev/registry/fancy-text.json` |
| flashy-card | registry:ui | Interactive card with smooth animated activation and visual effects. | `npx shadcn@latest add https://www.scrollxui.dev/registry/flashy-card.json` |
| flex-navbar | registry:ui | A modern navbar with smooth expansion, media panels, and theme controls. | `npx shadcn@latest add https://www.scrollxui.dev/registry/flex-navbar.json` |
| flipflow | registry:ui | A looping flow of flip cards with smooth motion and subtle interactive effects. | `npx shadcn@latest add https://www.scrollxui.dev/registry/flipflow.json` |
| flipstack | registry:ui | A stylish and animated card stack UI for showcasing content in layered views. | `npx shadcn@latest add https://www.scrollxui.dev/registry/flipstack.json` |
| flowing-logos | registry:ui | Flowing logo showcase with smooth animations, hover effects, and modern UI. | `npx shadcn@latest add https://www.scrollxui.dev/registry/flowing-logos.json` |
| folder | registry:ui | Interactive 3D Folder UI component with hover & click animations for modern apps. | `npx shadcn@latest add https://www.scrollxui.dev/registry/folder.json` |
| folder-tree | registry:ui | A customizable folder tree component for displaying hierarchical data with expandable nodes. | `npx shadcn@latest add https://www.scrollxui.dev/registry/folder-tree.json` |
| followcursor | registry:ui | Colorful, fluid cursor trails that respond to mouse movement. | `npx shadcn@latest add https://www.scrollxui.dev/registry/followcursor.json` |
| glass | registry:ui | glass surface with interactive ripple and dynamic cursor effects. | `npx shadcn@latest add https://www.scrollxui.dev/registry/glass.json` |
| glowingbordercard | registry:ui | A customizable card with a glowing border effect that changes colors based on light and dark modes. | `npx shadcn@latest add https://www.scrollxui.dev/registry/glowingbordercard.json` |
| globe | registry:ui | The Globe component creates beautiful 5kb WebGL Globe. | `npx shadcn@latest add https://www.scrollxui.dev/registry/globe.json` |
| globe-wireframe | registry:ui | The Globe Wireframe component creates beautiful globe with smooth city rotations, responsive design, and premium motion. | `npx shadcn@latest add https://www.scrollxui.dev/registry/globe-wireframe.json` |
| gravity | registry:ui | Gravity pulls objects as they launch, soar, and fall inside a container. | `npx shadcn@latest add https://www.scrollxui.dev/registry/gravity.json` |
| heroui | registry:ui | A set of hero sections ranging from simple to complex layouts. | `npx shadcn@latest add https://www.scrollxui.dev/registry/heroui.json` |
| hold-toconfirm | registry:ui | A button that requires holding down to confirm irreversible or critical actions. | `npx shadcn@latest add https://www.scrollxui.dev/registry/hold-toconfirm.json` |
| hyperlink | registry:ui | hyperlink component with animated underline, smooth hover & customizable style. | `npx shadcn@latest add https://www.scrollxui.dev/registry/hyperlink.json` |
| infinite-canvas | registry:ui | Infinite draggable canvas with zoomable, repeating cards and touch/mouse controls. | `npx shadcn@latest add https://www.scrollxui.dev/registry/infinite-canvas.json` |
| iphone | registry:ui | IPhone mockup with screen, header, and custom children content. | `npx shadcn@latest add https://www.scrollxui.dev/registry/iphone.json` |
| input-otp | registry:ui | A flexible Accessible one-time password component | `npx shadcn@latest add https://www.scrollxui.dev/registry/input-otp.json` |
| interactive-input | registry:ui | A highly customizable interactive input component with shimmer effects, glow, and visual styling options. | `npx shadcn@latest add https://www.scrollxui.dev/registry/interactive-input.json` |
| kbd | registry:ui | A component for displaying keyboard shortcuts and key combinations. | `npx shadcn@latest add https://www.scrollxui.dev/registry/kbd.json` |
| keyboard | registry:ui | Interactive keyboard component with customizable key styling and a beautifully minimal interface. | `npx shadcn@latest add https://www.scrollxui.dev/registry/keyboard.json` |
| kinetic-testimonials | registry:ui | Smoothly scrolling, animated testimonials for modern developer websites to showcase user feedback visually. | `npx shadcn@latest add https://www.scrollxui.dev/registry/kinetic-testimonials.json` |
| label | registry:ui | Displays an accessible label associated with controls. | `npx shadcn@latest add https://www.scrollxui.dev/registry/label.json` |
| lamphome | registry:ui | A stylish, animated header component with dark/light mode toggle functionality. | `npx shadcn@latest add https://www.scrollxui.dev/registry/lamphome.json` |
| layered-button | registry:ui | A layered button with a radial expand effect and smooth sliding hover label animation. | `npx shadcn@latest add https://www.scrollxui.dev/registry/layered-button.json` |
| layer-stack | registry:ui | Interactive stacked card layout with drag and scroll momentum. | `npx shadcn@latest add https://www.scrollxui.dev/registry/layer-stack.json` |
| layered-text | registry:ui | Layered text effect with offset shadows, customizable styling, and animations. | `npx shadcn@latest add https://www.scrollxui.dev/registry/layered-text.json` |
| lean-card | registry:ui | A card component with a striped back card revealed on hover | `npx shadcn@latest add https://www.scrollxui.dev/registry/lean-card.json` |
| loader | registry:ui | Animated versatile loader with different variants, customizable size and content. | `npx shadcn@latest add https://www.scrollxui.dev/registry/loader.json` |
| loginform | registry:ui | Modern, responsive login form with smooth transitions and gradient accents. | `npx shadcn@latest add https://www.scrollxui.dev/registry/loginform.json` |
| logo-stepper | registry:ui | logo showcase with names, smooth animations, hover effects, and modern UI. | `npx shadcn@latest add https://www.scrollxui.dev/registry/logo-stepper.json` |
| lustretext | registry:ui | A lustrous text component with animated gradient shine. | `npx shadcn@latest add https://www.scrollxui.dev/registry/lustretext.json` |
| magicdock | registry:ui | MacOS-style React dock with smooth animation and customizable magnification. | `npx shadcn@latest add https://www.scrollxui.dev/registry/magicdock.json` |
| media-card | registry:ui | An Interactive media cards with a fluid cursor and a polished, modern aesthetic. | `npx shadcn@latest add https://www.scrollxui.dev/registry/media-card.json` |
| meteor-orbit | registry:ui | orbit system featuring rotating meteors and gracefully animated icons. | `npx shadcn@latest add https://www.scrollxui.dev/registry/meteor-orbit.json` |
| modern-loader | registry:ui | A modern, dynamic code loader designed for AI-powered coding environments. | `npx shadcn@latest add https://www.scrollxui.dev/registry/modern-loader.json` |
| movinglines-background | registry:ui | A set of diagonal lines that move continuously. Great for hero backgrounds. | `npx shadcn@latest add https://www.scrollxui.dev/registry/movinglines-background.json` |
| motioncards | registry:ui | Elegant cards in seamless flow for clean web design. | `npx shadcn@latest add https://www.scrollxui.dev/registry/motioncards.json` |
| motion-grid | registry:ui | A set of diagonal lines that move continuously with gradientglow. | `npx shadcn@latest add https://www.scrollxui.dev/registry/motion-grid.json` |
| motion-navbar | registry:ui | modern react navbar with smooth animations, dropdown menus, and mobile-friendly design. | `npx shadcn@latest add https://www.scrollxui.dev/registry/motion-navbar.json` |
| morphotextflip | registry:ui | Animated text component that flips between words with smooth transitions. | `npx shadcn@latest add https://www.scrollxui.dev/registry/morphotextflip.json` |
| morphy-button | registry:ui | Morphing button with dynamic dot motion, reversible animation. | `npx shadcn@latest add https://www.scrollxui.dev/registry/morphy-button.json` |
| navbar-flow | registry:ui | A customizable, animated navigation bar with hover effects and dropdowns. | `npx shadcn@latest add https://www.scrollxui.dev/registry/navbar-flow.json` |
| not-found | registry:ui | A beautifully designed 404 page to guide users when content is missing. | `npx shadcn@latest add https://www.scrollxui.dev/registry/not-found.json` |
| orb-button | registry:ui | Modern orb-style button featuring smooth hover expansion and icon reveal. | `npx shadcn@latest add https://www.scrollxui.dev/registry/orb-button.json` |
| pagination | registry:ui | A flexible and animated pagination component with active and hover states. | `npx shadcn@latest add https://www.scrollxui.dev/registry/pagination.json` |
| particles | registry:ui | Dynamic 3D particle system with customizable properties | `npx shadcn@latest add https://www.scrollxui.dev/registry/particles.json` |
| parallaxcards | registry:ui | A vertical sticky-scroll component that displays stacked cards with parallax behavior. | `npx shadcn@latest add https://www.scrollxui.dev/registry/parallaxcards.json` |
| pixel-background | registry:ui | A flexible pixel animation background with customizable origins and smooth atmospheric motion. | `npx shadcn@latest add https://www.scrollxui.dev/registry/pixel-background.json` |
| pixel-highlight | registry:ui | Animated pixel-based text reveal with directional shimmer using canvas-rendered particles. | `npx shadcn@latest add https://www.scrollxui.dev/registry/pixel-highlight.json` |
| popover | registry:ui | Displays rich content in a animated portal, triggered by a button. | `npx shadcn@latest add https://www.scrollxui.dev/registry/popover.json` |
| profilecard | registry:ui | A reusable profile card component displaying a user's image, name, bio, skills, and social links with interactive animations. | `npx shadcn@latest add https://www.scrollxui.dev/registry/profilecard.json` |
| progress | registry:ui | Displays an indicator showing the completion progress of a task, typically displayed as a progress bar. | `npx shadcn@latest add https://www.scrollxui.dev/registry/progress.json` |
| radialflow | registry:ui | Dynamic radial graph for visualizing networks & hierarchies with animated nodes. | `npx shadcn@latest add https://www.scrollxui.dev/registry/radialflow.json` |
| radio-group | registry:ui | A group of radio buttons that lets you pick only one option at a time. | `npx shadcn@latest add https://www.scrollxui.dev/registry/radio-group.json` |
| radial-socials | registry:ui | radial social icons arranged in circles, with smooth expansion and rotation | `npx shadcn@latest add https://www.scrollxui.dev/registry/radial-socials.json` |
| reel | registry:ui | A scrolling media strip that displays images and videos in flowing rows. | `npx shadcn@latest add https://www.scrollxui.dev/registry/reel.json` |
| reveal-text | registry:ui | a clean text reveal component providing directional animation and stagger options. | `npx shadcn@latest add https://www.scrollxui.dev/registry/reveal-text.json` |
| search-cell | registry:ui | An animated search input illustration that cycles through queries with a typewriter effect and blur-in result rows. | `npx shadcn@latest add https://www.scrollxui.dev/registry/search-cell.json` |
| select | registry:ui | Displays an animated list of options for the user to choose from —smoothly triggered by a button. | `npx shadcn@latest add https://www.scrollxui.dev/registry/select.json` |
| sensitive-text | registry:ui | Interactive text that subtly compresses or stretches characters based on cursor proximity. | `npx shadcn@latest add https://www.scrollxui.dev/registry/sensitive-text.json` |
| shiny-button | registry:ui | Interactive button with spotlight effect that follows mouse cursor and highlights borders on hover. | `npx shadcn@latest add https://www.scrollxui.dev/registry/shiny-button.json` |
| showcase | registry:ui | An interactive showcase component with smooth content and image transitions. | `npx shadcn@latest add https://www.scrollxui.dev/registry/showcase.json` |
| side-sheet | registry:ui | A customizable sheet component for creating elegant slide-out interfaces. | `npx shadcn@latest add https://www.scrollxui.dev/registry/side-sheet.json` |
| signupform | registry:ui | Modern, responsive signup form with smooth transitions and gradient accents. | `npx shadcn@latest add https://www.scrollxui.dev/registry/signupform.json` |
| slider | registry:ui | An interactive slider with glass effects for selecting values smoothly within a range. | `npx shadcn@latest add https://www.scrollxui.dev/registry/slider.json` |
| slide-text | registry:ui | Slide Text | `npx shadcn@latest add https://www.scrollxui.dev/registry/slide-text.json` |
| status | registry:ui | A small status component with customizable variants, indicator and shiny animation effects. | `npx shadcn@latest add https://www.scrollxui.dev/registry/status.json` |
| statscount | registry:ui | Animated statistics counter with responsive layout and scroll triggers. | `npx shadcn@latest add https://www.scrollxui.dev/registry/statscount.json` |
| stagger-button | registry:ui | Interactive button with animated stagger text and customizable styles for modern uis. | `npx shadcn@latest add https://www.scrollxui.dev/registry/stagger-button.json` |
| stagger-chars | registry:ui | An animated text component that creates a smooth, staggered character animation effect when hovered | `npx shadcn@latest add https://www.scrollxui.dev/registry/stagger-chars.json` |
| statscarousel | registry:ui | Animated statistics counter in stacked carousel for modern websites. | `npx shadcn@latest add https://www.scrollxui.dev/registry/statscarousel.json` |
| stripe-button | registry:ui | Smooth animated button crafted with refined glow and modern motion. | `npx shadcn@latest add https://www.scrollxui.dev/registry/stripe-button.json` |
| striped-grid | registry:ui | Animated diagonal stripes with optional base grid, creating a dynamic textured background. | `npx shadcn@latest add https://www.scrollxui.dev/registry/striped-grid.json` |
| spark-waves | registry:ui | Vertical wave bars animate in symmetry, forming a subtle motion-driven background layer. | `npx shadcn@latest add https://www.scrollxui.dev/registry/spark-waves.json` |
| splitter | registry:ui | A customizable splitter component with collapsible panels and smooth animations. | `npx shadcn@latest add https://www.scrollxui.dev/registry/splitter.json` |
| spotlightcard | registry:ui | An interactive card with a spotlight hover effect that highlights content and enhances user engagement visually. | `npx shadcn@latest add https://www.scrollxui.dev/registry/spotlightcard.json` |
| seperatorpro | registry:ui | Separates layout sections with customizable styles and orientations. | `npx shadcn@latest add https://www.scrollxui.dev/registry/seperatorpro.json` |
| scroll-areapro | registry:ui | advanced scrollarea with auto-hide scrollbars, progress bars, and cross-axis scroll. | `npx shadcn@latest add https://www.scrollxui.dev/registry/scroll-areapro.json` |
| social-orbit | registry:ui | orbits your socials in smooth motion where icons spin, ripple, and glow with purpose. | `npx shadcn@latest add https://www.scrollxui.dev/registry/social-orbit.json` |
| squonk | registry:ui | elastic squircles illustration with fall and shrink movement. | `npx shadcn@latest add https://www.scrollxui.dev/registry/squonk.json` |
| table | registry:ui | Powerful responsive data table with sticky headers, smooth scrolling, sorting, and pagination. | `npx shadcn@latest add https://www.scrollxui.dev/registry/table.json` |
| testimonial-carousel | registry:ui | Minimal, responsive testimonial slider with avatars, names, and quotes for clean, modern design. | `npx shadcn@latest add https://www.scrollxui.dev/registry/testimonial-carousel.json` |
| text-highlighter | registry:ui | A customizable text highlighter with smooth animated highlights to emphasize key text. | `npx shadcn@latest add https://www.scrollxui.dev/registry/text-highlighter.json` |
| text-modifier | registry:ui | text highlighter with solid background and decorative markers for emphasis.. | `npx shadcn@latest add https://www.scrollxui.dev/registry/text-modifier.json` |
| text-spotlight | registry:ui | spotlight text effect with hover and mobile reveal, customizable size and color. | `npx shadcn@latest add https://www.scrollxui.dev/registry/text-spotlight.json` |
| theme-switch | registry:ui | A flexible and accessible theme mode switcher component for Next.js projects using next-themes. | `npx shadcn@latest add https://www.scrollxui.dev/registry/theme-switch.json` |
| thunder-loader | registry:ui | Animated thunderbolt loader with glow and shimmer effects, customizable sizes and colors. | `npx shadcn@latest add https://www.scrollxui.dev/registry/thunder-loader.json` |
| timeline | registry:ui | Smoothly animated timeline slider with resizable handles for interactive use. | `npx shadcn@latest add https://www.scrollxui.dev/registry/timeline.json` |
| top-sheet | registry:ui | A customizable component for creating elegant, slide-out panels from the top of the screen. | `npx shadcn@latest add https://www.scrollxui.dev/registry/top-sheet.json` |
| toast | registry:ui | A customizable and responsive toast notification system. | `npx shadcn@latest add https://www.scrollxui.dev/registry/toast.json` |
| toggle-vault | registry:ui | Expandable vault component with animated open/close, trigger button, and content panel. | `npx shadcn@latest add https://www.scrollxui.dev/registry/toggle-vault.json` |
| tooltip | registry:ui | An interactive, animated popup that displays information related to an element when it receives keyboard focus or when the mouse hovers over it. | `npx shadcn@latest add https://www.scrollxui.dev/registry/tooltip.json` |
| transition | registry:ui | Smooth page transitions with curved or slide effects. | `npx shadcn@latest add https://www.scrollxui.dev/registry/transition.json` |
| typeanimation | registry:ui | Displays an animated typing effect. | `npx shadcn@latest add https://www.scrollxui.dev/registry/typeanimation.json` |
| venom-beam | registry:ui | A glowing particle canvas with motion-reactive trails. Perfect for immersive, high-tech hero sections. | `npx shadcn@latest add https://www.scrollxui.dev/registry/venom-beam.json` |
| vercel-card | registry:ui | A smooth interactive vercel inspired card. | `npx shadcn@latest add https://www.scrollxui.dev/registry/vercel-card.json` |
| wavy-button | registry:ui | Interactive wavybutton with animated text and customizable styles for modern uis. | `npx shadcn@latest add https://www.scrollxui.dev/registry/wavy-button.json` |
| whitestripes | registry:ui | Dynamic motion background for hero sections and modern layouts. | `npx shadcn@latest add https://www.scrollxui.dev/registry/whitestripes.json` |
| bento-with-focus | registry:block | Modern Bento Grid with blur and smooth reveal animations. | `npx shadcn@latest add https://www.scrollxui.dev/registry/bento-with-focus.json` |
| contact-with-globe | registry:block | Modern Contact with globe and smooth reveal animations. | `npx shadcn@latest add https://www.scrollxui.dev/registry/contact-with-globe.json` |
| contact-with-pixelbackground | registry:block | Minimal contact section with animated pixel background and stagger button. | `npx shadcn@latest add https://www.scrollxui.dev/registry/contact-with-pixelbackground.json` |
| cta-section-with-avatars | registry:block | Modern CTA with avatars and smooth reveal animations. | `npx shadcn@latest add https://www.scrollxui.dev/registry/cta-section-with-avatars.json` |
| cta-section-with-dashed-border | registry:block | CTA section with dashed border effects. | `npx shadcn@latest add https://www.scrollxui.dev/registry/cta-section-with-dashed-border.json` |
| cta-section-with-floating-gallery | registry:block | CTA section with staggered image gallery. | `npx shadcn@latest add https://www.scrollxui.dev/registry/cta-section-with-floating-gallery.json` |
| download-with-columnlines | registry:block | A download section with subtle column lines. | `npx shadcn@latest add https://www.scrollxui.dev/registry/download-with-columnlines.json` |
| download-with-iphone | registry:block | A download section with an iPhone mockup. | `npx shadcn@latest add https://www.scrollxui.dev/registry/download-with-iphone.json` |
| features-with-panel | registry:block | Interactive feature list with sticky media panel and smooth transitions. | `npx shadcn@latest add https://www.scrollxui.dev/registry/features-with-panel.json` |
| features-with-spotlight | registry:block | Interactive feature list with animated spotlight panel and smooth transitions. | `npx shadcn@latest add https://www.scrollxui.dev/registry/features-with-spotlight.json` |
| footer-with-faded-brand | registry:block | Modern footer with oversized faded brand name and smooth transitions. | `npx shadcn@latest add https://www.scrollxui.dev/registry/footer-with-faded-brand.json` |
| footer-with-minimal-outline | registry:block | Clean footer with minimal outlined brand text and smooth animations. | `npx shadcn@latest add https://www.scrollxui.dev/registry/footer-with-minimal-outline.json` |
| footer-with-newsletter | registry:block | Interactive footer with newsletter and smooth transitions. | `npx shadcn@latest add https://www.scrollxui.dev/registry/footer-with-newsletter.json` |
| footer-with-suite | registry:block | Modern footer with oversized split sections. | `npx shadcn@latest add https://www.scrollxui.dev/registry/footer-with-suite.json` |
| frequently-asked-questions-with-accordion | registry:block | Elegant and minimal FAQs with grid, accordions and micro-interactions | `npx shadcn@latest add https://www.scrollxui.dev/registry/frequently-asked-questions-with-accordion.json` |
| frequently-asked-questions-stack | registry:block | A modern FAQ section with layered stack design and smooth scroll-triggered animations. | `npx shadcn@latest add https://www.scrollxui.dev/registry/frequently-asked-questions-stack.json` |
| hero-with-cards | registry:block | A hero section with a fan of photo cards and animated entrance. | `npx shadcn@latest add https://www.scrollxui.dev/registry/hero-with-cards.json` |
| hero-with-iphone | registry:block | A hero section with an iPhone mockup and animated background. | `npx shadcn@latest add https://www.scrollxui.dev/registry/hero-with-iphone.json` |
| hero-with-layers | registry:block | A hero-section for AI startups | `npx shadcn@latest add https://www.scrollxui.dev/registry/hero-with-layers.json` |
| hero-with-pixelbackground | registry:block | A hero-section for modern AI interfaces with motion. | `npx shadcn@latest add https://www.scrollxui.dev/registry/hero-with-pixelbackground.json` |
| hero-with-reel | registry:block | A hero section with an animated image reel and motion entrance. | `npx shadcn@latest add https://www.scrollxui.dev/registry/hero-with-reel.json` |
| login-minimal | registry:block | A clean, animated login form with Google OAuth and email/password fields. | `npx shadcn@latest add https://www.scrollxui.dev/registry/login-minimal.json` |
| logo-cloud-flipflow | registry:block | A logo-cloud for AI startups with flipflow animation. | `npx shadcn@latest add https://www.scrollxui.dev/registry/logo-cloud-flipflow.json` |
| logo-cloud-marquee | registry:block | A logo cloud with flowing marquee motion, perfect for bold AI startups. | `npx shadcn@latest add https://www.scrollxui.dev/registry/logo-cloud-marquee.json` |
| logo-cloud-with-minimal-animation | registry:block | A clean logo cloud with smooth blur and fade-in animations. | `npx shadcn@latest add https://www.scrollxui.dev/registry/logo-cloud-with-minimal-animation.json` |
| not-found-with-glitchytext | registry:block | A clean 404 page with glitch animation and smooth reveal transitions. | `npx shadcn@latest add https://www.scrollxui.dev/registry/not-found-with-glitchytext.json` |
| pricing-minimal | registry:block | A clean three-tier pricing section with a highlighted popular plan. | `npx shadcn@latest add https://www.scrollxui.dev/registry/pricing-minimal.json` |
| pricing-with-switch | registry:block | A pricing section with a monthly/yearly billing toggle, animated card reveal. | `npx shadcn@latest add https://www.scrollxui.dev/registry/pricing-with-switch.json` |
| signup-minimal | registry:block | A clean, animated signup form with Google OAuth and email/password fields. | `npx shadcn@latest add https://www.scrollxui.dev/registry/signup-minimal.json` |
| testimonials-with-carousel | registry:block | A testimonial carousel with staggered title animations and smooth transitions, showcasing customer feedback in an elegant layout. | `npx shadcn@latest add https://www.scrollxui.dev/registry/testimonials-with-carousel.json` |
| testimonials-with-verticalmarquee | registry:block | Vertical scrolling testimonial columns with alternating directions and smooth infinite animations. | `npx shadcn@latest add https://www.scrollxui.dev/registry/testimonials-with-verticalmarquee.json` |
| testimonials-with-marquee | registry:block | Horizontal scrolling testimonials with infinite marquee animation across multiple rows. | `npx shadcn@latest add https://www.scrollxui.dev/registry/testimonials-with-marquee.json` |
| waitlist-with-iphone | registry:block | A waitlist section with an iPhone mockup. | `npx shadcn@latest add https://www.scrollxui.dev/registry/waitlist-with-iphone.json` |
| waitlist-with-layers | registry:block | Waitlist section with a draggable stack of layered image cards. | `npx shadcn@latest add https://www.scrollxui.dev/registry/waitlist-with-layers.json` |

## For AI agents

```text
You are adding components from @scrollxui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/scrollxui.md) for the component list.
2. Fetch the machine-readable index: https://www.scrollxui.dev/registry/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: scrollxui).
```