sh4dcnv2 · atlas
← libraries

@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.

60 components react shadcn-cli

Install this registry

shadcn (npm) npx shadcn@latest add https://www.scrollxui.dev/registry/registry.json
pnpm pnpm dlx shadcn@latest add https://www.scrollxui.dev/registry/registry.json
bun bunx shadcn@latest add https://www.scrollxui.dev/registry/registry.json
fetch registry curl -s https://www.scrollxui.dev/registry/registry.json

Components

60 total
Utils lib
npx shadcn@latest add https://www.scrollxui.dev/registry/utils.json
Accordion ui

A collapsible component for showing and hiding content sections.

npx shadcn@latest add https://www.scrollxui.dev/registry/accordion.json
Alert Dialog 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 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 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 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 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 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 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 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 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 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
Background Meteors 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 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 ui

A small badge component with customizable variants and shiny animation effects.

npx shadcn@latest add https://www.scrollxui.dev/registry/badge.json
BarsWave 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 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 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 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 ui

Modern UI cards with a moving border and smooth transitions.

npx shadcn@latest add https://www.scrollxui.dev/registry/border-glide.json
Button ui

Reusable button component with multiple variants and sizes.

npx shadcn@latest add https://www.scrollxui.dev/registry/button.json
Card 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 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 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 ui

A carousel component with card stack visualization for cycling through content.

npx shadcn@latest add https://www.scrollxui.dev/registry/carousel.json
Calendar 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 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 ui

Animated checklist illustration with sliding tasks and progressive completion.

npx shadcn@latest add https://www.scrollxui.dev/registry/checklist-cell.json
Clock 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 ui

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

npx shadcn@latest add https://www.scrollxui.dev/registry/codeblock.json
Collapsible 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 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 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 ui

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

npx shadcn@latest add https://www.scrollxui.dev/registry/cursor-highlight.json
Cursor ImageTrail 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 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 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 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 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 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
Dual Sparks 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 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 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 ui

A customizable expandable dock component.

npx shadcn@latest add https://www.scrollxui.dev/registry/expandable-dock.json
Facescape ui

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

npx shadcn@latest add https://www.scrollxui.dev/registry/facescape.json
Fancy Text 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 ui

Interactive card with smooth animated activation and visual effects.

npx shadcn@latest add https://www.scrollxui.dev/registry/flashy-card.json
Flex Navbar 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 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 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 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 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 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
Follow Cursor ui

Colorful, fluid cursor trails that respond to mouse movement.

npx shadcn@latest add https://www.scrollxui.dev/registry/followcursor.json
Glass ui

glass surface with interactive ripple and dynamic cursor effects.

npx shadcn@latest add https://www.scrollxui.dev/registry/glass.json
Glowing Border Card 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 ui

The Globe component creates beautiful 5kb WebGL Globe.

npx shadcn@latest add https://www.scrollxui.dev/registry/globe.json
Globe Wireframe 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 ui

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

npx shadcn@latest add https://www.scrollxui.dev/registry/gravity.json
Hero Sections ui

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

npx shadcn@latest add https://www.scrollxui.dev/registry/heroui.json