### Getting Started Steps

Source: https://pro.reactbits.dev/docs/blocks/pricing

A simple three-step guide for getting started: Create your account, Invite your team, and Start shipping. This is a common onboarding pattern.

```html
### Up and running  
in minutes
1Create your account
2Invite your team
3Start shipping
```

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

### Install a Pro Block

Source: https://pro.reactbits.dev/docs/installation

Install a pre-built block (e.g., hero section) using the shadcn CLI. This requires Pro or Ultimate plans.

```bash
npx shadcn@latest add @reactbits-pro/hero-1
```

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

### Install a Starter Component

Source: https://pro.reactbits.dev/docs/installation

Install a starter component using the shadcn CLI. Append '-tw' for Tailwind CSS or '-css' for CSS variants.

```bash
npx shadcn@latest add @reactbits-starter/mono-waves-tw
```

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

### Falling Rays Component Example

Source: https://pro.reactbits.dev/docs/components/falling-rays

This is a basic example of how to use the Falling Rays component. It demonstrates the default appearance and can be customized further using the provided props.

```jsx
import { FallingRays } from "@/components/falling-rays";

function App() {
  return (
    <div className="relative w-full h-screen">
      <FallingRays />
    </div>
  );
}
```

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

### Animated List Example

Source: https://pro.reactbits.dev/docs/components/animated-list

A basic example of an animated list with sample data. This snippet demonstrates the structure and content that can be displayed within the animated list.

```plaintext
animated-list-tw
  * JS
John Smith
Liked your post about React performance
2 minutes ago
  * EM
Emma Martinez
Commented on your repository
5 minutes ago
  * AJ
Alex Johnson
Started following you
12 minutes ago
  * SK
Sarah Kim
Mentioned you in a comment
18 minutes ago
  * MB
Michael Brown
Shared your article
25 minutes ago
```

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

### 3D Text Reveal Component Example

Source: https://pro.reactbits.dev/docs/components/3d-text-reveal

Demonstrates the basic implementation of the 3D Text Reveal component. Customize text and 3D settings via props.

```javascript
import { TextReveal } from "@/components/landing-page/3d-text-reveal";

export default function Home() {
  return (
    <main>
      <TextReveal />
    </main>
  );
}
```

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

### Staggered Text Component Example

Source: https://pro.reactbits.dev/docs/components/staggered-text

Demonstrates the basic usage of the Staggered Text component for staggered text reveals. Customize text, segmentation, and animation properties.

```javascript
import { StaggeredText } from "@/components/ui/staggered-text";

export default function StaggeredTextPage() {
  return (
    <div className="flex min-h-[200px] items-center justify-center p-4">
      <StaggeredText
        text="Build faster"
        segmentBy="Characters"
        staggerDirection="Forward"
        direction="Top"
        easing="Anticipate"
        duration="1s"
        delay="80ms"
      />
    </div>
  );
}
```

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

### Add License Key to .env.local

Source: https://pro.reactbits.dev/docs/installation

Add your React Bits license key to the .env.local file in your project root. This is required for installation.

```bash
REACTBITS_LICENSE_KEY=your-license-key-here
```

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

### 3D Letter Swap Component Example

Source: https://pro.reactbits.dev/docs/components/3d-letter-swap

This is a basic example of the 3D Letter Swap component. It demonstrates the hover effect and the initial text. Customize text, stagger, and animation properties via props.

```html
<div class="flex flex-col items-center justify-center">
  <div class="text-5xl font-bold text-white">
    <div class="flex flex-wrap items-center justify-center">
      <div class="relative inline-block px-2 py-1">
        <div class="absolute inset-0 -z-10 flex flex-col justify-center">
          <div class="h-full w-full -rotate-x-90 transform-gpu opacity-40 blur-sm filter">HHoovveerr MMee!!</div>
        </div>
        <div class="flex transform-gpu transition-all duration-500 ease-in-out hover:scale-110 hover:text-cyan-500">
          <div class="relative">H</div>
          <div class="relative">o</div>
          <div class="relative">v</div>
          <div class="relative">e</div>
          <div class="relative">r</div>
          <div class="relative"> </div>
          <div class="relative">M</div>
          <div class="relative">e</div>
          <div class="relative">!</div>
        </div>
      </div>
    </div>
  </div>
</div>
```

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

### Particle Text Component Usage

Source: https://pro.reactbits.dev/docs/components/particle-text

This is an example of how to use the Particle Text component. It demonstrates basic customization of text, particle size, and mouse interaction. This code is available to paying customers.

```javascript
import { ParticleText } from "@/components/particle-text";

function App() {
  return (
    <ParticleText
      text="brilliant."
      colors={["#40ffaa", "#40aaff", "#ff40aa", "#aa40ff"]}
      particleSize={2}
      particleGap={2}
      mouseControls={{
        enabled: true,
        radius: 150,
        strength: 5,
      }}
      fontSize={200}
      autoFit={true}
      backgroundColor="transparent"
      friction={0.75}
      ease={0.05}
    />
  );
}
```

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

### Credit Card Component Example

Source: https://pro.reactbits.dev/docs/components/credit-card

Displays an interactive 3D credit card with parallax tilt and hover effects. This component allows for live customization of card details and appearance.

```html
<div class="credit-card-tw">
  1234567890123456
  CARDHOLDERJOHN DOE
  EXPIRES12/25
  CVV123
</div>
```

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

### Frame Border Component Usage

Source: https://pro.reactbits.dev/docs/components/frame-border

This is a basic example of how to use the Frame Border component. You can customize its appearance and behavior using the provided props.

```jsx
import FrameBorder from "@/components/frame-border";

function App() {
  return (
    <FrameBorder 
      width="100%"
      height="100%"
      speed={0.1}
      borderWidth={0.22}
      falloff={6}
      noiseScale={3}
      noiseStrength={1}
      noiseOctaves={5}
      color="#FF9FFC"
      backgroundColor="#0a0a0a"
      intensity={1}
      gamma={2}
      opacity={1}
    >
      {/* Content rendered above the effect */}
      <div>
        <h1>Content Here</h1>
      </div>
    </FrameBorder>
  );
}
```

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

### Editorial Sample-Pack Download

Source: https://pro.reactbits.dev/docs/blocks/download

An editorial-style download section for sample packs, featuring a serif headline, overlay image, and a pink CTA button. This is ideal for creative assets.

```html
<div class="editorial-download">
  <div class="background-image" style="background-image: url('/images/sample-pack-overlay.jpg');"></div>
  <div class="content">
    <h2 class="serif-headline">Sample Pack Vol. 3</h2>
    <p>Exclusive collection of sounds for your next project.</p>
    <a href="/download/sample-pack-vol3" class="cta-button pink">Download Pack</a>
  </div>
</div>
```

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

### Rotating Cards Component Example

Source: https://pro.reactbits.dev/docs/components/rotating-cards

This is a basic example of the rotating cards component. It displays a 3D circular carousel with draggable cards. Purchase a license to unlock the full code.

```javascript
import React from 'react';

const RotatingCards = ({ cards, radius = 360, duration = 20, cardWidth = 160, cardHeight = 190, pauseOnHover = true, reverse = false, draggable = false, autoPlay = true, onCardClick, mouseWheel = false, className = "", cardClassName = "", initialRotation = 0 }) => {
  // Component logic here
  return (
    <div className={`rotating-cards-container ${className}`}>
      {/* Card rendering logic */}
    </div>
  );
};

export default RotatingCards;
```

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

### Device Component with Image

Source: https://pro.reactbits.dev/docs/components/device

Displays a device mockup with a specified image. Customize scale, parallax, and rotation effects.

```javascript
import { Device } from "@/components/landing-page/device-mockup";

<Device
  scale={0.4}
  isScrollable={false}
  enableParallax={true}
  parallaxStrength={15}
  enableRotate={true}
  rotateStrength={3}
  autoAnimate={false}
/>
```

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

### Warped Card with Tailwind CSS

Source: https://pro.reactbits.dev/docs/components/warped-card

This is an example of the Warped Card component using Tailwind CSS for styling. It demonstrates the basic implementation with customizable props.

```javascript
import React from "react";
import WarpedCard from "./warped-card";

export default function App() {
  return (
    <div className="flex items-center justify-center min-h-screen bg-black">
      <WarpedCard
        width="360px"
        height="480px"
        imageSrc="https://images.unsplash.com/photo-1506748686214-e9df14d4d9d0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bmF0dXJlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60"
        radius={0.95}
        strength={1.1}
        dampening={0.07}
        transitionDuration={0.8}
        borderRadius="16px"
      />
    </div>
  );
}
```

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

### Custom Cursor with Image

Source: https://pro.reactbits.dev/docs/components/custom-cursor

Example of a custom cursor component that displays an image. This snippet is useful for creating visually rich and branded cursor experiences.

```jsx
import AnimatedCursor from "react-animated-cursor"

function App() {
  return (
    <AnimatedCursor 
      innerSize={8} 
      outerSize={8} 
      color='255, 255, 255' 
      outerAlpha={0.2} 
      innerScale={3} 
      outerScale={5} 
      outerStyle={{
        border: '3px solid #fff'
      }} 
    />
  )
}
```

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

### Configure components.json Registries

Source: https://pro.reactbits.dev/docs/installation

Add the 'registries' section to your components.json file to configure access to React Bits starter and pro components. Use '@reactbits-starter' for all components and '@reactbits-pro' for blocks (Pro & Ultimate plans only).

```json
{
  "registries": {
    "@reactbits-starter": {
      "url": "https://pro.reactbits.dev/api/r/starter/{name}.json",
      "headers": {
        "Authorization": "Bearer ${REACTBITS_LICENSE_KEY}"
      }
    },
    "@reactbits-pro": {
      "url": "https://pro.reactbits.dev/api/r/pro/{name}.json",
      "headers": {
        "Authorization": "Bearer ${REACTBITS_LICENSE_KEY}"
      }
    }
  }
}
```

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

### Bento-Style Pricing with Toggle

Source: https://pro.reactbits.dev/docs/blocks/pricing

A bento-style pricing layout with a free tier, a dual-plan toggle, and animated price transitions. Ideal for a modern, visually engaging presentation of pricing tiers.

```html
<!-- pricing-2 -->
```

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

### Customized Falling Rays Component

Source: https://pro.reactbits.dev/docs/components/falling-rays

This example shows how to customize the Falling Rays component with specific colors, ray count, pulse speed, and other visual effects. Adjust these props to achieve the desired aesthetic.

```jsx
import { FallingRays } from "@/components/falling-rays";

function App() {
  return (
    <div className="relative w-full h-screen">
      <FallingRays
        color1="#5227FF"
        color2="#FF9FFC"
        rayCount={15}
        rayWidth={0.004}
        pulseSpeed={0.1}
        pulseWidth={0.01}
        trailLength={0.3}
        motionBlur={0.5}
        bgGlow={0.1}
      />
    </div>
  );
}
```

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

### Pricing Comparison Table

Source: https://pro.reactbits.dev/docs/blocks/comparison

A pricing comparison table with a plan toggle, colored border highlight, and feature rows. This snippet is available for purchase.

```html
<!-- Pricing comparison table with plan toggle, colored border highlight, and feature rows -->
<!-- This code is only available to paying customers. Purchase a license to unlock forever. -->
```

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

### Download CTA with Animated Shader Logo

Source: https://pro.reactbits.dev/docs/blocks/download

A call-to-action for downloads featuring a description and an animated shader logo. This block is designed to be visually engaging.

```html
<div class="download-cta-shader">
  <div class="shader-logo-container">
    <!-- Shader logo will be rendered here -->
    <div class="animated-shader-logo"></div>
  </div>
  <div class="cta-content">
    <h3>Download Our Software</h3>
    <p>Experience the next level of productivity with our innovative software. Features include real-time collaboration and advanced analytics.</p>
    <a href="/download/software" class="cta-button">Download Now</a>
  </div>
</div>
```

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

### Hover Preview Component with Motion

Source: https://pro.reactbits.dev/docs/components/hover-preview

This snippet demonstrates the core implementation of the Hover Preview component using React, TypeScript, and Framer Motion. It includes basic props for customization.

```typescript
import { motion } from "framer-motion";

interface HoverPreviewProps {
  children: React.ReactNode;
  imageUrl: string;
  imageWidth?: number;
  imageHeight?: number;
  imageBorderRadius?: string;
  imageShadow?: boolean;
  imagePosition?: "above" | "below" | "left" | "right";
  enterSpeed?: string;
  exitSpeed?: string;
  maxRotation?: string;
  maxOffset?: string;
  targetPadding?: string;
}

const HoverPreview: React.FC<HoverPreviewProps> = ({
  children,
  imageUrl,
  imageWidth = 200,
  imageHeight = 200,
  imageBorderRadius = "medium",
  imageShadow = false,
  imagePosition = "above",
  enterSpeed = "0.2s",
  exitSpeed = "0.15s",
  maxRotation = "12deg",
  maxOffset = "15px",
  targetPadding = "4px",
}) => {
  const variants = {
    hidden: {
      opacity: 0,
      scale: 0.95,
      rotate: -5,
      transition: {
        duration: parseFloat(exitSpeed),
      },
    },
    visible: {
      opacity: 1,
      scale: 1,
      rotate: 0,
      transition: {
        duration: parseFloat(enterSpeed),
      },
    },
  };

  const imageStyle: React.CSSProperties = {
    width: `${imageWidth}px`,
    height: `${imageHeight}px`,
    borderRadius: imageBorderRadius,
    boxShadow: imageShadow ? "0 4px 15px rgba(0, 0, 0, 0.2)" : "none",
  };

  const positionStyle: React.CSSProperties = {
    transformOrigin: "center center",
    position: "absolute",
    zIndex: 10,
  };

  switch (imagePosition) {
    case "above":
      Object.assign(positionStyle, { bottom: "100%", left: "50%", transform: "translateX(-50%) translateY(-10px)" });
      break;
    case "below":
      Object.assign(positionStyle, { top: "100%", left: "50%", transform: "translateX(-50%) translateY(10px)" });
      break;
    case "left":
      Object.assign(positionStyle, { right: "100%", top: "50%", transform: "translateY(-50%) translateX(-10px)" });
      break;
    case "right":
      Object.assign(positionStyle, { left: "100%", top: "50%", transform: "translateY(-50%) translateX(10px)" });
      break;
  }

  return (
    <div
      style={{ position: "relative", display: "inline-block", padding: targetPadding }}
      className="hover-preview-target"
    >
      {children}
      <motion.div
        className="hover-preview-image"
        style={positionStyle}
        initial="hidden"
        whileHover="visible"
        variants={{
          ...variants,
          visible: {
            ...variants.visible,
            transition: {
              duration: parseFloat(enterSpeed),
              // Add rotation and offset to visible state
              rotate: {
                stiffness: 100,
                damping: 10,
                type: "spring",
                velocity: 10,
                // Apply maxRotation and maxOffset dynamically
                // Note: Framer Motion's spring transition doesn't directly take degrees/px for rotation/offset in this way.
                // This is a conceptual representation. Actual implementation might need more complex logic or different transition types.
              },
              scale: {
                stiffness: 100,
                damping: 10,
                type: "spring",
              },
            },
          },
        }}
      >
        <img src={imageUrl} alt="Preview" style={imageStyle} />
      </motion.div>
    </div>
  );
};

export default HoverPreview;

```

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

### Three-Tier Pricing with Toggle

Source: https://pro.reactbits.dev/docs/blocks/pricing

A three-tier pricing layout featuring a yearly/monthly toggle, a free trial card, and highlighted features. This is suitable for presenting tiered subscription options with flexible billing cycles.

```html
<!-- pricing-1 -->
```

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

### Comparison Table with Toggle

Source: https://pro.reactbits.dev/docs/blocks/pricing

A comparison table layout that includes an Annually/Monthly toggle, a badge for a popular plan, and expandable feature rows. This is useful for detailed plan comparisons.

```html
<!-- pricing-7 -->
```

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

### Preloader with Tailwind CSS

Source: https://pro.reactbits.dev/docs/components/preloader

This snippet demonstrates the basic structure and usage of the Preloader component, likely styled with Tailwind CSS. It includes placeholder text for the loading state and a message indicating content reveal.

```html
<div class="preloader-tw">
  loading
yourexperience.
## Content Revealed!
This content was hidden behind the preloader
```

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

### How It Works - Step-by-step Carousel

Source: https://pro.reactbits.dev/docs/blocks/how-it-works

A step-by-step carousel component for explaining processes with images and navigation. This code is available to paying customers.

```html
### Unlock How It Works
This code is only available to paying customers. Purchase a license to unlock forever.
Login
```

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

### Hover Preview Component Props

Source: https://pro.reactbits.dev/docs/components/hover-preview

This section details the available props for the Hover Preview component, including their types, default values, and descriptions.

```APIDOC
## Hover Preview Component API

### Description

This component displays text content with interactive targets. When a user hovers over a target, a preview image is displayed. The component is highly customizable through its props.

### Props

#### `content`
- **Type**: `string`
- **Default**: `""`
- **Description**: Text content with placeholders for targets (use {0}, {1}, etc.).

#### `targets`
- **Type**: `HoverTarget[]`
- **Default**: `[]`
- **Description**: Array of target configurations. Each `HoverTarget` object can include `text`, `imageUrl`, `linkUrl`, and `altText`.

#### `onTargetClick`
- **Type**: `(target: HoverTarget, index: number) => void`
- **Default**: `undefined`
- **Description**: Callback function executed when a target is clicked. If not provided and `linkUrl` exists for the target, the link will open in a new tab.

#### `imagePosition`
- **Type**: `"above" | "below" | "left" | "right"`
- **Default**: `"above"`
- **Description**: Determines the position of the image relative to the target text.

#### `enterSpeed`
- **Type**: `number`
- **Default**: `0.2`
- **Description**: Duration in seconds for the enter animation of the image preview.

#### `exitSpeed`
- **Type**: `number`
- **Default**: `0.15`
- **Description**: Duration in seconds for the exit animation of the image preview.

#### `maxRotation`
- **Type**: `number`
- **Default**: `12`
- **Description**: Maximum rotation angle in degrees applied to the image preview during animation.

#### `maxOffset`
- **Type**: `number`
- **Default**: `15`
- **Description**: Maximum pixel offset for the image movement during animation.

#### `imageWidth`
- **Type**: `number`
- **Default**: `200`
- **Description**: Width of the image preview in pixels.

#### `imageHeight`
- **Type**: `number`
- **Default**: `200`
- **Description**: Height of the image preview in pixels.

#### `className`
- **Type**: `string`
- **Default**: `""`
- **Description**: Additional CSS classes to apply to the main container of the component.

#### `targetClassName`
- **Type**: `string`
- **Default**: `""`
- **Description**: Additional CSS classes to apply to the target text elements.

#### `targetPadding`
- **Type**: `number`
- **Default**: `4`
- **Description**: Padding in pixels around the target text to increase the hover area.

#### `imageBorderRadius`
- **Type**: `string`
- **Default**: `"0.75rem"`
- **Description**: Border radius for the image preview, specified as a CSS value (e.g., `"0.75rem"`, `"50%"`).

#### `showImageShadow`
- **Type**: `boolean`
- **Default**: `true`
- **Description**: Controls whether a shadow is displayed on the image preview.
```

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

### Two-Card Split Layout with Mockup

Source: https://pro.reactbits.dev/docs/blocks/pricing

A two-card split layout featuring a centered phone mockup that bridges light and dark panels. This offers a visually distinct presentation for two main pricing options.

```html
<!-- pricing-11 -->
```

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

### Device Component with Custom Content

Source: https://pro.reactbits.dev/docs/components/device

Displays a device mockup with custom ReactNode content instead of an image. Supports scrollable content and parallax.

```javascript
import { Device } from "@/components/landing-page/device-mockup";

<Device isScrollable={true} enableParallax={true} parallaxStrength={15}>
  <img src="/path/to/your/custom/image.png" alt="Custom Device Content" />
</Device>
```

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

### Versioned Download Section

Source: https://pro.reactbits.dev/docs/blocks/download

A download section that includes options for different operating systems. This snippet is intended for users who need to provide versioned downloads.

```html
<div class="download-section">
  <div class="os-options">
    <button class="os-button active" data-os="windows">Windows</button>
    <button class="os-button" data-os="macos">macOS</button>
    <button class="os-button" data-os="linux">Linux</button>
  </div>
  <div class="download-content" data-os="windows">
    <h3>Download for Windows</h3>
    <p>Latest stable version available.</p>
    <a href="/download/windows/latest" class="cta-button">Download Now</a>
  </div>
  <div class="download-content" data-os="macos" style="display: none;">
    <h3>Download for macOS</h3>
    <p>Optimized for Apple Silicon.</p>
    <a href="/download/macos/latest" class="cta-button">Download Now</a>
  </div>
  <div class="download-content" data-os="linux" style="display: none;">
    <h3>Download for Linux</h3>
    <p>AppImage format included.</p>
    <a href="/download/linux/latest" class="cta-button">Download Now</a>
  </div>
</div>
```