### Installation

Source: https://scrollxui.dev/docs/components/lamphome

Instructions for installing the Lamphome component using various package managers.

```APIDOC
## Installation

### shadcn cli
```bash
npx shadcn@latest add @scrollxui/lamphome 
```
```

--------------------------------

### Install Tooltip Component

Source: https://scrollxui.dev/docs/components/tooltip

Install the Tooltip component using the shadcn CLI.

```bash
npx shadcn@latest add @scrollxui/tooltip 
```

--------------------------------

### Installation

Source: https://scrollxui.dev/docs/components/reel

Instructions for installing the Reel component using various package managers.

```APIDOC
## Installation

### shadcn cli
```
npx shadcn@latest add @scrollxui/reel 
```
```

--------------------------------

### Installation

Source: https://scrollxui.dev/docs/components/showcase

Instructions for installing the Showcase component using npm, pnpm, yarn, or bun, and the shadcn CLI.

```APIDOC
## Installation

### shadcn cli

```bash
npx shadcn@latest add @scrollxui/showcase
```
```

--------------------------------

### Install Pixel Highlight with shadcn CLI

Source: https://scrollxui.dev/docs/components/pixel-highlight

Install the Pixel Highlight component using the shadcn CLI. Ensure you have shadcn installed.

```bash
npx shadcn@latest add @scrollxui/pixel-highlight
```

--------------------------------

### Installation

Source: https://scrollxui.dev/docs/components/transition

Instructions for installing the ScrollX UI Transition component using various package managers.

```APIDOC
## Installation

### CLI
```bash
npx shadcn@latest add @scrollxui/transition
```

### Manual

**pnpm**
```bash
pnpm add @scrollxui/transition
```

**npm**
```bash
npm install @scrollxui/transition
```

**yarn**
```bash
yarn add @scrollxui/transition
```

**bun**
```bash
bun add @scrollxui/transition
```
```

--------------------------------

### Installation

Source: https://scrollxui.dev/docs/components/striped-grid

Install the StripedGrid component using the shadcn CLI.

```APIDOC
## Installation

### shadcn cli

```bash
npx shadcn@latest add @scrollxui/striped-grid
```
```

--------------------------------

### Installation

Source: https://scrollxui.dev/docs/components/keyboard

Instructions for installing the Keyboard component using npm, pnpm, yarn, or bun, and the shadcn CLI.

```APIDOC
## Installation

### Using npm, pnpm, yarn, or bun:
```bash
npm install @scrollxui/keyboard
pnpm add @scrollxui/keyboard
yarn add @scrollxui/keyboard
bun add @scrollxui/keyboard
```

### Using shadcn CLI:
```bash
npx shadcn@latest add @scrollxui/keyboard
```
```

--------------------------------

### Install next-themes

Source: https://scrollxui.dev/docs/installation/dark-mode

Install the next-themes package using npm, yarn, or pnpm.

```bash
npm install next-themes
```

--------------------------------

### Install Media Card Component

Source: https://scrollxui.dev/docs/components/media-card

Install the Media Card component using the shadcn CLI.

```bash
npx shadcn@latest add @scrollxui/media-card 
```

--------------------------------

### Installation

Source: https://scrollxui.dev/docs/components/gravity

Instructions for installing the Gravity component using various package managers.

```APIDOC
## Installation

### CLI

```bash
npx shadcn@latest add @scrollxui/gravity
```
```

--------------------------------

### Installation

Source: https://scrollxui.dev/docs/components/animated-testimonials

Instructions for installing the Animated Testimonials component using various package managers and the shadcn CLI.

```APIDOC
## Installation

CLIManual
pnpmnpmyarnbun
shadcn cli
```
npx shadcn@latest add @scrollxui/animated-testimonials 
```
```

--------------------------------

### Installation

Source: https://scrollxui.dev/docs/components/bento-grid

Instructions for installing the Bento Grid component using various package managers and the shadcn CLI.

```APIDOC
## Installation

### CLI

```bash
npx shadcn@latest add @scrollxui/bento-grid
```

### Manual Installation (using package managers)

- **pnpm**
- **npm**
- **yarn**
- **bun**
```

--------------------------------

### Card Installation

Source: https://scrollxui.dev/docs/components/card

Instructions for installing the Card component using the shadcn CLI.

```APIDOC
## Installation

### shadcn cli
```
npx shadcn@latest add @scrollxui/card
```
```

--------------------------------

### Install Squonk Component

Source: https://scrollxui.dev/docs/components/squonk

Install the Squonk component using the shadcn CLI. Ensure you have Node.js and npm/yarn/pnpm/bun installed.

```bash
npx shadcn@latest add @scrollxui/squonk
```

--------------------------------

### Install Badge Component

Source: https://scrollxui.dev/docs/components/badge

Install the Badge component using the shadcn cli.

```bash
npx shadcn@latest add @scrollxui/badge 
```

--------------------------------

### CodeBlock Installation

Source: https://scrollxui.dev/docs/components/codeblock

Install the CodeBlock component using the shadcn CLI.

```APIDOC
## Installation

### shadcn cli

```bash
npx shadcn@latest add @scrollxui/codeblock
```
```

--------------------------------

### Installation

Source: https://scrollxui.dev/docs/components/hold-toconfirm

Instructions for installing the HoldToConfirm component using npm, pnpm, yarn, or bun, and shadcn cli.

```APIDOC
## Installation

### CLI
```bash
npx shadcn@latest add @scrollxui/hold-toconfirm 
```
```

--------------------------------

### Install Accordion Component

Source: https://scrollxui.dev/docs/components/accordion

Install the Accordion component using the shadcn CLI.

```bash
npx shadcn@latest add @scrollxui/accordion
```

--------------------------------

### Installation

Source: https://scrollxui.dev/docs/components/movinglines-background

Install the MovingLines Background component using your preferred package manager.

```APIDOC
### Installation

#### CLI

**npm**
```bash
npm install @scrollxui/movinglines-background
```

**pnpm**
```bash
pnpm add @scrollxui/movinglines-background
```

**yarn**
```bash
yarn add @scrollxui/movinglines-background
```

**bun**
```bash
bun add @scrollxui/movinglines-background
```

#### shadcn cli
```bash
npx shadcn@latest add @scrollxui/movinglines-background
```
```

--------------------------------

### Usage Example

Source: https://scrollxui.dev/docs/components/keyboard

Basic example of how to import and use the Keyboard component in your React application.

```APIDOC
## Usage

```javascript
import Keyboard from "@/components/ui/keyboard";

// Basic usage
<Keyboard />

// With custom props
<Keyboard
     showWASD={true}
     wasdColorClassName="text-green-500"
     wasdKeyShadowClassName="shadow-green-500"
    />
```
```

--------------------------------

### Usage Example

Source: https://scrollxui.dev/docs/components/transition

Example demonstrating how to import and use the Transition component in a React application.

```APIDOC
## Usage

```javascript
import Transition from '@/components/ui/transition';

export default function RootLayout({
  children,
}: { children: React.ReactNode }) {
  return (
    <Transition
      intro={
        <div className='text-center text-white dark:text-black'>
          <h1 className='text-3xl font-bold'>Welcome!</h1>
        </div>
      }
      introDuration={2}
      transitionDuration={1}
      type='curved'
      direction='bottom'
    >
      {children}
    </Transition>
  );
}
```
```

--------------------------------

### Install Component from a URL

Source: https://scrollxui.dev/docs/installation/cli

Install components directly from a registry URL. This is useful for integrating components from external sources or specific versions.

```bash
npx shadcn@latest add https://scrollxui.dev/registry/[component].json
```

```bash
npx shadcn@latest add https://scrollxui.dev/registry/alert-dialog.json
```

--------------------------------

### Installation

Source: https://scrollxui.dev/docs/components/reveal-text

Instructions for installing the Reveal Text component using npm, pnpm, yarn, bun, or shadcn CLI.

```APIDOC
## Installation

### CLI
```bash
npx shadcn@latest add @scrollxui/reveal-text
```

### Manual

- **pnpm:** `pnpm add @scrollxui/reveal-text`
- **npm:** `npm install @scrollxui/reveal-text`
- **yarn:** `yarn add @scrollxui/reveal-text`
- **bun:** `bun add @scrollxui/reveal-text`
```

--------------------------------

### Installation

Source: https://scrollxui.dev/docs/components/spark-waves

Instructions for installing the Spark Waves component using npm, pnpm, yarn, or bun.

```APIDOC
## Installation

### CLI

Use the shadcn CLI to add the Spark Waves component to your project:

```bash
npx shadcn@latest add @scrollxui/spark-waves
```
```

--------------------------------

### Installation

Source: https://scrollxui.dev/docs/components/glowingbordercard

Instructions for installing the Glowing Border Card component using various package managers and the shadcn CLI.

```APIDOC
## Installation

### shadcn cli
```bash
npx shadcn@latest add @scrollxui/glowingbordercard
```
```

--------------------------------

### Install Avatar Component

Source: https://scrollxui.dev/docs/components/avatar

Install the Avatar component using the shadcn CLI.

```bash
npx shadcn@latest add @scrollxui/avatar
```

--------------------------------

### Dropdown Menu Installation

Source: https://scrollxui.dev/docs/components/dropdown-menu

Install the Dropdown Menu component using the shadcn CLI.

```APIDOC
## Installation

### CLI

```bash
npx shadcn@latest add @scrollxui/dropdown-menu 
```
```

--------------------------------

### Install Expandable Cards

Source: https://scrollxui.dev/docs/components/expandable-cards

Install the Expandable Cards component using the shadcn CLI.

```bash
npx shadcn@latest add @scrollxui/expandable-cards
```

--------------------------------

### Start the development server

Source: https://scrollxui.dev/docs/installation

Navigate to the project directory and launch the development environment.

```bash
cd my-app
npm run dev
```

--------------------------------

### Basic StaggerButton Usage

Source: https://scrollxui.dev/docs/components/stagger-button

Render a StaggerButton with the 'up' direction. This is a basic example to get started with the component.

```typescript
<StaggerButton direction='up'>Get started</StaggerButton>
```

--------------------------------

### Install Lamphome Component

Source: https://scrollxui.dev/docs/components/lamphome

Install the Lamphome component using the shadcn CLI. This command adds the necessary files to your project.

```bash
npx shadcn@latest add @scrollxui/lamphome
```

--------------------------------

### Install Tailwind CSS v3 dependencies

Source: https://scrollxui.dev/docs/installation/install-tailwindcss

Install Tailwind CSS, PostCSS, and Autoprefixer for legacy v3 setups.

```bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
```

--------------------------------

### Install Showcase Component

Source: https://scrollxui.dev/docs/components/showcase

Use the shadcn CLI to add the component to your project.

```bash
npx shadcn@latest add @scrollxui/showcase
```

--------------------------------

### Usage Example

Source: https://scrollxui.dev/docs/components/bento-grid

Example code demonstrating how to import and use the BentoGrid and BentoGridItem components.

```APIDOC
## Usage

### Import

```javascript
import { BentoGrid, BentoGridItem } from '@/components/ui/bento-grid';
```

### Example

```javascript
<BentoGrid>
  <BentoGridItem
    title='The Power of Collaboration'
    description='Enable real-time collaboration with your team.'
    containerClassName='md:col-span-2'
    header={<div className='h-full w-full rounded-xl bg-neutral-100 dark:bg-neutral-800' />}
    icon={<Users className='h-4 w-4 text-neutral-500' />}
  />
  <BentoGridItem
    title='Smart Automation'
    description='Automate repetitive tasks and focus on what matters.'
    containerClassName='md:col-span-1'
    header={<div className='h-full w-full rounded-xl bg-neutral-100 dark:bg-neutral-800' />}
    icon={<Zap className='h-4 w-4 text-neutral-500' />}
  />
</BentoGrid>
```
```

--------------------------------

### Install Text Highlighter with shadcn CLI

Source: https://scrollxui.dev/docs/components/text-highlighter

Use the shadcn CLI to add the Text Highlighter component to your project. This is the recommended installation method.

```bash
npx shadcn@latest add @scrollxui/text-highlighter
```

--------------------------------

### Render Motion Navbar Component

Source: https://scrollxui.dev/docs/components/motion-navbar

Example of how to render the Motion Navbar with various elements like logo, navigation items, dropdowns, and a call-to-action button. Includes mobile navigation setup.

```typescript
<Navbar className='bg-black dark:bg-white text-white dark:text-black'>
  <NavbarLogo />
  <NavBody>
    <NavItems items={navItems} />
    <NavDropdown label='resources' items={dropdownItems} />
    <NavbarButton href='/get-started' variant='primary'>
      get started
    </NavbarButton>
  </NavBody>
 
  <MobileNav>
    <MobileNavHeader>
      <MobileNavToggle isOpen={false} onClick={() => {}} />
    </MobileNavHeader>
    <MobileNavMenu>
      <NavItems items={navItems} />
      <NavDropdown label='resources' items={dropdownItems} />
      <NavbarButton href='/get-started' variant='primary'>
        get started
      </NavbarButton>
    </MobileNavMenu>
  </MobileNav>
</Navbar>
```

--------------------------------

### Install Text Spotlight via CLI

Source: https://scrollxui.dev/docs/components/text-spotlight

Use the shadcn CLI to add the component to your project.

```bash
npx shadcn@latest add @scrollxui/text-spotlight
```

--------------------------------

### Install MorphoTextFlip Component

Source: https://scrollxui.dev/docs/components/morphotextflip

Install the MorphoTextFlip component using the shadcn CLI. Ensure you have the CLI installed.

```bash
npx shadcn@latest add @scrollxui/morphotextflip
```

--------------------------------

### Install Spotlight Card via CLI

Source: https://scrollxui.dev/docs/components/spotlightcard

Use the shadcn CLI to add the component to your project.

```bash
npx shadcn@latest add @scrollxui/spotlightcard
```

--------------------------------

### Installation

Source: https://scrollxui.dev/docs/components/motion-grid

Install the MotionGrid component using npm, pnpm, yarn, or bun with the shadcn CLI.

```APIDOC
## Installation

### shadcn cli

```bash
npx shadcn@latest add @scrollxui/motion-grid 
```
```

--------------------------------

### Installation

Source: https://scrollxui.dev/docs/components/motioncards

Instructions for installing the MotionCards component using various package managers and the shadcn CLI.

```APIDOC
## Installation

### CLI

```bash
npx shadcn@latest add @scrollxui/motioncards
```

### Manual Installation (Package Managers)

- **pnpm**
- **npm**
- **yarn**
- **bun**
```

--------------------------------

### CLI init

Source: https://scrollxui.dev/docs/installation/cli

Initializes a new project by setting up configuration and dependencies.

```APIDOC
## CLI init

### Description
Initializes configuration and dependencies for a new project, including generating components.json.

### Command
`npx shadcn@latest init [options] [components...]`

### Options
- **-d, --defaults** (boolean) - Use default values (new-york, zinc, css variables).
- **-f, --force** (boolean) - Force overwrite of existing components.json.
- **-y, --yes** (boolean) - Skip confirmation prompt.
- **-c, --cwd** (string) - The working directory.
```

--------------------------------

### Install Slide Text Component

Source: https://scrollxui.dev/docs/components/slide-text

Install the Slide Text component using the shadcn CLI. Ensure you have shadcn installed.

```bash
npx shadcn@latest add @scrollxui/slide-text
```

--------------------------------

### Install Pagination Component

Source: https://scrollxui.dev/docs/components/pagination

Use the shadcn CLI to add the pagination component to your project. Ensure you have shadcn/ui installed.

```bash
npx shadcn@latest add @scrollxui/pagination
```

--------------------------------

### Install Calendar Component

Source: https://scrollxui.dev/docs/components/calendar

Install the calendar component using the shadcn CLI. Ensure you have shadcn/ui set up in your project.

```bash
npx shadcn@latest add @scrollxui/calendar 
```

--------------------------------

### Basic Usage Example

Source: https://scrollxui.dev/docs/components/magicdock

Demonstrates how to integrate the Magic Dock component with basic configuration.

```APIDOC
## Basic Usage

### Installation

Use the shadcn CLI to add the component:
```bash
npx shadcn@latest add @scrollxui/magicdock
```

### Component Implementation

```jsx
import StylishDock from '@/components/ui/magicdock';
import { Home as HomeIcon, Settings as SettingsIcon } from 'lucide-react';
 
const dockItems = [
  {
    id: 1,
    icon: <HomeIcon size={24} />,
    label: 'Home',
    description: 'Go to homepage',
    onClick: () => window.scrollTo({ top: 0, behavior: 'smooth' }),
  },
  {
    id: 2,
    icon: <SettingsIcon size={24} />,
    label: 'Settings',
    description: 'Customize options',
    onClick: () => console.log('Settings clicked'),
  },
];
 
function App() {
  return (
    <div className='relative'>
      <StylishDock
        items={dockItems}
        distance={150}
        panelHeight={64}
        baseItemSize={50}
        magnification={70}
        variant='default'
      />
    </div>
  );
}
```
```

--------------------------------

### Install Layered Text Component

Source: https://scrollxui.dev/docs/components/layered-text

Install the Layered Text component using the shadcn CLI.

```bash
npx shadcn@latest add @scrollxui/layered-text 
```

--------------------------------

### Install SeparatorPro Component

Source: https://scrollxui.dev/docs/components/seperatorpro

Use the shadcn CLI to add the SeparatorPro component to your project. Ensure you have the shadcn CLI installed.

```bash
npx shadcn@latest add @scrollxui/seperatorpro
```

--------------------------------

### Accordion Installation

Source: https://scrollxui.dev/docs/components/accordion

Instructions for installing the Accordion component using various package managers and the shadcn CLI.

```APIDOC
## Installation

### CLI
```bash
npx shadcn@latest add @scrollxui/accordion
```

### Package Managers

- **pnpm**
  ```bash
  pnpm add @scrollxui/accordion
  ```
- **npm**
  ```bash
  npm install @scrollxui/accordion
  ```
- **yarn**
  ```bash
  yarn add @scrollxui/accordion
  ```
```

--------------------------------

### Install Orb Button with shadcn CLI

Source: https://scrollxui.dev/docs/components/orb-button

Install the Orb Button component using the shadcn CLI. Ensure you have shadcn installed.

```bash
npx shadcn@latest add @scrollxui/orb-button 
```

--------------------------------

### Install Cursor Highlight

Source: https://scrollxui.dev/docs/components/cursor-highlight

Use the shadcn CLI to add the component to your project.

```bash
npx shadcn@latest add @scrollxui/cursor-highlight
```

--------------------------------

### Flex Navbar Installation

Source: https://scrollxui.dev/docs/components/flex-navbar

Instructions for installing the Flex Navbar component using various package managers.

```APIDOC
## Installation

### CLI
```bash
npx shadcn@latest add @scrollxui/flex-navbar
```

### Manual Installation (pnpm, npm, yarn, bun)
(Details for manual installation would go here if provided in the source text)
```

--------------------------------

### Install Select Component

Source: https://scrollxui.dev/docs/components/select

Use the shadcn CLI to add the Select component to your project.

```bash
npx shadcn@latest add @scrollxui/select
```

--------------------------------

### Install Kbd Component

Source: https://scrollxui.dev/docs/components/kbd

Install the Kbd component using the shadcn CLI. This command adds the necessary files to your project.

```bash
npx shadcn@latest add @scrollxui/kbd
```

--------------------------------

### Install Input OTP Component

Source: https://scrollxui.dev/docs/components/input-otp

Install the Input OTP component using the shadcn CLI. This command adds the necessary files to your project.

```bash
npx shadcn@latest add @scrollxui/input-otp
```

--------------------------------

### Shadcn CLI `init` Command Options

Source: https://scrollxui.dev/docs/installation/cli

Provides detailed options for the `shadcn init` command, including arguments for components and options for defaults, force overwrite, skipping prompts, and specifying the working directory.

```bash
Usage: shadcn init [options] [components...]

initialize your project and install dependencies

Arguments:
  components         the components to add or a url to the component.

Options:
  -d, --defaults    use default values i.e new-york, zinc and css variables. (default: false)
  -f, --force       force overwrite of existing components.json. (default: false)
  -y, --yes         skip confirmation prompt. (default: false)
  -c, --cwd <cwd>   the working directory. defaults to the current directory.
  -h, --help       display help for command

```

--------------------------------

### Initialize Shadcn CLI Project

Source: https://scrollxui.dev/docs/installation/cli

Use this command to set up your project with Shadcn UI. It installs dependencies, configures Tailwind CSS, and generates a `components.json` file. You will be prompted to answer configuration questions.

```bash
npx shadcn@latest init
```

--------------------------------

### Install Pixel Background

Source: https://scrollxui.dev/docs/components/pixel-background

Use the shadcn CLI to add the component to your project.

```bash
npx shadcn@latest add @scrollxui/pixel-background
```

--------------------------------

### Install Folder Component

Source: https://scrollxui.dev/docs/components/folder

Use the shadcn CLI to add the component to your project.

```bash
npx shadcn@latest add @scrollxui/folder
```

--------------------------------

### Usage Example

Source: https://scrollxui.dev/docs/components/statscount

Example of how to import and use the StatsCount component in your React application.

```APIDOC
## Usage

### Import
```javascript
import StatsCount from '@/components/ui/statscount';
```

### Data Structure
```javascript
const stats = [
  { value: 30, suffix: '+', label: 'Handcrafted animated components' },
  { value: 12, suffix: 'K+', label: 'Developers building with ScrollX-UI' },
  { value: 99, suffix: '%', label: 'Performance optimized for web' },
];
```

### Component Implementation
```javascript
<StatsCount
  stats={stats}
  title='CREATE STUNNING INTERFACES WITH SCROLLX-UI COMPONENTS'
  showDividers={true}
  className=''
/>
```
```

--------------------------------

### Install Keyboard Component

Source: https://scrollxui.dev/docs/components/keyboard

Use the shadcn CLI to add the keyboard component to your project.

```bash
npx shadcn@latest add @scrollxui/keyboard
```

--------------------------------

### Usage Example

Source: https://scrollxui.dev/docs/components/motioncards

Example of how to import and use the MotionCards component in your React application.

```APIDOC
## Usage

### Import

```javascript
import MotionCards, { MotionCardContent } from '@/components/ui/motioncards';
```

### Example

```jsx
<MotionCards interval={1300}>
  <MotionCardContent>
    <div className='p-4 text-center'>Card 1: Analytics</div>
  </MotionCardContent>
  <MotionCardContent>
    <div className='p-4 text-center'>Card 2: Performance</div>
  </MotionCardContent>
  <MotionCardContent>
    <div className='p-4 text-center'>Card 3: Components</div>
  </MotionCardContent>
  <MotionCardContent>
    <div className='p-4 text-center'>Card 4: Developers</div>
  </MotionCardContent>
</MotionCards>
```
```

--------------------------------

### Install Aspect Ratio component

Source: https://scrollxui.dev/docs/components/aspect-ratio

Use the shadcn CLI to add the component to your project.

```bash
npx shadcn@latest add @scrollxui/aspect-ratio
```

--------------------------------

### Usage Example

Source: https://scrollxui.dev/docs/components/columnlines

Example of how to import and use the ColumnLines component in your React application.

```APIDOC
## Usage

### Import

```javascript
import { ColumnLines } from '@/components/ui/columnLines-background';
```

### Example

```javascript
<ColumnLines className='relative h-100 w-full flex flex-col items-center justify-center'>
  <h2 className='bg-clip-text text-transparent text-center bg-linear-to-b from-neutral-900 to-neutral-700 dark:from-neutral-600 dark:to-white text-2xl md:text-4xl lg:text-7xl font-sans py-2 md:py-10 relative z-20 font-bold tracking-tight'>
    Moving Lines, <br /> Background.
  </h2>
  <p className='max-w-xl mx-auto text-sm md:text-lg text-neutral-700 dark:text-neutral-400 text-center'>
    flowing right, defining direction.
  </p>
</ColumnLines>
```
```

--------------------------------

### Install Expandable Dock with shadcn CLI

Source: https://scrollxui.dev/docs/components/expandable-dock

Use the shadcn CLI to add the Expandable Dock component to your project. Ensure you have the CLI installed.

```bash
npx shadcn@latest add @scrollxui/expandable-dock
```

--------------------------------

### Card Usage Example

Source: https://scrollxui.dev/docs/components/card

Basic and advanced usage examples for the Card component.

```APIDOC
## Usage

### Basic Usage
```javascript
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
    <CardAction>Card Action</CardAction>
  </CardHeader>
  <CardContent>
    <p>Card Content</p>
  </CardContent>
  <CardFooter>
    <p>Card Footer</p>
  </CardFooter>
</Card>
```

### Custom Styling
```javascript
<Card className='custom-card-style'>
  <CardHeader>
    <CardTitle>Custom Card</CardTitle>
    <CardDescription>This card has a custom style.</CardDescription>
    <CardAction>Card Action</CardAction>
  </CardHeader>
  <CardContent>
    <p>Additional content with custom styles.</p>
  </CardContent>
  <CardFooter>
    <Button variant='link'>Learn More</Button>
  </CardFooter>
</Card>
```
```

--------------------------------

### Install Signup Form Component

Source: https://scrollxui.dev/docs/components/signupform

Use the shadcn CLI to add the signup form component to your project. This command fetches and installs the necessary files.

```bash
npx shadcn@latest add @scrollxui/signupform
```

--------------------------------

### Installation

Source: https://scrollxui.dev/docs/components/toggle-vault

Install the Toggle Vault component using npm, pnpm, yarn, or bun.

```APIDOC
## Installation

### shadcn cli

```bash
npx shadcn@latest add @scrollxui/toggle-vault 
```
```

--------------------------------

### Table Installation

Source: https://scrollxui.dev/docs/components/table

Instructions for installing the Scrollxui Table component using the shadcn CLI.

```APIDOC
## Installation

### CLI

```bash
npx shadcn@latest add @scrollxui/table
```
```

--------------------------------

### Install Iphone Component

Source: https://scrollxui.dev/docs/components/iphone

Use the shadcn CLI to add the Iphone component to your project.

```bash
npx shadcn@latest add @scrollxui/iphone
```

--------------------------------

### Installation

Source: https://scrollxui.dev/docs/components/statscount

Instructions for installing the StatsCount component using npm, pnpm, yarn, or bun.

```APIDOC
## Installation

### CLI
```bash
npx shadcn@latest add @scrollxui/statscount
```
```

--------------------------------

### Install Folder Tree Component

Source: https://scrollxui.dev/docs/components/folder-tree

Use the shadcn CLI to add the component to your project.

```bash
npx shadcn@latest add @scrollxui/folder-tree
```

--------------------------------

### Install ScrollxUI Slider

Source: https://scrollxui.dev/docs/components/slider

Install the ScrollxUI slider component using the shadcn cli.

```bash
npx shadcn@latest add @scrollxui/slider
```

--------------------------------

### Usage

Source: https://scrollxui.dev/docs/components/showcase

Example code demonstrating how to import and use the Showcase component in your project.

```APIDOC
## Usage

```javascript
import { Showcase } from '@/components/ui/showcase';
```

```javascript
<Showcase items={sections} cycleDelay={6000} mediaClass='h-75 md:h-auto' />
```
```

--------------------------------

### Install MovingLines Background

Source: https://scrollxui.dev/docs/components/movinglines-background

Install the MovingLines Background component using the shadcn CLI.

```bash
npx shadcn@latest add @scrollxui/movinglines-background
```

--------------------------------

### Install Testimonial Carousel

Source: https://scrollxui.dev/docs/components/testimonial-carousel

Use the shadcn CLI to add the component to your project.

```bash
npx shadcn@latest add @scrollxui/testimonial-carousel
```

--------------------------------

### Installation

Source: https://scrollxui.dev/docs/components/columnlines

Instructions for installing the ColumnLines component using npm, pnpm, yarn, or bun.

```APIDOC
## Installation

### shadcn cli

```bash
npx shadcn@latest add @scrollxui/columnlines 
```
```

--------------------------------

### Install Lustre Text via CLI

Source: https://scrollxui.dev/docs/components/lustretext

Use the shadcn CLI to add the component to your project.

```bash
npx shadcn@latest add @scrollxui/lustretext
```

--------------------------------

### Installation

Source: https://scrollxui.dev/docs/components/bolt-strike

Instructions for installing the Bolt Strike component using npm, pnpm, or yarn.

```APIDOC
## Installation

### shadcn cli

```bash
npx shadcn@latest add @scrollxui/bolt-strike
```
```

--------------------------------

### Install ScrollX UI Transition

Source: https://scrollxui.dev/docs/components/transition

Use the shadcn CLI to add the transition component to your project.

```bash
npx shadcn@latest add @scrollxui/transition
```

--------------------------------

### Card Tilt Installation

Source: https://scrollxui.dev/docs/components/card-tilt

Install the Card Tilt component using the shadcn CLI.

```APIDOC
## Installation

### shadcn cli
```
npx shadcn@latest add @scrollxui/card-tilt
```
```

--------------------------------

### Install Reveal Text via CLI

Source: https://scrollxui.dev/docs/components/reveal-text

Use the shadcn CLI to add the component to your project.

```bash
npx shadcn@latest add @scrollxui/reveal-text
```

--------------------------------

### Border Glide Installation

Source: https://scrollxui.dev/docs/components/border-glide

Install the Border Glide component using the shadcn CLI.

```APIDOC
## Installation

### shadcn cli

```bash
npx shadcn@latest add @scrollxui/border-glide
```
```

--------------------------------

### Installation

Source: https://scrollxui.dev/docs/components/animated-textgenerate

Install the Animated TextGenerate component using npm, pnpm, yarn, or bun.

```APIDOC
## Installation

### CLI
```bash
npx shadcn@latest add @scrollxui/animated-textgenerate
```
```

--------------------------------

### Install DualSparks

Source: https://scrollxui.dev/docs/components/dualsparks

Use the shadcn CLI to add the DualSparks component to your project.

```bash
npx shadcn@latest add @scrollxui/dualsparks
```

--------------------------------

### Install Progress Component

Source: https://scrollxui.dev/docs/components/progress

Use the shadcn CLI to add the Progress component to your project.

```bash
npx shadcn@latest add @scrollxui/progress
```

--------------------------------

### Usage Example

Source: https://scrollxui.dev/docs/components/glowingbordercard

Example demonstrating how to import and use the GlowingBorderCard component in your React application.

```APIDOC
## Usage

### Import
```javascript
import GlowingBorderCard from '@/components/ui/glowingbordercard';
```

### Example
```javascript
<GlowingBorderCard
  className='w-80 h-72'
  fromColor='purple-600'
  toColor='purple-600'
>
  <div className='w-full h-full flex flex-col items-center justify-center text-center'>
    <h3 className='text-xl font-semibold mb-1'>GlowingBorder Card</h3>
    <p className='text-sm text-muted-foreground'>
      Hover to see the glowing border effect.
    </p>
  </div>
</GlowingBorderCard>
```
```

--------------------------------

### Install Card Tilt Component

Source: https://scrollxui.dev/docs/components/card-tilt

Use the shadcn CLI to add the component to your project.

```bash
npx shadcn@latest add @scrollxui/card-tilt
```

--------------------------------

### Label Usage Examples

Source: https://scrollxui.dev/docs/components/label

Examples showing label direction configuration and animation toggling.

```jsx
<Label htmlFor="email" direction="right" >Your email address</Label>
<br />
<Label htmlFor="email" disableAnimation>Your email address</Label>
```

--------------------------------

### Install Announcement Component

Source: https://scrollxui.dev/docs/components/announcement

Use the shadcn CLI to add the announcement component to your project.

```bash
npx shadcn@latest add @scrollxui/announcement
```

--------------------------------

### Usage Example

Source: https://scrollxui.dev/docs/components/gravity

Example demonstrating how to import and use the Gravity component in your React application.

```APIDOC
## Usage

### Import

```javascript
import { Gravity } from '@/components/ui/gravity';
```

### Example

```jsx
<div className='flex items-center justify-center px-4 py-12'>
  <div className='relative w-full max-w-sm'>
    <div
      className='relative flex h-85 w-[90%] flex-col items-start justify-end 
      overflow-hidden rounded-2xl border border-gray-300 dark:border-gray-800 
      bg-gray-50 dark:bg-[#0a0a0a] 
      px-5 py-8 shadow-xl mx-auto transition-colors'
    >
      <h2 className='relative z-50 mb-3 text-xl font-bold text-gray-900 dark:text-white'>
        Gravity
      </h2>
      <p className='relative z-50 mb-5 text-base font-normal text-gray-600 dark:text-gray-400 leading-relaxed'>
        Gravity pulls everything down, not to defeat it, but to give every fall
        the chance to launch again with greater force.
      </p>
      <Gravity number={20} />
    </div>
  </div>
</div>
```
```

--------------------------------

### Install Card Component

Source: https://scrollxui.dev/docs/components/card

Use the shadcn CLI to add the Card component to your project.

```bash
npx shadcn@latest add @scrollxui/card
```

--------------------------------

### Usage Example

Source: https://scrollxui.dev/docs/components/bolt-strike

Example of how to import and use the Bolt Strike component in your React application.

```APIDOC
## Usage

```javascript
import { BoltStrike } from '@/components/ui/bolt-strike';
```

```javascript
<BoltStrike
  color='#7c3aed'
  intensity={1}
  className='relative h-100 w-full flex flex-col items-center justify-center'
>
  <h2 className='bg-clip-text text-transparent text-center bg-linear-to-b from-neutral-900 to-neutral-700 dark:from-neutral-600 dark:to-white text-2xl md:text-4xl lg:text-7xl font-sans py-2 md:py-10 relative z-20 font-bold tracking-tight'>
    Bolt Animation, <br /> Background.
  </h2>
</BoltStrike>
```
```

--------------------------------

### Project configuration prompts

Source: https://scrollxui.dev/docs/installation

Standard configuration options presented during the Next.js installation process.

```text
What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*
```

--------------------------------

### Create a new Next.js project

Source: https://scrollxui.dev/docs/installation

Initialize a new project using the create-next-app CLI.

```bash
npx create-next-app@latest
```

--------------------------------

### Install Tailwind CSS v4 dependencies

Source: https://scrollxui.dev/docs/installation/install-tailwindcss

Install the latest Tailwind CSS v4 packages.

```bash
npm install tailwindcss @tailwindcss/postcss @tailwindcss/cli
```

--------------------------------

### Install Electric Text

Source: https://scrollxui.dev/docs/components/electric-text

Use the shadcn CLI to add the component to your project.

```bash
npx shadcn@latest add @scrollxui/electric-text
```

--------------------------------

### Install Search Cell Component

Source: https://scrollxui.dev/docs/components/search-cell

Install the Search Cell component using the shadcn CLI.

```bash
npx shadcn@latest add @scrollxui/search-cell
```

--------------------------------

### Install Reel Component

Source: https://scrollxui.dev/docs/components/reel

Use the shadcn CLI to add the Reel component to your project.

```bash
npx shadcn@latest add @scrollxui/reel
```

--------------------------------

### Install Stripe Button

Source: https://scrollxui.dev/docs/components/stripe-button

Use the shadcn CLI to add the component to your project.

```bash
npx shadcn@latest add @scrollxui/stripe-button
```

--------------------------------

### View Components from a Registry

Source: https://scrollxui.dev/docs/installation/cli

Use the `view` command to inspect components available in a specified registry before installation. This helps in understanding the available components and their structure.

```bash
npx shadcn@latest view @scrollxui
```

--------------------------------

### Loader Installation

Source: https://scrollxui.dev/docs/components/loader

Instructions for installing the Scrollxui Loader component using various package managers.

```APIDOC
## Installation

### shadcn cli
```bash
npx shadcn@latest add @scrollxui/loader
```
```

--------------------------------

### Install Table Component

Source: https://scrollxui.dev/docs/components/table

Use the shadcn CLI to add the table component to your project.

```bash
npx shadcn@latest add @scrollxui/table
```

--------------------------------

### Lean Card Installation

Source: https://scrollxui.dev/docs/components/lean-card

Instructions for installing the Lean Card component using the shadcn CLI.

```APIDOC
## Installation

### shadcn cli

```bash
npx shadcn@latest add @scrollxui/lean-card 
```
```

--------------------------------

### Usage Example

Source: https://scrollxui.dev/docs/components/avatar-group

Example demonstrating how to import and use the Avatar Group component in your React application.

```APIDOC
## Usage

```javascript
import { AvatarGroup } from '@/components/ui/avatar-group';

const avatars = [
  {
    imageUrl:
      'https://images.unsplash.com/photo-1701615004837-40d8573b6652?q=80&w=1480&auto=format&fit=crop',
    profileUrl: '#',
    name: 'Sarah Chen',
  },
  {
    imageUrl:
      'https://plus.unsplash.com/premium_photo-1671656349218-5218444643d8?q=80&w=1287&auto=format&fit=crop',
    profileUrl: '#',
    name: 'Marcus Johnson',
  },
];
```

```jsx
<AvatarGroup avatarUrls={avatars} />
```
```

--------------------------------

### Thunder Loader Installation

Source: https://scrollxui.dev/docs/components/thunder-loader

Instructions for installing the Thunder Loader component using various package managers.

```APIDOC
## Installation

### shadcn cli
```bash
npx shadcn@latest add @scrollxui/thunder-loader
```
```

--------------------------------

### Install FlipStack via CLI

Source: https://scrollxui.dev/docs/components/flipstack

Use the shadcn CLI to add the FlipStack component to your project.

```bash
npx shadcn@latest add @scrollxui/flipstack
```

--------------------------------

### Label Component Installation

Source: https://scrollxui.dev/docs/components/label

Instructions for installing the ScrollxUI Label component using various package managers.

```APIDOC
## Installation

### Method
CLIManual

### Endpoint
None

### Parameters
None

### Request Example
```bash
npx shadcn@latest add @scrollxui/label 
```

### Response
None

### Response Example
None
```

--------------------------------

### Install Splitter Component

Source: https://scrollxui.dev/docs/components/splitter

Use the shadcn CLI to add the Splitter component to your project.

```bash
npx shadcn@latest add @scrollxui/splitter
```

--------------------------------

### Install Theme Switch Component

Source: https://scrollxui.dev/docs/components/theme-switch

Use the shadcn CLI to add the theme-switch component to your project.

```bash
npx shadcn@latest add @scrollxui/theme-switch
```