### Getting Started Path Steps

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/INDEX.md

Outlines a step-by-step guide for new users to get started with the react-bits project, from understanding the project to implementing and customizing components.

```markdown
1. **Understand the Project**
   - Read [README.md](README.md) - Overview & Philosophy
   - Explore component categories

2. **Choose Your Component**
   - Browse [api-reference.md](api-reference.md) categories
   - Find component that matches your needs

3. **Install**
   - Follow [README.md](README.md#installation) instructions
   - Choose appropriate variant

4. **Implement**
   - Copy usage example from [api-reference.md](api-reference.md)
   - Customize props per [types.md](types.md)

5. **Customize Further (if needed)**
   - Use hooks from [hooks.md](hooks.md) for state
   - Apply utilities from [utilities.md](utilities.md) for animations

6. **Optimize**
   - Review [README.md](README.md#performance-considerations)
   - Apply best practices
```

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

### Clone and Run Development Environment

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/README.md

Steps to set up the development environment by cloning the repository, installing dependencies, and starting the development server.

```bash
git clone https://github.com/davidhdev/react-bits.git
cd react-bits
npm install
npm run dev
```

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

### Generated Command Format Examples

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/hooks.md

Shows the typical format for installation commands generated by the useInstallation hook, including placeholders for component name and variant.

```bash
npx jsrepo add @react-bits/{ComponentName}-{Variant}
npx shadcn@latest add @react-bits/{ComponentName}-{Variant}
```

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

### useInstallation Hook Example

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/hooks.md

Demonstrates how to use the useInstallation hook to manage installation commands and variants for a component. It provides state for the selected variant, the generated command, and a copy-to-clipboard function.

```typescript
import { useInstallation } from '@react-bits/hooks';

export default function InstallationGuide() {
  const { variant, command, setVariant, handleCopy, copied } = useInstallation('AnimatedContent');

  return (
    <div>
      <select value={variant} onChange={(e) => setVariant(e.target.value)}>
        <option value="JS-CSS">JavaScript + CSS</option>
        <option value="JS-TW">JavaScript + Tailwind</option>
        <option value="TS-CSS">TypeScript + CSS</option>
        <option value="TS-TW">TypeScript + Tailwind</option>
      </select>
      
      <code>{command}</code>
      
      <button onClick={handleCopy}>
        {copied ? 'Copied!' : 'Copy'}
      </button>
    </div>
  );
}
```

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

### Installing AnimatedContent via jsrepo

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/api-reference.md

Shows how to install the AnimatedContent-TS-CSS component using jsrepo or shadcn.

```bash
npx jsrepo add @react-bits/AnimatedContent-TS-CSS
# or via shadcn
npx shadcn@latest add @react-bits/AnimatedContent-TS-CSS
```

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

### Install Component via shadcn CLI

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/configuration.md

Command to install a specific component variant using the shadcn CLI.

```bash
# Via shadcn
npx shadcn@latest add @react-bits/AnimatedContent-TS-CSS
```

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

### Setting up ComponentPropsProvider

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/hooks.md

Shows the basic setup for `ComponentPropsProvider`, which is required to use hooks like `useComponentPropsContext`.

```typescript
import { ComponentPropsProvider } from '@react-bits/hooks';

<ComponentPropsProvider initialProps={{...}}>
  <YourApp />
</ComponentPropsProvider>
```

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

### useInstallation

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/hooks.md

Hook for managing installation commands for components, supporting various build configurations.

```APIDOC
## useInstallation

### Description
Manages installation commands for components, allowing selection of different build variants (e.g., JavaScript/TypeScript, CSS/Tailwind).

### Parameters
#### Path Parameters
- **componentName** (string) - Required - Component name (e.g., 'AnimatedContent')

### Return Values
- **variant** (string) - Currently selected variant
- **copied** (boolean) - Whether install command was copied
- **command** (string) - Current installation command
- **setVariant** - (v) => void - Set selected variant
- **handleCopy** - () => void - Copy command to clipboard

### Supported Variants
- `JS-CSS` - JavaScript with CSS modules
- `JS-TW` - JavaScript with Tailwind CSS
- `TS-CSS` - TypeScript with CSS modules
- `TS-TW` - TypeScript with Tailwind CSS

### Usage Example
```typescript
import { useInstallation } from '@react-bits/hooks';

export default function InstallationGuide() {
  const { variant, command, setVariant, handleCopy, copied } = useInstallation('AnimatedContent');

  return (
    <div>
      <select value={variant} onChange={(e) => setVariant(e.target.value)}>
        <option value="JS-CSS">JavaScript + CSS</option>
        <option value="JS-TW">JavaScript + Tailwind</option>
        <option value="TS-CSS">TypeScript + CSS</option>
        <option value="TS-TW">TypeScript + Tailwind</option>
      </select>
      
      <code>{command}</code>
      
      <button onClick={handleCopy}>
        {copied ? 'Copied!' : 'Copy'}
      </button>
    </div>
  );
}
```

### Generated Command Format
```
npx jsrepo add @react-bits/{ComponentName}-{Variant}
npx shadcn@latest add @react-bits/{ComponentName}-{Variant}
```
```

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

### useInstallation

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/hooks.md

Manages the installation state and related methods for a component, primarily used within documentation demo pages.

```APIDOC
## useInstallation

### Description
Hook designed to manage the installation state and associated methods for a specific component. Its primary use case is within the documentation's demo pages to illustrate installation procedures.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **componentName** (string) - The name of the component for which to manage installation state.

### Return Values
- **variant** (string) - The currently selected installation variant.
- **copied** (boolean) - A flag indicating whether the installation command has been copied.
- **command** (string) - The installation command string.
- **setVariant** ( (v: string) => void ) - A function to set the installation variant.
- **handleCopy** ( () => void ) - A function to handle copying the installation command to the clipboard.
```

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

### Learning Path for React Developers

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/INDEX.md

A learning path tailored for React developers new to react-bits, guiding them through the project overview, API examples, and type definitions.

```markdown
### For React Developers (New to react-bits)
1. [README.md](README.md) - Project overview (10 min)
2. [api-reference.md](api-reference.md) - Browse examples (20 min)
3. [types.md](types.md) - Understand prop types (10 min)
4. Start building! (30 min+)
```

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

### Install Component via jsrepo CLI

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/configuration.md

Command to install a specific component variant using the jsrepo CLI.

```bash
# Via jsrepo
npx jsrepo add @react-bits/AnimatedContent-TS-CSS
```

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

### Install Component with shadcn

Source: https://github.com/davidhdev/react-bits/blob/main/README.md

Use the shadcn CLI to add a specific React Bits component to your project. Ensure you have shadcn installed.

```bash
npx shadcn@latest add @react-bits/BlurText-TS-TW
```

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

### Registry Component JSON Output Example

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/configuration.md

Example of the JSON structure for a component entry in the registry. It includes metadata like name, title, description, type, categories, and file paths.

```json
{
  "name": "AnimatedContent-TS-CSS",
  "title": "AnimatedContent",
  "description": "Wrapper that animates children on scroll...",
  "type": "registry:component",
  "categories": ["Animations"],
  "files": [
    {
      "path": "src/ts-default/Animations/AnimatedContent/AnimatedContent.tsx"
    },
    {
      "path": "src/ts-default/Animations/AnimatedContent/AnimatedContent.css"
    }
  ]
}
```

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

### Component File Structure Example

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/configuration.md

Shows the typical directory layout for a component, including the main component file, CSS, and optional files.

```plaintext
src/ts-default/Animations/AnimatedContent/
├── AnimatedContent.tsx      (Main component)
├── AnimatedContent.css      (Styles)
└── (optional files)
```

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

### Completeness Checklist

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/INDEX.md

A checklist indicating the completeness of the react-bits documentation, covering aspects like component APIs, type definitions, hooks, utilities, configuration, installation, and examples.

```markdown
This documentation covers:

- ✅ **Component APIs** - All exported components with full signatures
- ✅ **Type Definitions** - All TypeScript interfaces and types
- ✅ **Hook Documentation** - All custom React hooks with examples
- ✅ **Utility Functions** - All helper functions with use cases
- ✅ **Configuration** - Registry and build system setup
- ✅ **Installation** - Multiple installation methods
- ✅ **Code Examples** - Practical usage examples for each API
- ✅ **Type Tables** - Parameters and return values documented
- ✅ **Performance Notes** - Best practices and optimization tips
- ✅ **Troubleshooting** - Common issues and solutions
- ✅ **Navigation** - Cross-linking between documents
- ✅ **Contributing Guide** - How to add new components
```

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

### GSAP Animation Configuration Example

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/types.md

Illustrates the usage of GSAP for animations, including defining a type for easing strings and an example of animating properties like rotation and opacity with specified duration and ease.

```typescript
import gsap from 'gsap';

// Easing strings
type EaseString = 'power1.out' | 'power2.out' | 'power3.out' | 'power4.out' |
                  'power1.in' | 'power2.in' | 'power3.in' | 'power4.in' |
                  'back.out' | 'elastic.out' | 'bounce.out' | /* ... */;

gsap.to(element, {
  duration: 0.5,
  ease: 'power3.out',
  rotateX: 45,
  opacity: 1
});
```

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

### Install TypeScript with CSS Modules

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/README.md

Use this command to add the TypeScript with CSS Modules variant of a component to your project.

```bash
npx jsrepo add @react-bits/AnimatedContent-TS-CSS
```

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

### Memoizing Calculated Values with useMemo

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/utilities.md

Optimize performance by memoizing expensive calculations using `useMemo`. This example demonstrates memoizing window size calculations and updating them on resize.

```typescript
const windowSize = useMemo(() => calcWinsize(), []);

useEffect(() => {
  const handleResize = () => {
    Object.assign(windowSize, calcWinsize());
  };
  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize);
}, []);
```

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

### Custom Hooks Reference

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/INDEX.md

Reference for custom React hooks, including their signatures, parameters, return values, and usage examples. Covers hooks for prop management, installation helpers, route detection, state management, and more.

```APIDOC
## Custom Hooks Reference

This section details the custom React hooks available in the library.

1.  **useComponentProps()**
    - Description: URL-based prop state management, query parameter synchronization, and sharing URLs with configurations. Supports type parsing for numbers, booleans, colors, and strings.
    - Signature: [Full function signature]
    - Parameters: [Parameter table]
    - Return Value: [Return value documentation]
    - Usage Examples: [Complete usage examples]

2.  **useInstallation()**
    - Description: Provides component installation helpers, variant selection management, copy-to-clipboard functionality, and installation command generation.
    - Signature: [Full function signature]
    - Parameters: [Parameter table]
    - Return Value: [Return value documentation]
    - Usage Examples: [Complete usage examples]

3.  **useActiveRoute()**
    - Description: Hook for route detection and active state management for navigation.
    - Signature: [Full function signature]
    - Parameters: [Parameter table]
    - Return Value: [Return value documentation]
    - Usage Examples: [Complete usage examples]

4.  **useForceRerender()**
    - Description: Utility hook to force component re-renders, useful for debugging and testing.
    - Signature: [Full function signature]
    - Parameters: [Parameter table]
    - Return Value: [Return value documentation]
    - Usage Examples: [Complete usage examples]

5.  **useScrollToTop()**
    - Description: Automatically scrolls to the top on component mount and handles scroll-to-top on route changes.
    - Signature: [Full function signature]
    - Parameters: [Parameter table]
    - Return Value: [Return value documentation]
    - Usage Examples: [Complete usage examples]

6.  **useTransition()**
    - Description: Manages transition states and handles asynchronous operations.
    - Signature: [Full function signature]
    - Parameters: [Parameter table]
    - Return Value: [Return value documentation]
    - Usage Examples: [Complete usage examples]

7.  **useStars()**
    - Description: Fetches GitHub star counts with caching using localStorage.
    - Signature: [Full function signature]
    - Parameters: [Parameter table]
    - Return Value: [Return value documentation]
    - Usage Examples: [Complete usage examples]

8.  **useComponentPropsContext()**
    - Description: Enables context-based prop management for multi-component coordination.
    - Signature: [Full function signature]
    - Parameters: [Parameter table]
    - Return Value: [Return value documentation]
    - Usage Examples: [Complete usage examples]

---
```

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

### Development Server Concurrency

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/configuration.md

Starts the development environment, running the registry builder and Vite dev server in parallel. Output colors distinguish between registry (blue) and docs (green).

```bash
npm run dev
```

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

### useActiveRoute Usage Example

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/hooks.md

Shows how to use the useActiveRoute hook to highlight the active navigation link based on the current URL.

```typescript
import { useActiveRoute } from '@react-bits/hooks';

export default function Navigation() {
  const activeRoute = useActiveRoute([
    '/animations/blob-cursor',
    '/animations/magic-rings',
    '/text-animations/blur-text'
  ]);

  return (
    <nav>
      <a className={activeRoute === '/animations/blob-cursor' ? 'active' : ''}>
        Blob Cursor
      </a>
      {/* ... */}
    </nav>
  );
}
```

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

### Animation Optimization Examples

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/README.md

Illustrates good and cautioned practices for animation performance. Prioritizes GPU acceleration and efficient rendering techniques.

```typescript
// ✅ Good: 60fps animations with requestAnimationFrame
<BlobCursor />

// ✅ Good: GPU-accelerated CSS transforms
<AnimatedContent direction="vertical" />

// ⚠️ Caution: Heavy JavaScript animations
// Prefer GSAP or motion.js libraries
```

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

### Plasma Background Component Example

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/api-reference.md

Integrate an animated plasma effect for a dynamic background. Customize the appearance using an array of colors, speed, and turbulence settings.

```typescript
import Plasma from '@react-bits/Plasma-TS-CSS';

export default function App() {
  return (
    <Plasma
      colors={['#ff00ff', '#00ffff']}
      speed={1.0}
      turbulence={0.5}
    />
  );
}
```

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

### Utility Functions Documentation

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/DOCUMENTATION_SUMMARY.txt

The utilities.md file documents 10 utility functions, including animation and general utilities, with details on signatures, parameters, return values, and examples.

```APIDOC
## Utility Functions

### Description
Documents the utility functions provided by the react-bits library.

### Details
- **File**: utilities.md
- **Content**: 10 utility functions documented.
- **Categories**: Animation utilities (map, lerp, getMousePos, calcWinsize, getRandomNumber) and General utilities (getLanguage, getStarsCount, decodeLabel, etc.).
- **Per Utility**: Includes signature, parameters, return value, examples, and formulas.
- **Additional Info**: Covers common patterns, recipes, third-party utilities reference, and performance tips.
```

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

### API Reference Overview

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/DOCUMENTATION_SUMMARY.txt

The api-reference.md file contains complete API documentation for over 21 components, organized by category. It includes component signatures, parameters, return types, usage examples, and export/import information.

```APIDOC
## API Reference

### Description
Provides comprehensive API documentation for all components within the react-bits library.

### Details
- **File**: api-reference.md
- **Content**: Complete API documentation for 21+ components.
- **Organization**: Organized by category (Animations, TextAnimations, Components, Backgrounds).
- **Per Component**: Includes signature, parameters, return type, usage example, and source reference.
- **Additional Info**: Covers export structure, import paths, common props patterns, variant system, dependencies, accessibility, and performance notes.
```

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

### Install TypeScript with Tailwind CSS

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/README.md

Use this command to add the TypeScript with Tailwind CSS variant of a component to your project.

```bash
npx jsrepo add @react-bits/AnimatedContent-TS-TW
```

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

### useInstallation Hook Signature

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/hooks.md

Defines the signature for the useInstallation hook, which manages installation state and methods for components, primarily used in documentation demos.

```typescript
function useInstallation(componentName: string): {
  variant: string;
  copied: boolean;
  command: string;
  setVariant: (v: string) => void;
  handleCopy: () => void;
}
```

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

### Galaxy Background Component Example

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/api-reference.md

Create a 3D particle galaxy simulation for your background. Configure the number of particles, animation speed, and color scheme. This component relies on the Three.js library.

```typescript
import Galaxy from '@react-bits/Galaxy-TS-CSS';

export default function App() {
  return (
    <Galaxy
      particleCount={5000}
      speed={1.0}
      colorScheme="nebula"
    />
  );
}
```

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

### useComponentProps Usage Example

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/hooks.md

Demonstrates how to use the useComponentProps hook to manage and update component props, including syncing with URL parameters and providing shareable links.

```typescript
import { useComponentProps } from '@react-bits/hooks';

export default function Demo() {
  const { props, updateProp, resetProps, getShareUrl } = useComponentProps({
    distance: 100,
    duration: 0.8,
    backgroundColor: '#ffffff',
    enabled: true
  });

  return (
    <div>
      <AnimatedContent {...props}>
        <h1>Animated content</h1>
      </AnimatedContent>
      
      <div>
        <input
          type="range"
          value={props.distance}
          onChange={(e) => updateProp('distance', Number(e.target.value))}
        />
        
        <button onClick={resetProps}>Reset</button>
        <button onClick={() => {
          navigator.clipboard.writeText(getShareUrl());
        }}>
          Copy Share Link
        </button>
      </div>
    </div>
  );
}
```

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

### useStars Hook Example

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/hooks.md

Shows how to fetch and display the star count for a GitHub repository using the useStars hook. It handles loading states and potential fetch failures.

```typescript
import { useStars } from '@react-bits/hooks';

export default function Header() {
  const stars = useStars('davidhdev', 'react-bits');

  return (
    <div>
      <h1>React Bits</h1>
      {stars !== null && <span>⭐ {stars.toLocaleString()} stars</span>}
    </div>
  );
}
```

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

### useForceRerender Usage Example

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/hooks.md

Demonstrates using the useForceRerender hook to force a component to re-render, useful for debugging or testing specific scenarios.

```typescript
import { useForceRerender } from '@react-bits/hooks';

export default function TestComponent() {
  const forceRerender = useForceRerender();

  return (
    <div>
      <button onClick={forceRerender}>
        Force Re-render
      </button>
      {/* ... */}
    </div>
  );
}
```

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

### useScrollToTop Hook Example

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/hooks.md

Illustrates the basic usage of the useScrollToTop hook, which automatically scrolls the page to the top on component mount or route changes.

```typescript
import { useScrollToTop } from '@react-bits/hooks';

export default function Page() {
  // Automatically scroll to top on mount/route change
  useScrollToTop();

  return (
    <div>
      {/* Page content */}
    </div>
  );
}
```

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

### Custom Hooks Documentation

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/DOCUMENTATION_SUMMARY.txt

The hooks.md file documents 8 custom React hooks, providing full signatures, parameter tables, return value documentation, and complete usage examples.

```APIDOC
## Custom Hooks

### Description
Documents the custom React hooks available in the react-bits library.

### Details
- **File**: hooks.md
- **Content**: 8 custom React hooks documented.
- **Per Hook**: Includes full signatures, parameter tables, return value documentation, and complete usage examples.
- **Additional Info**: Covers internal behavior, performance notes, hook patterns, combinations, browser compatibility, and performance tips.
```

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

### useTransition Hook Example

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/hooks.md

Demonstrates how to use the useTransition hook to manage UI states during asynchronous operations or navigation. It provides a boolean flag for transition state and a function to initiate transitions.

```typescript
import { useTransition } from '@react-bits/hooks';

export default function NavigationLink() {
  const { isTransitioning, startTransition } = useTransition();

  const handleClick = () => {
    startTransition(() => {
      // Navigate or perform async operation
      router.push('/next-page');
    });
  };

  return (
    <button onClick={handleClick} disabled={isTransitioning}>
      {isTransitioning ? 'Loading...' : 'Go'}
    </button>
  );
}
```

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

### Magnet Component Usage

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/README.md

Example of using the Magnet component with spring physics for interactive elements. It provides a magnetic effect to child elements.

```typescript
<Magnet padding={10} strength={0.2}>
  <button>Magnetic Button</button>
</Magnet>
```

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

### Hero Section with Animations

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/README.md

Example of a hero section using Aurora background and AnimatedContent for scroll-triggered animations. Ensure Aurora and AnimatedContent components are imported.

```typescript
<div>
  <Aurora colorStops={['#5227FF', '#7cff67']} />
  <AnimatedContent distance={100} duration={0.8}>
    <h1>Welcome</h1>
    <p>Scroll to explore</p>
  </AnimatedContent>
</div>
```

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

### Carousel Component Example

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/api-reference.md

Implement a gallery carousel with touch controls and pagination. Provide an array of React nodes for the slides and configure autoplay and interval settings as needed.

```typescript
import Carousel from '@react-bits/Carousel-TS-CSS';

export default function App() {
  return (
    <Carousel
      slides={
        [
          <img src="1.jpg" />,
          <img src="2.jpg" />,
        ]
      }
      autoPlay={true}
      interval={5000}
    />
  );
}
```

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

### Documentation Statistics Table

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/INDEX.md

Displays key metrics about the project's documentation, including lines, files, components, hooks, utilities, types, code examples, and tables.

```markdown
| Metric | Value |
|--------|-------|
| Total Documentation Lines | 4,029 |
| Total Documentation Files | 6 |
| Components Documented | 21+ |
| Hooks Documented | 8 |
| Utilities Documented | 10 |
| Types Documented | 10+ |
| Code Examples | 50+ |
| Tables | 30+ |
```

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

### DotGrid Background Component Example

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/api-reference.md

Use the DotGrid component for an animated grid of dots background. Adjust density, colors, and speed to control the visual appearance. Enable interactivity to respond to mouse position.

```typescript
import DotGrid from '@react-bits/DotGrid-TS-CSS';

export default function App() {
  return (
    <DotGrid
      density={20}
      colors={['#ff00ff', '#00ffff']}
      speed={1.0}
    />
  );
}
```

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

### Components API Reference

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/INDEX.md

Detailed API documentation for all components, including animations, text animations, general components, and backgrounds. Each component's documentation includes its TypeScript function signature, parameter table, return type, usage examples, and error conditions.

```APIDOC
## Components API Reference

This section details the API for various components within the React Bits library.

### Animations

- **AnimatedContent**
  - Description: Scroll-triggered animation wrapper.
  - Signature: [Full TypeScript function signature]
  - Parameters: [Complete parameter table]
  - Return Type: [Return type documentation]
  - Usage Examples: [Usage code examples]
  - Error Conditions: [Throwing/error conditions]

- **BlobCursor**
  - Description: Organic cursor trail with inertia.
  - Signature: [Full TypeScript function signature]
  - Parameters: [Complete parameter table]
  - Return Type: [Return type documentation]
  - Usage Examples: [Usage code examples]
  - Error Conditions: [Throwing/error conditions]

- **FadeContent**
  - Description: Simple fade/slide entrance/exit.
  - Signature: [Full TypeScript function signature]
  - Parameters: [Complete parameter table]
  - Return Type: [Return type documentation]
  - Usage Examples: [Usage code examples]
  - Error Conditions: [Throwing/error conditions]

- **GhostCursor**
  - Description: Semi-transparent cursor following.
  - Signature: [Full TypeScript function signature]
  - Parameters: [Complete parameter table]
  - Return Type: [Return type documentation]
  - Usage Examples: [Usage code examples]
  - Error Conditions: [Throwing/error conditions]

- **Magnet**
  - Description: Cursor attraction with spring physics.
  - Signature: [Full TypeScript function signature]
  - Parameters: [Complete parameter table]
  - Return Type: [Return type documentation]
  - Usage Examples: [Usage code examples]
  - Error Conditions: [Throwing/error conditions]

- **Cubes**
  - Description: 3D rotating cube grid.
  - Signature: [Full TypeScript function signature]
  - Parameters: [Complete parameter table]
  - Return Type: [Return type documentation]
  - Usage Examples: [Usage code examples]
  - Error Conditions: [Throwing/error conditions]

### Text Animations

- **BlurText**
  - Description: Blur-to-sharp text reveal.
  - Signature: [Full TypeScript function signature]
  - Parameters: [Complete parameter table]
  - Return Type: [Return type documentation]
  - Usage Examples: [Usage code examples]
  - Error Conditions: [Throwing/error conditions]

- **CountUp**
  - Description: Animated number counter.
  - Signature: [Full TypeScript function signature]
  - Parameters: [Complete parameter table]
  - Return Type: [Return type documentation]
  - Usage Examples: [Usage code examples]
  - Error Conditions: [Throwing/error conditions]

- **GlitchText**
  - Description: Glitch distortion effect.
  - Signature: [Full TypeScript function signature]
  - Parameters: [Complete parameter table]
  - Return Type: [Return type documentation]
  - Usage Examples: [Usage code examples]
  - Error Conditions: [Throwing/error conditions]

- **CircularText**
  - Description: Circular text layout.
  - Signature: [Full TypeScript function signature]
  - Parameters: [Complete parameter table]
  - Return Type: [Return type documentation]
  - Usage Examples: [Usage code examples]
  - Error Conditions: [Throwing/error conditions]

### Components

- **Counter**
  - Description: High-performance digit display.
  - Signature: [Full TypeScript function signature]
  - Parameters: [Complete parameter table]
  - Return Type: [Return type documentation]
  - Usage Examples: [Usage code examples]
  - Error Conditions: [Throwing/error conditions]

- **BorderGlow**
  - Description: Glowing card with edge tracking.
  - Signature: [Full TypeScript function signature]
  - Parameters: [Complete parameter table]
  - Return Type: [Return type documentation]
  - Usage Examples: [Usage code examples]
  - Error Conditions: [Throwing/error conditions]

- **Dock**
  - Description: Mac-style application dock.
  - Signature: [Full TypeScript function signature]
  - Parameters: [Complete parameter table]
  - Return Type: [Return type documentation]
  - Usage Examples: [Usage code examples]
  - Error Conditions: [Throwing/error conditions]

- **Carousel**
  - Description: Gallery carousel with pagination.
  - Signature: [Full TypeScript function signature]
  - Parameters: [Complete parameter table]
  - Return Type: [Return type documentation]
  - Usage Examples: [Usage code examples]
  - Error Conditions: [Throwing/error conditions]

### Backgrounds

- **Aurora**
  - Description: Aurora borealis WebGL effect.
  - Signature: [Full TypeScript function signature]
  - Parameters: [Complete parameter table]
  - Return Type: [Return type documentation]
  - Usage Examples: [Usage code examples]
  - Error Conditions: [Throwing/error conditions]

- **Plasma**
  - Description: Turbulent plasma animation.
  - Signature: [Full TypeScript function signature]
  - Parameters: [Complete parameter table]
  - Return Type: [Return type documentation]
  - Usage Examples: [Usage code examples]
  - Error Conditions: [Throwing/error conditions]

- **DotGrid**
  - Description: Animated grid of dots.
  - Signature: [Full TypeScript function signature]
  - Parameters: [Complete parameter table]
  - Return Type: [Return type documentation]
  - Usage Examples: [Usage code examples]
  - Error Conditions: [Throwing/error conditions]

---
```

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

### Aurora Background Component Example

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/api-reference.md

Add an animated aurora effect to your background using WebGL. Configure the color stops, amplitude, blend, and speed to customize the light wave animation.

```typescript
import Aurora from '@react-bits/Aurora-TS-CSS';

export default function App() {
  return (
    <Aurora
      colorStops={['#5227FF', '#7cff67', '#5227FF']}
      amplitude={1.0}
      blend={0.5}
      speed={1.0}
    />
  );
}
```

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

### PillNav Component Example

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/api-reference.md

Use PillNav for creating a navigation bar with an animated active indicator. It requires an array of item labels, the currently active item index, and a callback for selection.

```typescript
import PillNav from '@react-bits/PillNav-TS-CSS';

export default function App() {
  const [active, setActive] = useState(0);
  
  return (
    <PillNav
      items={['Home', 'About', 'Contact']}
      active={active}
      onSelect={setActive}
      color="#5227FF"
    />
  );
}
```

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

### Build Registry Script

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/configuration.md

After adding a new component and updating its information, run this script to build the project registry.

```bash
npm run registry:build
```

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

### Animated Number Counter

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/api-reference.md

Animate number counts with CountUp. Supports formatting and decimals. Configure target and starting numbers, duration, and direction. Starts automatically on mount or when in view.

```typescript
import CountUp from '@react-bits/CountUp-TS-CSS';

export default function App() {
  return (
    <CountUp
      to={1000}
      from={0}
      duration={2}
      separator=","
      direction="up"
    />
  );
}
```

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

### Distribution Method: shadcn/ui Compatible

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/configuration.md

Command to add a component to your project, compatible with shadcn/ui.

```bash
npx shadcn@latest add @react-bits/ComponentName-TS-CSS
```

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

### Add Component with shadcn CLI

Source: https://github.com/davidhdev/react-bits/blob/main/public/llms.txt

Use the shadcn CLI to add components. Specify the component name, language (JS/TS), and style (CSS/TW).

```bash
npx shadcn@latest add https://reactbits.dev/r/<Component>-<LANG>-<STYLE>
```

```bash
npx shadcn@latest add https://reactbits.dev/r/SplitText-JS-CSS
```

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

### AnimatedContent Component Usage

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/README.md

Example of using the AnimatedContent component for scroll-based animations. It animates its content when it enters the viewport.

```typescript
<AnimatedContent
  distance={100}
  duration={0.8}
  direction="vertical"
>
  Content animates on scroll
</AnimatedContent>
```

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

### Add Component with jsrepo CLI

Source: https://github.com/davidhdev/react-bits/blob/main/public/llms.txt

Use the jsrepo CLI to add components. Specify the component name, language (JS/TS), and style (CSS/TW).

```bash
npx jsrepo@latest add https://reactbits.dev/r/<Component>-<LANG>-<STYLE>
```

```bash
npx jsrepo@latest add https://reactbits.dev/r/SplitText-JS-CSS
```

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

### Aurora Background Component Usage

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/README.md

Example of using the Aurora component for WebGL backgrounds. It renders a GPU-accelerated aurora effect.

```typescript
<Aurora
  colorStops={['#5227FF', '#7cff67']}
  amplitude={1.0}
/>
```

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

### BlobCursor Component Usage

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/README.md

Example of using the BlobCursor component for cursor-tracking animations. It creates a visual trail following the cursor.

```typescript
<BlobCursor
  fillColor="#5227FF"
  trailCount={3}
  sizes={[60, 125, 75]}
/>
```

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

### CountUpProps Interface

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/types.md

Defines the properties for the CountUp component. Specify the target number, direction, duration, and callbacks for start and end events.

```typescript
interface CountUpProps {
  to: number;
  from?: number;
  direction?: 'up' | 'down';
  delay?: number;
  duration?: number;
  className?: string;
  startWhen?: boolean;
  separator?: string;
  onStart?: () => void;
  onEnd?: () => void;
}
```

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

### Using Multiple Hooks in a Demo Page

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/hooks.md

Illustrates how to import and utilize several hooks simultaneously within a single React component for a demo page. Includes `useScrollToTop`, `useComponentProps`, `useInstallation`, and `useForceRerender`.

```typescript
import {
  useComponentProps,
  useInstallation,
  useScrollToTop,
  useForceRerender
} from '@react-bits/hooks';

export default function DemoPage() {
  useScrollToTop();
  
  const { props, updateProp, resetProps } = useComponentProps({
    distance: 100,
    duration: 0.8
  });
  
  const { variant, command, setVariant } = useInstallation('AnimatedContent');
  const forceRerender = useForceRerender();

  return (
    <div>
      {/* Demo content */}
    </div>
  );
}
```

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

### Interactive Carousel Gallery

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/README.md

Example of an interactive carousel component. The 'slides' prop should be an array of image data, and autoplay and pagination can be configured.

```typescript
<Carousel
  slides={images}
  autoPlay={true}
  duration={0.5}
  showPagination={true}
/>
```

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

### Build Output Configuration

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/configuration.md

Configuration snippet for the build process, specifying the output directory and format for generated registry files.

```typescript
outputs: [output({ dir: 'public/r', format: true })]
```

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

### Generate Sitemap

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/configuration.md

Generates the sitemap.xml file for SEO purposes.

```bash
npm run sitemap
```

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

### Get Language from Code Type

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/utilities.md

Determines the appropriate language identifier for a given code type, useful for syntax highlighting. Import 'getLanguage' from '@react-bits/utils'.

```typescript
import { getLanguage } from '@react-bits/utils';

const codeType = 'installation';
const language = getLanguage(codeType);
// Returns: 'bash'

// Use with syntax highlighter
<SyntaxHighlighter language={language}>
  {code}
</SyntaxHighlighter>
```

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

### Get current window dimensions

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/utilities.md

Retrieves the current inner width and height of the browser window. Useful for responsive layouts and recalculating dimensions on resize.

```typescript
function calcWinsize(): {
  width: number;
  height: number;
}
```

```typescript
import { calcWinsize } from '@react-bits/utils';

const { width, height } = calcWinsize();
console.log(`Window: ${width}x${height}`);

// In useEffect to handle resize
useEffect(() => {
  const handleResize = () => {
    const { width, height } = calcWinsize();
    // Recalculate layout
  };
  window.addEventListener('resize', handleResize);
  return () => window.removeEventListener('resize', handleResize);
}, []);
```

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

### Configuration Reference

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/DOCUMENTATION_SUMMARY.txt

This section outlines the configuration options available for the React Bits library, essential for customizing its behavior and integrating it into your development workflow.

```APIDOC
## Configuration (configuration.md)

### Description
Details the configuration system for the React Bits library, including registry, component definition, metadata, and variant systems.

### Configuration Areas
- jsrepo Registry Configuration
- Component Definition System
- Component Metadata Structure
- Variant System
```

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

### Package.json Scripts for Build and Registry

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/configuration.md

Defines scripts in package.json for building the component registry and the main project using Vite and jsrepo.

```json
{
  "scripts": {
    "dev": "concurrently -n \"registry,docs\" -c \"blue,green\" \"npm run registry:dev\" \"vite\",
    "build": "npm run registry:build && npm run llms:text && npm run sitemap && vite build",
    "registry:build": "jsrepo build",
    "registry:dev": "jsrepo build --watch"
  }
}
```

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

### BlurText

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/api-reference.md

Animates text by starting blurred and then crisply resolving, creating a soft-focus reveal effect. It can animate by words or letters and supports custom directions and animation steps.

```APIDOC
## BlurText

### Description
Text starts blurred then crisply resolves for a soft-focus reveal effect.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Component Props
| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| text | string | '' | Text content to animate |
| delay | number | 200 | Stagger delay (ms) between elements |
| className | string | '' | CSS classes |
| animateBy | 'words' \| 'letters' | 'words' | Animation unit size |
| direction | 'top' \| 'bottom' | 'top' | Blur approach direction |
| threshold | number | 0.1 | Intersection threshold (0-1) |
| rootMargin | string | '0px' | Intersection observer margin |
| animationFrom | Record<string, string \| number> | — | Custom start state |
| animationTo | Array<Record<...>> | — | Custom keyframe states |
| easing | (t: number) => number | linear | Custom easing function |
| onAnimationComplete | () => void | — | Animation completion callback |
| stepDuration | number | 0.35 | Duration per animation step |

### Returns
`React.ReactElement` - Animated paragraph

### Features
IntersectionObserver integration, motion.js animation
```

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

### Direct Import of Internal Utilities

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/utilities.md

Demonstrates how to import internal utility functions directly from their respective modules. Note that these are not officially exported and should be used with caution.

```typescript
import { map, lerp } from '@react-bits/utils/animationUtils';
import { randomHex, decodeLabel } from '@react-bits/utils/utils';
```

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

### Merging Tailwind Classes with tailwind-merge

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/utilities.md

Intelligently merge Tailwind CSS classes, resolving conflicts and ensuring correct styling. The example shows how overlapping classes are handled.

```typescript
import { twMerge } from 'tailwind-merge';

twMerge('px-2 py-1 px-8');  // 'py-1 px-8'
```

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

### Categories Configuration

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/configuration.md

Defines the metadata for component categories, including ID, name, description, and an icon identifier.

```javascript
export const categories = [
  {
    id: 'Animations',
    name: 'Animations',
    description: 'Interactive cursor and scroll animations',
    icon: 'Zap'
  },
  {
    id: 'TextAnimations',
    name: 'Text Animations',
    description: 'Text-specific animation effects',
    icon: 'Type'
  },
  {
    id: 'Components',
    name: 'Components',
    description: 'Functional UI components',
    icon: 'Layout'
  },
  {
    id: 'Backgrounds',
    name: 'Backgrounds',
    description: 'Full-screen animated backgrounds',
    icon: 'Palette'
  }
];
```

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

### Learning Path for TypeScript/Advanced Users

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/INDEX.md

A learning path for TypeScript and advanced users of react-bits, covering the type system, API signatures, hooks, and utility functions.

```markdown
### For TypeScript/Advanced Users
1. [README.md](README.md) - Quick overview (5 min)
2. [types.md](types.md) - Complete type system (15 min)
3. [api-reference.md](api-reference.md) - API signatures (10 min)
4. [hooks.md](hooks.md) - Advanced patterns (10 min)
5. [utilities.md](utilities.md) - Animation utilities (5 min)
```

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

### Generate New Component

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/configuration.md

Use this script to generate a new component template, including directory structure, TypeScript/JavaScript files, CSS/Tailwind styling, and metadata updates.

```bash
npm run new:component
```

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

### Get normalized mouse/pointer position

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/utilities.md

Extracts viewport coordinates (clientX, clientY) from a mouse or pointer event. Note that this returns viewport coordinates, not coordinates relative to the target element.

```typescript
function getMousePos(
  e: React.MouseEvent | React.PointerEvent | MouseEvent | PointerEvent
): { x: number; y: number }
```

```typescript
import { getMousePos } from '@react-bits/utils';

function handleMouseMove(e) {
  const { x, y } = getMousePos(e);
  console.log(`Mouse at ${x}, ${y}`);
}

<div onMouseMove={handleMouseMove} />
```

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

### useComponentPropsContext Hook Example

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/hooks.md

Illustrates accessing and updating component properties from React Context using the useComponentPropsContext hook. This is typically used in demo pages for dynamic prop management.

```typescript
function useComponentPropsContext(): {
  props: Record<string, any>;
  updateProps: (updates: Record<string, any>) => void;
}
```

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

### Animated Box with Utility Composition

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/utilities.md

Demonstrates composing multiple utility functions for creating an animated effect based on mouse movement. Imports include map, lerp, getMousePos, calcWinsize, and getRandomNumber from '@react-bits/utils'.

```typescript
import {
  map,
  lerp,
  getMousePos,
  calcWinsize,
  getRandomNumber
} from '@react-bits/utils';

function AnimatedBox() {
  const boxRef = useRef(null);

  const handleMouseMove = (e) => {
    // Get mouse position
    const { x, y } = getMousePos(e);
    
    // Get window size
    const { width, height } = calcWinsize();
    
    // Normalize position to 0-1
    const normalizedX = map(x, 0, width, 0, 1);
    const normalizedY = map(y, 0, height, 0, 1);
    
    // Apply rotation
    const rotX = map(normalizedY, 0, 1, -45, 45);
    const rotY = map(normalizedX, 0, 1, -45, 45);
    
    gsap.to(boxRef.current, {
      rotationX: rotX,
      rotationY: rotY,
      duration: 0.5
    });
  };

  return (
    <div
      ref={boxRef}
      onMouseMove={handleMouseMove}
      style={{ width: 200, height: 200 }}
    />
  );
}
```

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

### API Reference Documentation

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/DOCUMENTATION_SUMMARY.txt

This section details the API reference documentation, which includes information on components, hooks, and utilities.

```APIDOC
## API Reference

### Description
Provides detailed API documentation for components, hooks, and utilities.

### Endpoint
/api-reference.md

### Content
- API endpoints: 21+ documented
- Hooks: 8/8 (100%) documented
- Utilities: 10/10 (100%) documented
- Types: 10+ documented
- Examples: 50+ code samples
- Tables: 30+ reference tables
```

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

### Distribution Method: jsrepo CLI

Source: https://github.com/davidhdev/react-bits/blob/main/_autodocs/configuration.md

Command to add a component to your project using the jsrepo CLI.

```bash
npx jsrepo add @react-bits/ComponentName-TS-CSS
```