DOCSEARCHbyAlgolia
Submit Docs

ScrollX UI

repository·main·Indexed 43 days ago

https://github.com/adityakishore0/scrollx-ui

A library of 140+ interactive, motion-driven React components and 30+ layout blocks built with TypeScript and Tailwind CSS. Designed for sophisticated animations and polished web interfaces, it supports installation via shadcn CLI and provides a registry of components including accordions, carousels, and specialized blocks like Bento with Focus and Contact with Globe.

Tokens
131.3K
Snippets
456
Records
631
Agent score
55%

What's inside ScrollX UI

  1. Introduction to ScrollX UI

    main

    ScrollX UI is an open-source component library designed for building fast, accessible, and beautiful user interfaces. It is built using Next.js, TypeScript, Tailwind CSS, Lucide React icons, and Motion for animations.

    Key characteristics include:

    • Open Code: Components are fully open-source and customizable.
    • Composition: Uses a consistent Root / Trigger / Content pattern.
    • Distribution: Designed for easy distribution via flat files across repositories.
    • AI-Ready: Structured specifically to be easily parsed and regenerated by AI-assisted coding tools.

  2. Overview of ScrollX UI

    main

    ScrollX UI is a collection of motion-rich, interactive React components and blocks designed to create modern, animated web interfaces. It provides a wide variety of assets including text animations, interactive components, dynamic backgrounds, and pre-built sections like hero and FAQ blocks.

    Key Characteristics:

    • Tech Stack: Built with TypeScript and Tailwind CSS.
    • Customization: Highly customizable via props; users receive the full source code to modify and extend.
    • Content Scale: Includes 140+ components, 30+ blocks, and 2+ templates.
    • Integration: Designed for seamless integration with modern React projects and supports ShadCN registries, GitHub registries, and MCP integration.

  3. New Components introduced in January 2026

    main

    The January 2026 update introduced several new interactive and cursor-reactive components to the scrollx-ui library. These components focus on high-fidelity animations, energy effects, and cursor proximity interactions:

    • Sensitive Text: Text that reacts subtly to cursor proximity.
    • Dot Wave: Symmetric dot waves with gentle motion.
    • Flashy Card: Interactive card with smooth activation effects.
    • Media Card: Polished media card with fluid cursor interaction.
    • Bolt Strike: Random lightning strikes with energetic sparks.
    • Spark Waves: Pulsing radial waves with dynamic energy.
    • BarsWave: Vertical bars animating in wave symmetry.
    • Pixel Highlight: Pixel-based text highlight animation.
    • Avatar Group: Expanding overlapping avatars on hover.
    • Aurora Dots: Soft glowing dots with aurora-like motion.
    • Layered Button: Layered button with radial hover effect.

  5. Available Blocks in ScrollX UI

    main

    ScrollX UI provides pre-built high-impact sections known as 'Blocks'. These can be integrated into layouts to provide standard UI patterns with micro-interactions:

    • CTA Sections: High-impact Call-to-Action designs.
    • Pricing Sections: Minimal and elegant pricing tables/sections.
    • Testimonials: Testimonial layouts featuring micro-interactions and minimal animations.

  6. Available components in the December 2025 release

    main

    The December 2025 update introduced a variety of animated and interactive UI components to scrollx-ui. These components focus on motion, lighting effects, and interactive feedback.

    Visual & Background Components:

    • Striped Grid: Animated diagonal stripes over an optional base grid.
    • Pixel Background: A flexible pixel field with smooth atmospheric motion.
    • Motion Grid: A diagonal grid featuring continuous glowing motion.

    Card & Container Components:

    • Drift Card: An interactive card with a subtle drift hover highlight.
    • Expandable Cards: Cards that expand on hover to provide focus.
    • Card Tilt: A smooth 3D tilt effect that reacts to cursor movement.

    Text & Typography Components:

    • Electric Text: Neon-style text with an electric glow animation.
    • Decorated Text: Text framed with minimal decorative corners.
    • Reveal Text: Text reveal animation with directional control.

    Interactive & Navigation Components:

    • Radio Group: A clean, single-select radio button group.
    • Motion Navbar: An animated navbar supporting dropdowns and mobile menus.
    • Shiny Button: A button featuring a cursor-tracking spotlight glow.
    • Stagger Button: A button with animated staggered text on hover.

  9. Apply MagicDock visual variants

    main

    You can change the visual style of the dock using the variant prop. Supported variants are:

    • default: The standard dock style.
    • gradient: A dock with a gradient visual style.
    • tooltip: A style that emphasizes tooltips, often used with custom magnification and base sizes.
    // Default variant
<MagicDock items={dockItems} variant="default" />

// Gradient variant
<MagicDock items={dockItems} variant="gradient" />

// Tooltip variant with custom magnification
<MagicDock
  items={dockItems}
  variant="tooltip"
  magnification={90}
  baseItemSize={60}
/>

  11. Install Tailwind CSS v4 (Recommended)

    main

    ScrollX UI components are optimized for Tailwind CSS v4. Follow these steps to set up a new Next.js project with Tailwind v4.

    1. Create a new Next.js project:

      npx create-next-app@latest my-project --typescript --eslint && cd my-project

    2. Install Tailwind CSS dependencies:

      npm install tailwindcss @tailwindcss/postcss @tailwindcss/cli

    3. Configure PostCSS: Create or update postcss.config.js to include the @tailwindcss/postcss plugin.

    4. Set up styles: Configure your src/styles/globals.css using the @import "tailwindcss"; directive and define your theme variables (see the detailed CSS configuration guide).

    npx create-next-app@latest my-project --typescript --eslint && cd my-project
npm install tailwindcss @tailwindcss/postcss @tailwindcss/cli

  12. Configure Tailwind CSS v4 styles and theme

    main

    In Tailwind CSS v4, you configure your theme and custom utilities directly in your CSS file (e.g., src/styles/globals.css) using @import and @theme blocks. This approach replaces the traditional tailwind.config.js for many use cases.

    Key features in the recommended configuration:

    • Directives: Use @import "tailwindcss"; and @import "tw-animate-css";.
    • Custom Variants: Define variants like dark using @custom-variant.
    • Theme Variables: Define design tokens (colors, radius, etc.) inside an @theme inline block, mapping them to CSS variables.
    • Base Styles: Use @layer base to apply global styles to elements like body or * using @apply.
    • Custom Utilities: Define reusable utility classes using the @utility directive.
    @import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.141 0.005 285.823);
  /* ... other variables ... */
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  /* ... other theme mappings ... */
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}

@utility lustre-text {
  @apply inline-block font-extrabold text-transparent bg-clip-text bg-size-[200%_auto] bg-position-[0%_center];
}