# ScrollX UI > ScrollX UI is an open-source React component library featuring animated, customizable components designed for modern web interfaces. It provides beautifully crafted animations, theming support, high performance, modular architecture, and responsive design. All components are written in TypeScript and styled with Tailwind CSS. The library includes a wide range of UI elements such as interactive cards, buttons, modals, text animations, backgrounds, and section blocks — all optimized for accessibility and developer experience. **Important notes for agents:** - ScrollX UI has 100+ components and is actively growing with daily additions. - All components are AI-ready and work seamlessly with modern frameworks. - Components can be installed via CLI (shadcn) or manually copied. - Each component includes variants, dependencies, and usage examples. ## Documentation - [Homepage](https://www.scrollxui.dev): Main landing page with component showcase and library overview. - [Introduction](https://www.scrollxui.dev/docs/introduction): Overview of ScrollX UI, its features, and design philosophy. - [Installation](https://www.scrollxui.dev/docs/installation): Installation guide with both CLI and manual setup options. - [Manual Installation](https://www.scrollxui.dev/docs/installation/manual): Step-by-step manual installation instructions. - [CLI Installation](https://www.scrollxui.dev/docs/installation/cli): Command-line installation using shadcn CLI with MCP server setup. ## Key Features - **Beautiful Animations:** Pre-built animation components with smooth transitions - **Theming Support:** Dark mode and customizable color schemes via CSS variables - **High Performance:** Optimized for speed with minimal bundle size - **Modular Architecture:** Import only what you need - **TypeScript First:** Full type safety and IntelliSense support - **Accessibility:** WCAG compliant with proper ARIA attributes - **Framework Agnostic:** Works with Next.js, Remix, Vite, and other React frameworks - **AI-Ready:** Designed to work seamlessly with AI assistants via MCP ## CLI Installation ### Using shadcn CLI **Basic Installation:** ```bash npx shadcn@latest add https://scrollxui.dev/registry/[component].json ``` **Example:** ```bash npx shadcn@latest add https://scrollxui.dev/registry/alert-dialog.json ``` ### Shadcn CLI 3.0 (Namespaced Registry) 1. Edit your `components.json` file: ```json { "registries": { "@scrollxui": "https://www.scrollxui.dev/registry/{name}.json" } } ``` 2. Install components using the namespace: ```bash npx shadcn@latest add @scrollxui/[component] ``` **Example:** ```bash npx shadcn@latest add @scrollxui/profilecard ``` ### CLI Commands - **View registry items:** `npx shadcn@latest view @scrollxui` - **Search components:** `npx shadcn@latest search @scrollxui -q "search-term"` - **List all components:** `npx shadcn@latest list @scrollxui` ### MCP Server Setup The shadcn MCP Server allows AI assistants to interact with ScrollX UI components: 1. Initialize the MCP server: ```bash npx shadcn@latest mcp init ``` 2. Configure for your AI assistant: - **Cursor:** `npx shadcn@latest mcp init --client cursor` - **Claude:** `npx shadcn@latest mcp init --client claude` - **VS Code:** `npx shadcn@latest mcp init --client vscode` ## Manual Installation ### Prerequisites 1. **Install Tailwind CSS** - Follow the [Tailwind CSS installation guide](https://tailwindcss.com/docs/installation/framework-guides/nextjs) 2. **Add Dependencies:** ```bash npm install class-variance-authority clsx tailwind-merge lucide-react tw-animate-css ``` 3. **Configure Path Aliases** in `tsconfig.json`: ```json { "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["./*"] } } } ``` 4. **Create Utility Function** at `lib/utils.ts`: ```typescript import { ClassValue, clsx } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } ``` 5. **Create components.json** in your project root: ```json { "$schema": "https://ui.shadcn.com/schema.json", "style": "new-york", "rsc": false, "tsx": true, "tailwind": { "config": "", "css": "src/styles/globals.css", "baseColor": "neutral", "cssVariables": true, "prefix": "" }, "aliases": { "components": "@/components", "utils": "@/lib/utils", "ui": "@/components/ui", "lib": "@/lib", "hooks": "@/hooks" }, "iconLibrary": "lucide" } ``` For complete setup including CSS variables and theming, see: https://www.scrollxui.dev/docs/installation/manual ## Components ScrollX UI includes 100+ beautifully designed components. All components are: - Written in TypeScript with full type safety - Styled with Tailwind CSS for easy customization - Optimized for accessibility (WCAG compliant) - Responsive and mobile-first - Production-ready with minimal dependencies ### Component Library - [Accordion](https://www.scrollxui.dev/docs/components/accordion): A vertically stacked set of interactive headings that each reveal a section of content. - [Alert Dialog](https://www.scrollxui.dev/docs/components/alert-dialog): A modal dialog used to convey critical information and require a user response before proceeding.. - [Animated Button](https://www.scrollxui.dev/docs/components/animated-button): AnimatedButton is a highly customizable animated button component with shimmer effects, glow, and visual styling options. - [Animated Tabs](https://www.scrollxui.dev/docs/components/animated-tabs): A headless and styled tab UI component set for switching content views. - [Animated Testimonials](https://www.scrollxui.dev/docs/components/animated-testimonials): Minimal testimonials with image and quote for clean, modern design. - [Animated TextGenerate](https://www.scrollxui.dev/docs/components/animated-textgenerate): Generates animated text word-by-word with blur, highlights, links, and smooth effects. - [Announcement](https://www.scrollxui.dev/docs/components/announcement): An announcement component that highlights key info with icons, effects, and expandable content. - [Aspect Ratio](https://www.scrollxui.dev/docs/components/aspect-ratio): A responsive container component that maintains a fixed aspect ratio, commonly used for media like images and videos. - [Avatar](https://www.scrollxui.dev/docs/components/avatar): Customizable Avatar component with animated borders for status indicators like "close friends" or "normal story". - [Background Meteors](https://www.scrollxui.dev/docs/components/backgroundmeteors): Grid Background with Meteors. - [Background Paths](https://www.scrollxui.dev/docs/components/background-paths): A set of SVG paths that animate as if being drawn. Great for tech hero backgrounds. - [Badge](https://www.scrollxui.dev/docs/components/badge): A small badge component with customizable variants and shiny animation effects. - [Beams Upstream](https://www.scrollxui.dev/docs/components/beams-upstream): Multiple background beams travel upstream, forming a hero section background. - [Border Glide](https://www.scrollxui.dev/docs/components/border-glide): Modern UI cards with a moving border and smooth transitions. - [Button](https://www.scrollxui.dev/docs/components/button): Reusable button component with multiple variants and sizes. - [Calendar](https://www.scrollxui.dev/docs/components/calendar): A date field component that enables users to choose and edit a date. - [Card](https://www.scrollxui.dev/docs/components/card): Renders a card component comprising a header, content section, and footer... - [Card Flip](https://www.scrollxui.dev/docs/components/card-flip): Renders a card component with flip animation, supporting front/back content. - [Carousel](https://www.scrollxui.dev/docs/components/carousel): A carousel component with card stack visualization for cycling through content. - [Checkbox Pro](https://www.scrollxui.dev/docs/components/checkbox-pro): A switchable element to mark an option as checked or unchecked. - [Clock](https://www.scrollxui.dev/docs/components/clock): clock component with rotating hands and glowing effects, perfect for CTA sections. - [CodeBlock](https://www.scrollxui.dev/docs/components/codeblock): Syntax-highlighted codeblock component built on top of react-syntax-highlighter. - [Collapsible](https://www.scrollxui.dev/docs/components/collapsible): An interactive component which expands/collapses a panel with a smooth motion. - [Cursor Highlight](https://www.scrollxui.dev/docs/components/cursor-highlight): Text is revealed on scroll with pointer, gradient, and border effects. - [Cursor ImageTrail](https://www.scrollxui.dev/docs/components/cursorimagetrail): mouse trail component with animated image effects on hover. - [Draggable Avatar](https://www.scrollxui.dev/docs/components/draggable-avatar): It displays a circular, draggable avatar with customizable size and style. - [Dropdown Menu](https://www.scrollxui.dev/docs/components/dropdown-menu): Animated Dropdown Reveals a menu of options or actions when activated by a button. - [Expandable Dock](https://www.scrollxui.dev/docs/components/expandable-dock): Smooth animated expandable dock with header and collapsible content area. - [Facescape](https://www.scrollxui.dev/docs/components/facescape): Interactive, animated user avatars with hover effects and responsive layout. - [FlipStack](https://www.scrollxui.dev/docs/components/flipstack): A stylish and animated card stack UI for showcasing content in layered views. - [Flowing Logos](https://www.scrollxui.dev/docs/components/flowing-logos): Flowing logo showcase with smooth animations, hover effects, and modern UI. - [Folder](https://www.scrollxui.dev/docs/components/folder): Interactive 3D Folder UI component with hover & click animations for modern sites. - [Folder Tree](https://www.scrollxui.dev/docs/components/folder-tree): A customizable folder tree component for displaying hierarchical data with expandable nodes. - [Follow Cursor](https://www.scrollxui.dev/docs/components/followcursor): Colorful, fluid cursor trails that respond to mouse movement. - [Glass](https://www.scrollxui.dev/docs/components/glass): glass surface with interactive ripple and dynamic cursor effects. - [Globe](https://www.scrollxui.dev/docs/components/globe): 5kb WebGL Globe. - [Glowing Border Card](https://www.scrollxui.dev/docs/components/glowingbordercard): A customizable card with a glowing border effect that changes colors based on light and dark modes. - [Gravity](https://www.scrollxui.dev/docs/components/gravity): Gravity pulls objects as they launch, soar, and fall inside a container. - [Hero Sections](https://www.scrollxui.dev/docs/components/hero-sections): A set of hero sections ranging from simple to complex layouts. - [Hold ToConfirm](https://www.scrollxui.dev/docs/components/hold-toconfirm): A button that requires holding down to confirm irreversible or critical actions. - [Hyperlink](https://www.scrollxui.dev/docs/components/hyperlink): Hyperlink component with animated underline, smooth hover & customizable style. - [Input Otp](https://www.scrollxui.dev/docs/components/input-otp): A flexible Accessible one-time password component. - [Interactive input](https://www.scrollxui.dev/docs/components/interactive-input): InteractiveInput is a highly customizable interactive input component with shimmer effects, glow, and visual styling options. - [Iphone](https://www.scrollxui.dev/docs/components/iphone): IPhone mockup with screen, header, and custom children content. - [Kbd](https://www.scrollxui.dev/docs/components/kbd): A component for displaying keyboard shortcuts and key combinations. - [Kinetic Testimonials](https://www.scrollxui.dev/docs/components/kinetic-testimonials): Smoothly scrolling, animated testimonials for modern developer websites to showcase user feedback visually. - [Label](https://www.scrollxui.dev/docs/components/label): Displays an accessible label associated with controls. - [Lamphome](https://www.scrollxui.dev/docs/components/lamphome): A stylish, animated header component with dark/light mode toggle functionality. - [Layered Text](https://www.scrollxui.dev/docs/components/layered-text): Layered text effect with offset shadows, customizable styling, and animations. - [Loader](https://www.scrollxui.dev/docs/components/loader): Animated versatile loader with different variants, customizable size and content. - [Login Form](https://www.scrollxui.dev/docs/components/loginform): Modern, responsive login form with smooth transitions and gradient accents. - [Logo Stepper](https://www.scrollxui.dev/docs/components/logo-stepper): logo showcase with names, smooth animations, hover effects, and modern UI. - [Lustre Text](https://www.scrollxui.dev/docs/components/lustretext): A lustrous text component with animated gradient shine. - [Magic Dock](https://www.scrollxui.dev/docs/components/magicdock): MacOS-style React dock with smooth animation and customizable magnification. - [Meteor Orbit](https://www.scrollxui.dev/docs/components/meteor-orbit): orbit system featuring rotating meteors and gracefully animated icons. - [Modern Loader](https://www.scrollxui.dev/docs/components/modern-loader): A modern, dynamic code loader designed for AI-powered coding environments. - [MorphoText Flip](https://www.scrollxui.dev/docs/components/morphotextflip): Animated text component that flips between words with smooth transitions. - [Morphy Button](https://www.scrollxui.dev/docs/components/morphy-button): Morphing button with dynamic dot motion, reversible animation. - [MotionCards](https://www.scrollxui.dev/docs/components/motioncards): Elegant cards in seamless flow for clean web design. - [MovingLines Background](https://www.scrollxui.dev/docs/components/movinglines-background): A set of diagonal lines that move continuously. Great for hero backgrounds. - [Navbar Flow](https://www.scrollxui.dev/docs/components/navbar-flow): Animated navbar component with flowing SVG connections and dropdown menus. - [Not Found](https://www.scrollxui.dev/docs/components/not-found): A beautifully designed 404 page to guide users when content is missing. - [Pagination](https://www.scrollxui.dev/docs/components/pagination): A flexible and animated pagination component with active and hover states. - [Parallax Cards](https://www.scrollxui.dev/docs/components/parallaxcards): A vertical sticky-scroll component that displays stacked cards with parallax behavior. - [Particles](https://www.scrollxui.dev/docs/components/particles): Dynamic 3D particle system with customizable properties. - [Popover](https://www.scrollxui.dev/docs/components/popover): Displays rich content in a animated portal, triggered by a button. - [Profile Card](https://www.scrollxui.dev/docs/components/profilecard): A reusable profile card component displaying a user's image, name, bio, skills, and social links with interactive animations. - [Progress](https://www.scrollxui.dev/docs/components/progress): Displays an indicator showing the completion progress of a task, typically displayed as a progress bar. - [Radial Flow](https://www.scrollxui.dev/docs/components/radialflow): Dynamic radial graph for visualizing networks & hierarchies with animated nodes. - [Radial Socials](https://www.scrollxui.dev/docs/components/radial-socials): radial social icons arranged in circles, with smooth expansion and rotation. - [ScrollArea Pro](https://www.scrollxui.dev/docs/components/scroll-areapro): Advanced ScrollArea with auto-hide scrollbars, progress bars, and cross-axis scroll. - [Seperator Pro](https://www.scrollxui.dev/docs/components/seperatorpro): Separates layout sections with customizable styles and orientations. - [Side Sheet](https://www.scrollxui.dev/docs/components/side-sheet): A customizable sheet component for creating elegant slide-out interfaces. - [Signup Form](https://www.scrollxui.dev/docs/components/signupform): Modern, responsive signup form with smooth transitions and gradient accents. - [Slider](https://www.scrollxui.dev/docs/components/slider): An interactive slider with glass effects for selecting values smoothly within a range. - [Social Orbit](https://www.scrollxui.dev/docs/components/social-orbit): orbits your socials in smooth motion where icons spin, ripple, and glow with purpose. - [Splitter](https://www.scrollxui.dev/docs/components/splitter): Splitter with collapsible panels, drag handle, and smooth animations. - [Spotlight Card](https://www.scrollxui.dev/docs/components/spotlightcard): An interactive card with a spotlight hover effect that highlights content and enhances user engagement visually. - [Stagger Chars](https://www.scrollxui.dev/docs/components/stagger-chars): An animated text component that creates a smooth, staggered character animation effect when hovered. - [Stats Carousel](https://www.scrollxui.dev/docs/components/statscarousel): Animated statistics counter in stacked carousel for modern websites. - [StatsCount](https://www.scrollxui.dev/docs/components/statscount): Animated statistics counter with responsive layout and scroll triggers. - [Status](https://www.scrollxui.dev/docs/components/status): A small status component with customizable variants, indicator and shiny animation effects. - [Table](https://www.scrollxui.dev/docs/components/table): Powerful responsive data table with sticky headers, smooth scrolling, sorting, and pagination. - [Testimonial Carousel](https://www.scrollxui.dev/docs/components/testimonial-carousel): Minimal, responsive testimonial slider with avatars, names, and quotes for clean, modern design. - [Text Highlighter](https://www.scrollxui.dev/docs/components/text-highlighter): TextHighlighter with smooth animated highlights to emphasize key text. - [Text Modifier](https://www.scrollxui.dev/docs/components/text-modifier): text highlighter with solid background and decorative markers for emphasis. - [Text Spotlight](https://www.scrollxui.dev/docs/components/text-spotlight): spotlight text effect with hover and mobile reveal, customizable size and color. - [Theme Switch](https://www.scrollxui.dev/docs/components/theme-switch): A flexible and accessible theme mode switcher component. - [Thunder Loader](https://www.scrollxui.dev/docs/components/thunder-loader): Animated thunderbolt loader with glow and shimmer effects, customizable sizes and colors. - [Timeline](https://www.scrollxui.dev/docs/components/timeline): Smoothly animated timeline slider with resizable handles for interactive use. - [Toast](https://www.scrollxui.dev/docs/components/toast): A customizable and responsive toast notification system. - [Toggle Vault](https://www.scrollxui.dev/docs/components/toggle-vault): Animated toggle vault component with trigger, close button, and expandable content panel. - [Tooltip](https://www.scrollxui.dev/docs/components/tooltip): An interactive, animated popup that displays information related to an element when it receives keyboard focus or when the mouse hovers over it. - [Top Sheet](https://www.scrollxui.dev/docs/components/top-sheet): A customizable sheet component for creating elegant slide-out interfaces. - [Transition](https://www.scrollxui.dev/docs/components/transition): Smooth page transitions with curved or slide effects. - [Type Animation](https://www.scrollxui.dev/docs/components/typeanimation): Displays an animated typing effect. - [Venom Beam](https://www.scrollxui.dev/docs/components/venom-beam): A glowing particle canvas with motion-reactive trails. Perfect for immersive, high-tech hero sections. - [Vercel Card](https://www.scrollxui.dev/docs/components/vercel-card): A smooth interactive vercel inspired card. - [Wavy Button](https://www.scrollxui.dev/docs/components/wavy-button): Interactive wavybutton with animated text and customizable styles for modern uis. - [Whitestripes](https://www.scrollxui.dev/docs/components/whitestripes): Dynamic motion background for hero sections and modern layouts. ## Usage Notes for Agents - **Component URLs:** Use kebab-case for component paths (e.g., `/docs/components/profile-card`) - **CLI Names:** Use the exact component name from the registry - **Dependencies:** Check each component page for specific dependencies before installation - **Variants:** Some components may have multiple variants or customization options - **Updates:** The library is actively maintained with new components added regularly - **Support:** For issues or questions, refer to the documentation or repository ## Development - [CONTRIBUTING.md](CONTRIBUTING.md): Guidelines for contributing to ScrollX UI. - [LICENSE](LICENSE.md): License information.