### Installation

Source: https://aliimam.in/docs/components/attraction

Instructions for installing the Attraction component using either the CLI or manual methods.

```APIDOC
## Installation

### CLI
```bash
npx shadcn@latest add https://aliimam.in/r/attraction.json
```

### Manual
1. Copy and paste the component code into your project.
2. Update the import paths to match your project setup.

```tsx
// components/ui/attraction.tsx (example file path)
// ... component code ...

```

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

### Install Icons Package

Source: https://aliimam.in/docs/icons/installation

Use npm to install the @aliimam/icons package for your project.

```sh
npm install @aliimam/icons
```

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

### Install Attraction Component via CLI

Source: https://aliimam.in/docs/components/attraction

Use the shadcn-ui CLI to add the Attraction component to your project.

```bash
npx shadcn@latest add https://aliimam.in/r/attraction.json
```

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

### Install Logos Package

Source: https://aliimam.in/docs/icons/installation

Use npm to install the @aliimam/logos package for your project.

```sh
npm install @aliimam/logos
```

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

### Install Carousel via CLI

Source: https://aliimam.in/docs/components/carousel

Use the shadcn-ui CLI to add the carousel component to your project.

```bash
npx shadcn@latest add https://aliimam.in/r/carousel.json
```

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

### Install Shine Border via CLI

Source: https://aliimam.in/docs/components/shine-border

Use the shadcn-ui CLI to add the Shine Border component to your project.

```bash
npx shadcn@latest add https://aliimam.in/r/shine-border.json
```

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

### Install Book Component via CLI

Source: https://aliimam.in/docs/components/book

Use this command to add the Book component to your project using the shadcn-ui CLI.

```bash
npx shadcn@latest add https://aliimam.in/r/book.json
```

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

### Usage

Source: https://aliimam.in/docs/components/attraction

Basic usage example of the Attraction component with child elements.

```APIDOC
## Usage

```tsx showLineNumbers
import { Attraction } from "@/components/ui/attraction"
```

```tsx showLineNumbers
<Attraction>
  <div className="h-16 w-16 bg-red-500" />
  <div className="h-16 w-16 bg-blue-500" />
  <div className="h-16 w-16 bg-green-500" />
</Attraction>
```
```

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

### Install Grid Pattern via CLI

Source: https://aliimam.in/docs/components/grid-pattern

Use the shadcn-ui CLI to add the Grid Pattern component to your project.

```bash
npx shadcn@latest add https://aliimam.in/r/grid-pattern.json
```

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

### Install Device Component via CLI

Source: https://aliimam.in/docs/components/device

Use this command to add the Device component to your project using the shadcn-ui CLI.

```bash
npx shadcn@latest add https://aliimam.in/r/device.json
```

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

### Manual Installation of Dot Pattern

Source: https://aliimam.in/docs/components/dot-pattern

Copy and paste the component code into your project and update import paths as needed.

```tsx
import React from "react"

import { cn } from "@/lib/utils"

const DotPattern = React.forwardRef<
  SVGSVGElement,
  React.SVGProps<SVGSVGElement> & {
    width?: number
    height?: number
    x?: number
    y?: number
    cx?: number
    cy?: number
    dotSize?: number
    fill?: string
    stroke?: string
    opacity?: number | string
  }
>((
  {
    width = 20,
    height = 20,
    x = 0,
    y = 0,
    cx = 1,
    cy = 1,
    dotSize = 0.7,
    fill = "#000",
    stroke = "#000",
    opacity = 1,
    className,
    ...props
  },
  ref
) => (
  <svg
    ref={ref}
    xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    viewBox={`0 0 ${width} ${height}`}
    className={cn("dot-pattern", className)}
    {...props}
  >
    <defs>
      <pattern
        id={`dot-pattern-${Math.random().toString(36).substring(2, 9)}`}
        width={width}
        height={height}
        x={x}
        y={y}
        patternUnits="userSpaceOnUse"
      >
        <circle
          cx={cx}
          cy={cy}
          r={dotSize}
          fill={fill}
          stroke={stroke}
          opacity={opacity}
        />
      </pattern>
    </defs>
    <rect width="100%" height="100%" fill="url(#dot-pattern-)" />
  </svg>
)
)

DotPattern.displayName = "DotPattern"

export { DotPattern }
```

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

### Install Border Glow via CLI

Source: https://aliimam.in/docs/components/border-glow

Use the shadcn-ui CLI to add the Border Glow component to your project.

```bash
npx shadcn@latest add https://aliimam.in/r/border-glow.json
```

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

### Install Marquee Component via CLI

Source: https://aliimam.in/docs/components/marquee

Use the shadcn-ui CLI to add the Marquee component to your project.

```bash
npx shadcn@latest add https://aliimam.in/r/marquee.json
```

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

### Create a Border Glow Grid

Source: https://aliimam.in/docs/components/border-glow

Example of how to structure a border glow grid with multiple items.

```tsx
<border-glowGrid>
  <border-glowGridItem>Item 1</border-glowGridItem>
  <border-glowGridItem>Item 2</border-glowGridItem>
  <border-glowGridItem>Item 3</border-glowGridItem>
</border-glowGrid>

```

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

### Install Counter Number with CLI

Source: https://aliimam.in/docs/components/counter-number

Use the provided CLI command to add the Counter Number component to your project.

```bash
npx shadcn@latest add https://aliimam.in/r/counter-number.json
```

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

### Install Liquid Wave via CLI

Source: https://aliimam.in/docs/shaders/liquid-wave

Use this command to add the Liquid Wave component to your project using the shadcn-ui CLI.

```bash
npx shadcn@latest add https://aliimam.in/r/liquid-wave.json
```

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

### Install Gradient Bars via CLI

Source: https://aliimam.in/docs/components/gradient-bars

Use the shadcn-ui CLI to add the Gradient Bars component to your project.

```bash
npx shadcn@latest add https://aliimam.in/r/gradient-bars.json
```

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

### Install Bento Grid via CLI

Source: https://aliimam.in/docs/components/bento

Use this command to add the Bento Grid component to your project using the shadcn-ui CLI.

```bash
npx shadcn@latest add https://aliimam.in/r/bento.json
```

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

### Multiple Icons Example

Source: https://aliimam.in/docs/icons/installation

Demonstrates importing and rendering multiple icons with different props for size and color. Customization props like 'className' can also be applied.

```tsx
import { Award, Cog, MoonStar } from "@aliimam/icons"

<div className="flex flex-wrap gap-3">
  <div className="bg-code mt-6 flex h-60 w-60 items-center justify-center rounded-2xl p-3">
    <MoonStar size={64} />
  </div>
  <div className="bg-code mt-6 flex h-60 w-60 items-center justify-center rounded-2xl p-3">
    <Award className="text-blue-500" strokeWidth={0.5} size={96} />
  </div>
  <div className="bg-code mt-6 flex h-60 w-60 items-center justify-center rounded-2xl p-3">
    <Cog strokeWidth={2} size={64} />
  </div>
</div>
```

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

### Install Render Canvas via CLI

Source: https://aliimam.in/docs/components/render-canvas

Use this command to add the Render Canvas component to your project using the shadcn-ui CLI.

```bash
npx shadcn@latest add https://aliimam.in/r/render-canvas.json
```

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

### Install Gauge Component via CLI

Source: https://aliimam.in/docs/components/gauge

Use this command to add the Gauge component to your project using the shadcn-ui CLI.

```bash
npx shadcn@latest add https://aliimam.in/r/gauge.json
```

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

### Install Dithered Swirl via CLI

Source: https://aliimam.in/docs/shaders/dithered-swirl

Use this command to add the Dithered Swirl component to your project using the shadcn-ui CLI.

```bash
npx shadcn@latest add https://aliimam.in/r/dithered-swirl.json
```

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

### Install PixelGrid Shader via CLI

Source: https://aliimam.in/docs/shaders/pixelgrid-shader

Use this command to add the PixelGrid Shader component to your project using the shadcn-ui CLI.

```bash
npx shadcn@latest add https://aliimam.in/r/pixelgrid-shader.json
```

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

### Install Dot Pattern via CLI

Source: https://aliimam.in/docs/components/dot-pattern

Use this command to add the Dot Pattern component to your project using the shadcn-ui CLI.

```bash
npx shadcn@latest add https://aliimam.in/r/dot-pattern.json
```

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

### Marquee Component Installation (Manual)

Source: https://aliimam.in/docs/components/marquee

Manually add the Marquee component files to your project and update import paths as needed.

```tsx
import { Marquee } from "@/components/marquee"

```

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

### Install Typewriter Component via CLI

Source: https://aliimam.in/docs/components/typewriter

Use this command to add the Typewriter component to your project using the shadcn-ui CLI.

```bash
npx shadcn@latest add https://aliimam.in/r/typewriter.json
```

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

### Install Ripple Shader via CLI

Source: https://aliimam.in/docs/shaders/ripple-shader

Use this command to add the Ripple Shader component to your project using the shadcn-ui CLI.

```bash
npx shadcn@latest add https://aliimam.in/r/ripple-shader.json
```

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

### Install Scroll Progress via CLI

Source: https://aliimam.in/docs/components/scroll-progress

Use this command to add the scroll progress component to your project using the shadcn CLI.

```bash
npx shadcn@latest add https://aliimam.in/r/scroll-progress.json
```

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

### Multiple Logos Example

Source: https://aliimam.in/docs/icons/installation

Shows how to import and render multiple logos with various customization props. The 'className' prop can be used for styling, and 'strokeWidth' can adjust line thickness.

```tsx
import { Apple, Figma, Nike, Vercel } from "@aliimam/logos"

<div className="flex flex-wrap gap-3">
  <div className="bg-code mt-6 flex h-60 w-60 items-center justify-center rounded-2xl p-3">
    <Apple size={64} />
  </div>
  <div className="bg-code mt-6 flex h-60 w-60 items-center justify-center rounded-2xl p-3">
    <Nike className="text-red-500" size={96} />
  </div>
  <div className="bg-code mt-6 flex h-60 w-60 items-center justify-center rounded-2xl p-3">
    <Vercel strokeWidth={2} size={64} />
  </div>
</div>
```

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

### Install AI Registry Block via CLI

Source: https://aliimam.in/docs/registry

Use the shadcn CLI to add a specific block from the AI registry to your project. Replace {name} with the desired block's identifier.

```bash
pnpm dlx shadcn add @aliimam/hero-1
```

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

### Counter Number Usage Examples

Source: https://aliimam.in/docs/components/counter-number

Demonstrates various ways to use the CounterNumber component, including default, with prefixes/suffixes, decimals, currency formatting, locale-specific separators, and preserving aspect ratio for layout stability.

```tsx
<div className="flex flex-wrap items-end gap-8">
  {/* Default */}
  <CounterNumber value={12345} />

  {/* With prefix/suffix */}
  <CounterNumber value={86} suffix="%" size="xl" color="success" />

  {/* Decimals */}
  <CounterNumber value={3.14159} decimalPlaces={3} size="lg" />

  {/* Currency */}
  <CounterNumber
    value={1299.99}
    currency="USD"
    decimalPlaces={2}
    size="xl"
    color="primary"
  />

  {/* Locale + separator */}
  <CounterNumber value={1000000} locale="de-DE" separator="." size="lg" />

  {/* Mono spacing for layout stability */}
  <CounterNumber value={2025} preserveAspectRatio className="font-medium" />
</div>

```

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

### Add AI Registry to components.json

Source: https://aliimam.in/docs/registry

Configure your project's components.json to include the AI registry namespace. This allows the shadcn CLI to find and install components from the registry.

```json
{
  "registries": {
    "@aliimam": "https://aliimam.in/r/{name}.json"
  }
}
```

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

### Ripple Shader Component

Source: https://aliimam.in/docs/shaders/ripple-shader

The Ripple Shader component can be installed via CLI or manually. It offers various customizable props to control its appearance and behavior.

```APIDOC
## Ripple Shader Component

### Description
This component provides an animated interactive ripple grid effect.

### Installation

#### CLI
```bash
npx shadcn@latest add https://aliimam.in/r/ripple-shader.json
```

#### Manual
1. Copy and paste the component source code into your project.
2. Update import paths as needed.

### Usage

```tsx
import { RippleShader } from "@/components/ui/ripple-shader";

<RippleShader />
```

### Props

| Prop            | Type     | Default                            |
| --------------- | -------- | ---------------------------------- |
| `rippleSize`     | `number` | `2`                                |
| `speed`         | `number` | `0.5`                              |
| `waveFrequency` | `number` | `5`                                |
| `threshold`     | `number` | `0.8`                              |
| `grainAmount`   | `number` | `0.04`                             |
| `gridOpacity`   | `number` | `0.2`                              |
| `cursorRadius`  | `number` | `0.5`                              |
| `cursorPush`    | `number` | `0.5`                              |
| `color`         | `string` | `"#00ff00"`                        |
| `className`     | `string` | `"w-full absolute h-full inset-0"` |
```

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

### Initialize MCP Server

Source: https://aliimam.in/docs/registry

Run this command to set up and configure the MCP server for your project. This is a necessary step for certain functionalities related to the AI registry.

```bash
pnpm dlx shadcn mcp init
```

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

### Vertical Marquee with Pause on Hover

Source: https://aliimam.in/docs/components/marquee

Implement a vertical marquee that pauses when the user hovers over it. Set a delay for the animation start.

```tsx
// Vertical with delay
<Marquee vertical delay={2} pauseOnHover>
  <Card>Content</Card>
</Marquee>

```

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

### Import Border Glow Components

Source: https://aliimam.in/docs/components/border-glow

Import the necessary components for creating a border glow grid.

```tsx
import { border-glowGrid, border-glowGridItem } from "@/components/ui/border-glow"

```

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

### Import PixelGridShader Component

Source: https://aliimam.in/docs/shaders/pixelgrid-shader

Import the PixelGridShader component into your project files to use it.

```tsx
import { PixelGridShader } from "@/components/ui/pixelgrid-shader"
```

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

### Use Device Component with Different Variants

Source: https://aliimam.in/docs/components/device

Demonstrates how to use the Device component with various predefined variants: macbook, imac, iphone, and ipad. Provide the 'src' prop with the path to your image or preview.

```tsx
{ /* Macbook */ }
<Device variant="macbook" src="/screenshot.png" />
{ /* iMac */ }
<Device variant="imac" src="/screenshot.png" />
{ /* iPhone */ }
<Device variant="iphone" src="/screenshot.png" />
{ /* iPad */ }
<Device variant="ipad" src="/screenshot.png" />

```

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

### Import Ripple Shader

Source: https://aliimam.in/docs/shaders/ripple-shader

Import the RippleShader component into your project to use it.

```tsx
import { RippleShader } from "@/components/ui/ripple-shader"
```

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

### Import and Use an Icon

Source: https://aliimam.in/docs/icons/installation

Import individual icons as React components and render them. Icons are tree-shakable, ensuring only used icons are included in the bundle. Pass props like 'size', 'color', and 'strokeWidth' for customization.

```tsx
import { MoonStar } from "@aliimam/icons"

// Usage
const App = () => {
  return <MoonStar size={48} />
}

export default App
```

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

### Import Bento Grid Components

Source: https://aliimam.in/docs/components/bento

Import the BentoGrid and BentoGridItem components from their respective paths to use them in your application.

```tsx
import { BentoGrid, BentoGridItem } from "@/components/ui/bento"

```

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

### Import Gradient Bars Component

Source: https://aliimam.in/docs/components/gradient-bars

Import the GradientBars component into your project files to use it.

```tsx
import { GradientBars } from "@/components/ui/gradient-bars"

```

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

### Props

Source: https://aliimam.in/docs/components/attraction

Detailed list of available props for the Attraction component and their descriptions.

```APIDOC
## Props

| Prop          | Type                     | Default            | Description                    |
| ------------- | ------------------------ | ------------------ | ------------------------------ |
| `gravity`     | `{x: number, y: number}` | `{x:0,y:1}`        | Physics world gravity          |
| `className`   | `string`                 | `""`               | Custom class for container     |
| `paused`      | `boolean`                | `false`            | Pause physics without clearing |
| `walls`       | `boolean`                | `true`             | Toggle world walls             |
| `friction`    | `number`                 | `0.2`              | Default friction for bodies    |
| `restitution` | `number`                 | `0.5`              | Default bounciness             |
| `stiffness`   | `number`                 | `0.2`              | Mouse drag stiffness           |
| `background`  | `string`                 | `"transparent"`    | Canvas background              |
| `width`       | `number`                 | `container width`  | Force canvas width             |
| `height`      | `number`                 | `container height` | Force canvas height            |
```

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

### Import Grid Pattern Component

Source: https://aliimam.in/docs/components/grid-pattern

Import the GridPattern component from its path in the components/ui directory.

```tsx
import { GridPattern } from "@/components/ui/grid-pattern"
```

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

### Import Attraction Component

Source: https://aliimam.in/docs/components/attraction

Import the Attraction component into your React application.

```typescript
import { Attraction } from "@/components/ui/attraction"

```

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

### Import Counter Number Component

Source: https://aliimam.in/docs/components/counter-number

Import the CounterNumber component into your project files to begin using it.

```typescript
import { CounterNumber } from "@/components/ui/counter-number"

```

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

### Import Gauge Component

Source: https://aliimam.in/docs/components/gauge

Import the Gauge component into your project files. Ensure the import path matches your project structure.

```typescript
import { Gauge } from "@/components/gauge"
```

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

### Import and Use a Logo

Source: https://aliimam.in/docs/icons/installation

Import individual logos as React components and render them. Similar to icons, logos are tree-shakable. Customize with props like 'size', 'color', and 'strokeWidth'.

```tsx
import { Apple } from "@aliimam/logos"

// Usage
const App = () => {
  return <Apple size={48} />
}

export default App
```

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

### Bento Grid Component Source

Source: https://aliimam.in/docs/components/bento

Copy and paste this code into your project's components/ui/bento.tsx file. Remember to update import paths as needed.

```tsx
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const bentoGridVariants = cva(
  "grid w-full",
  {
    variants: {
      cols: {
        "1": "grid-cols-1",
        "2": "grid-cols-2",
        "3": "grid-cols-3",
        "4": "grid-cols-4",
        "5": "grid-cols-5",
        "6": "grid-cols-6",
        "7": "grid-cols-7",
        "8": "grid-cols-8"
      },
      gap: {
        "0": "gap-0",
        "1": "gap-1",
        "2": "gap-2",
        "3": "gap-3",
        "4": "gap-4",
        "5": "gap-5",
        "6": "gap-6",
        "7": "gap-7",
        "8": "gap-8",
        "9": "gap-9",
        "10": "gap-10"
      },
      rowHeight: {
        "10": "grid-rows-[10rem]",
        "12": "grid-rows-[12rem]",
        "14": "grid-rows-[14rem]",
        "16": "grid-rows-[16rem]",
        "18": "grid-rows-[18rem]",
        "20": "grid-rows-[20rem]",
        "22": "grid-rows-[22rem]",
        "24": "grid-rows-[24rem]"
      }
    },
    defaultVariants: {
      cols: "3",
      gap: "4",
      rowHeight: "16"
    }
  }
)

const BentoGrid = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<"div"> & VariantProps<typeof bentoGridVariants>>(
  ({ className, cols, gap, rowHeight, ...props }, ref) => (
    <div
      ref={ref}
      className={cn(bentoGridVariants({ cols, gap, rowHeight, className }))}
      {...props}
    />
  )
)
BentoGrid.displayName = "BentoGrid"

const BentoGridItem = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<"div"> & { asChild?: boolean }>(({ className, asChild, ...props }, ref) => {
  const Comp = asChild ? Slot : "div"
  return (
    <Comp
      ref={ref}
      className={cn(
        "relative overflow-hidden rounded-xl border bg-card p-4",
        className
      )}
      {...props}
    />
  )
})
BentoGridItem.displayName = "BentoGridItem"

export { BentoGrid, BentoGridItem, bentoGridVariants }
```

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

### Basic Scroll Progress Usage

Source: https://aliimam.in/docs/components/scroll-progress

Renders a default scroll progress bar.

```typescript
Basic
<ScrollProgress />

---

Bottom Positioned Progress Bar
<ScrollProgress position="bottom" />

---

Custom Size & Rounded Corners
<ScrollProgress size="lg" rounded="full" />

---

Gradient Variants
<ScrollProgress variant="rainbow" />
<ScrollProgress variant="ocean" />
<ScrollProgress variant="sunset" />

---

With Glow Effect
<ScrollProgress variant="neon" glow="lg" />

---

Show Scroll Percentage
<ScrollProgress showPercentage />

---

Centered Percentage Indicator
<ScrollProgress
  showPercentage
  percentagePosition="center"
/>

---

Custom Gradient
<ScrollProgress
  variant="custom"
  customGradient="bg-gradient-to-r from-fuchsia-500 via-violet-500 to-cyan-500"
/>

---

Custom Spring Animation
<ScrollProgress
  springConfig={{
    stiffness: 120,
    damping: 20,
  }}
/>

---

Scroll Tracking Inside a Container
const ref = useRef<HTMLDivElement>(null)

return (
  <div ref={ref} className="h-[400px] overflow-y-auto">
    <ScrollProgress container={ref} />
    {/* scrollable content */}
  </div>
)

```

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

### Import Device Component

Source: https://aliimam.in/docs/components/device

Import the Device component into your React application. Ensure the import path matches your project structure.

```tsx
import { Device } from "@/components/ui/device"

```

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

### Import Liquid Wave Component

Source: https://aliimam.in/docs/shaders/liquid-wave

Import the LiquidWave component into your React component. Ensure the path matches your project structure.

```tsx
import { LiquidWave } from "@/components/ui/liquid-wave"

```

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

### Basic Bento Grid Usage

Source: https://aliimam.in/docs/components/bento

Render a basic Bento Grid with three items. Customize the grid layout using props like 'cols', 'gap', and 'rowHeight'.

```tsx
<BentoGrid>
  <BentoGridItem>Item 1</BentoGridItem>
  <BentoGridItem>Item 2</BentoGridItem>
  <BentoGridItem>Item 3</BentoGridItem>
</BentoGrid>

```

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

### Basic Book Component Usage

Source: https://aliimam.in/docs/components/book

Render the Book component with basic props and content. Supports custom titles, authors, and internal text.

```tsx
<Book
  title="The Great Adventure"
  author="John Doe"
  spineText="Adventure"
  bookmark
  variant="hardcover"
  animation="hover"
>
  <p>This is some content inside the book.</p>
</Book>

```

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

### Basic Usage of Attraction Component

Source: https://aliimam.in/docs/components/attraction

Render child elements within the Attraction component to apply physics. The component automatically handles physics for its children.

```typescript
<Attraction>
  <div className="h-16 w-16 bg-red-500" />
  <div className="h-16 w-16 bg-blue-500" />
  <div className="h-16 w-16 bg-green-500" />
</Attraction>

```

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

### ScrollProgress Props

Source: https://aliimam.in/docs/components/scroll-progress

Configuration options for the ScrollProgress component.

```APIDOC
## ScrollProgress Props

### Description

This section details the available properties (props) for customizing the ScrollProgress component.

### Props

- **`variant`** (string) - Optional - Specifies the visual style of the progress bar. Available options: `"default"`, `"rainbow"`, `"ocean"`, `"sunset"`, `"forest"`, `"monochrome"`, `"neon"`, `"fire"`, `"ice"`, `"gold"`, `"solid"`, `"custom"`. Defaults to `"default"`.
- **`size`** (string) - Optional - Determines the size of the progress bar. Available options: `"xs"`, `"sm"`, `"default"`, `"lg"`, `"xl"`, `"2xl"`. Defaults to `"default"`.
- **`position`** (string) - Optional - Sets the position of the progress bar. Available options: `"top"`, `"bottom"`. Defaults to `"top"`.
- **`rounded`** (string) - Optional - Controls the border radius of the progress bar. Available options: `"none"`, `"sm"`, `"default"`, `"lg"`, `"xl"`, `"full"`. Defaults to `"none"`.
- **`glow`** (string) - Optional - Applies a glow effect to the progress bar. Available options: `"none"`, `"sm"`, `"default"`, `"lg"`, `"xl"`. Defaults to `"none"`.
- **`className`** (string) - Optional - Allows for custom CSS classes to be applied to the component. Defaults to `undefined`.
- **`customGradient`** (string) - Optional - Provides a custom CSS gradient string for the progress bar. Defaults to `undefined`.
- **`springConfig`** (object) - Optional - Configuration object for the spring animation. Includes `stiffness` (number), `damping` (number), and `restDelta` (number). Defaults to `{ stiffness: 200, damping: 50, restDelta: 0.001 }`.
- **`showPercentage`** (boolean) - Optional - Toggles the display of the current scroll percentage. Defaults to `false`.
- **`percentagePosition`** (string) - Optional - Sets the position of the percentage display. Available options: `"left"`, `"right"`, `"center"`. Defaults to `"right"`.
- **`container`** (React.RefObject<HTMLElement>) - Optional - A ref object pointing to the scrollable container element. Defaults to `undefined`.
```

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

### Import Book Component

Source: https://aliimam.in/docs/components/book

Import the Book component into your React application.

```tsx
import { Book } from "@/components/ui/book"

```

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

### Render Default Grid Pattern

Source: https://aliimam.in/docs/components/grid-pattern

Render the GridPattern component with its default settings.

```tsx
<GridPattern />
```

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

### Import Dot Pattern Component

Source: https://aliimam.in/docs/components/dot-pattern

Import the DotPattern component into your React application.

```tsx
import { DotPattern } from "@/components/ui/dot-pattern"

```

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

### Basic Marquee Usage

Source: https://aliimam.in/docs/components/marquee

Render a simple marquee with basic content. Ensure the Marquee component is imported.

```tsx
// Basic
<Marquee>
  <div>Item 1</div>
  <div>Item 2</div>
</Marquee>

```

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

### PixelGrid Shader Component Source

Source: https://aliimam.in/docs/shaders/pixelgrid-shader

Copy and paste this code into your project to manually add the PixelGrid Shader component. Remember to update import paths as needed.

```tsx
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "@/lib/utils"

const pixelGridShaderVariants = cva(
  "relative overflow-hidden",
  {
    variants: {
      shape: {
        wave: "[&_canvas]:opacity-70",
        noise: "[&_canvas]:opacity-70",
        ripple: "[&_canvas]:opacity-70",
        swirl: "[&_canvas]:opacity-70",
        plasma: "[&_canvas]:opacity-70",
        scan: "[&_canvas]:opacity-70",
      },
      matrix: {
        random: "",
        bayer2: "",
        bayer4: "",
        bayer8: "",
      },
    },
    defaultVariants: {
      shape: "wave",
      matrix: "bayer8",
    },
  }
)

export interface PixelGridShaderProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof pixelGridShaderVariants> {
  asChild?: boolean
}

const PixelGridShader = React.forwardRef<HTMLDivElement, PixelGridShaderProps>(
  (
    {
      asChild,
      className,
      shape,
      matrix,
      pxSize = 2,
      amplitude = 0.15,
      frequency = 0.7,
      speed = 0.3,
      rings = 3,
      colorFg = "#E8FF00",
      cursorMode = "burn",
      cursorSize = 0.3,
      cursorScale = 0.2,
      ...props
    },
    ref
  ) => {
    const Comp = asChild && Slot ? Slot : "div"

    React.useEffect(() => {
      const canvas = document.createElement("canvas")
      const ctx = canvas.getContext("2d")

      if (!ctx) {
        return
      }

      let width = 0
      let height = 0
      let animationFrameId: number

      const resizeCanvas = () => {
        width = canvas.width = window.innerWidth
        height = canvas.height = window.innerHeight
      }

      const getMatrix = (type: PixelGridShaderProps["matrix"] = "bayer8") => {
        switch (type) {
          case "random":
            return Array(height)
              .fill(0)
              .map(() =>
                Array(width)
                  .fill(0)
                  .map(() => Math.random())
              )
          case "bayer2":
            return Array(height)
              .fill(0)
              .map(() =>
                Array(width)
                  .fill(0)
                  .map(() => {
                    const x = Math.floor(Math.random() * 2)
                    const y = Math.floor(Math.random() * 2)
                    return (x + y * 2) / 4
                  })
              )
          case "bayer4":
            return Array(height)
              .fill(0)
              .map(() =>
                Array(width)
                  .fill(0)
                  .map(() => {
                    const x = Math.floor(Math.random() * 4)
                    const y = Math.floor(Math.random() * 4)
                    return (x + y * 4) / 16
                  })
              )
          case "bayer8":
          default:
            return Array(height)
              .fill(0)
              .map(() =>
                Array(width)
                  .fill(0)
                  .map(() => {
                    const x = Math.floor(Math.random() * 8)
                    const y = Math.floor(Math.random() * 8)
                    return (x + y * 8) / 64
                  })
              )
        }
      }

      let matrix = getMatrix(matrix)

      const draw = (time: number) => {
        ctx.clearRect(0, 0, width, height)

        const mouseX = (window.innerWidth / 2)
        const mouseY = (window.innerHeight / 2)

        for (let y = 0; y < height; y += pxSize) {
          for (let x = 0; x < width; x += pxSize) {
            let value = 0
            if (matrix[y / pxSize] && matrix[y / pxSize][x / pxSize]) {
              value = matrix[y / pxSize][x / pxSize]
            }

            let distance = Math.sqrt(Math.pow(mouseX - x, 2) + Math.pow(mouseY - y, 2))
            let scale = 1

            switch (cursorMode) {
              case "ripple":
                scale = 1 + Math.sin(distance / cursorSize - time * speed) * cursorScale
                break
              case "erase":
                scale = Math.max(0, 1 - distance / cursorSize)
                break
              case "burn":
                scale = Math.max(0, 1 - distance / (cursorSize * 5))
                break
            }

            let finalValue = value

            switch (shape) {
              case "wave":
                finalValue = value + Math.sin(x * frequency + time * speed) * amplitude
                break
              case "noise":
                finalValue = value + Math.random() * amplitude
                break
              case "ripple":
                finalValue = value + Math.sin(distance / frequency) * amplitude
                break
              case "swirl":
                const angle = Math.atan2(y - mouseY, x - mouseX)
                finalValue = value + Math.sin(distance / frequency - time * speed) * amplitude * Math.cos(angle)
                break
              case "plasma":
                finalValue = Math.sin(x * frequency + time * speed) * amplitude + Math.cos(y * frequency + time * speed) * amplitude
                break
              case "scan":
                finalValue = value + Math.sin(y * frequency + time * speed) * amplitude
                break
            }

            const intensity = Math.max(0, Math.min(1, finalValue * scale))
            const color = `hsl(0, 0%, ${intensity * 100}%)
`

            ctx.fillStyle = colorFg
            ctx.fillRect(x, y, pxSize * scale, pxSize * scale)
          }
        }

        animationFrameId = requestAnimationFrame(draw)
      }

      window.addEventListener("resize", resizeCanvas)
      resizeCanvas()
      requestAnimationFrame(draw)

      return () => {
        window.removeEventListener("resize", resizeCanvas)
        cancelAnimationFrame(animationFrameId)
      }
    }, [shape, matrix, pxSize, amplitude, frequency, speed, rings, colorFg, cursorMode, cursorSize, cursorScale])

    return (
      <Comp ref={ref} className={cn(pixelGridShaderVariants({ shape, matrix, className }))} {...props}>
        <canvas />
      </Comp>
    )
  }
)

PixelGridShader.displayName = "PixelGridShader"

export { PixelGridShader }
```

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

### Gradient Bars Component Source

Source: https://aliimam.in/docs/components/gradient-bars

Copy and paste this code into your project to manually add the Gradient Bars component. Update import paths as needed.

```tsx
import type { VariantProps, Config } from "class-variance-authority"
import { clsx } from "clsx"
import { twMerge } from "tailwind-merge"

import { cva } from "class-variance-authority"

const gradient_bar_variants = cva(
  "absolute inset-0 h-full w-full [animation-fill-mode:forwards]",
  {
    variants: {
      orientation: {
        vertical: "[transform-origin:center] [transform:translate3d(0,0,0)]",
        horizontal: "[transform-origin:center] [transform:translate3d(0,0,0)]",
      },
      animation: {
        wave: "[animation:wave_animation_var var(--duration)_ease_infinite_alternate]",
        pulse: "[animation:pulse_animation_var var(--duration)_ease_infinite_alternate]",
        none: "",
      },
    },
    defaultVariants: {
      orientation: "vertical",
      animation: "wave",
    },
  }
)

type GradientBarVariants = VariantProps<typeof gradient_bar_variants>

const gradient_bars_variants = cva(
  "relative overflow-hidden",
  {
    variants: {
      orientation: {
        vertical: "h-full w-full",
        horizontal: "h-full w-full",
      },
    },
    defaultVariants: {
      orientation: "vertical",
    },
  }
)

type GradientBarsVariants = VariantProps<typeof gradient_bar_variants>

type GradientBarsProps = GradientBarsVariants & {
  numBars?: number
  colors?: string[]
  duration?: number
  delayStep?: number
  minScale?: number
  maxScale?: number
  className?: string
}

export function GradientBars({
  orientation,
  animation,
  numBars = 15,
  colors = ["#000fff", "transparent"],
  duration = 2,
  delayStep = 0.1,
  minScale = 0.2,
  maxScale = 1,
  className,
}: GradientBarsProps) {
  const orientationClass = gradient_bars_variants({ orientation })
  const animationClass = gradient_bar_variants({ animation })

  const style = {
    "--duration": `${duration}s`,
    "--delay-step": `${delayStep}s`,
    "--min-scale": minScale,
    "--max-scale": maxScale,
  } as React.CSSProperties

  return (
    <div
      className={twMerge(orientationClass, className)}
      style={style}
    >
      {Array.from({ length: numBars }).map((_, i) => (
        <div
          key={i}
          className={twMerge(
            animationClass,
            gradient_bar_variants({ orientation })
          )}
          style={{
            background: `linear-gradient(180deg, ${colors[0]} 0%, ${colors[1]} 100%)`,
            animationDelay: `${i * delayStep}s`,
          }}
        />
      ))}
    </div>
  )
}

```

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

### Import Shine Border Component

Source: https://aliimam.in/docs/components/shine-border

Import the ShineBorder component into your React application.

```tsx
import { ShineBorder } from "@/components/ui/shine-border"
```

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

### Render Default Dot Pattern

Source: https://aliimam.in/docs/components/dot-pattern

Render the DotPattern component with its default settings.

```tsx
<DotPattern />

```

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

### Marquee with Custom Speed and Fade

Source: https://aliimam.in/docs/components/marquee

Configure the marquee with a custom speed and enable a fade effect. Adjust the gap between items using the 'gap' prop.

```tsx
// With fade and custom speed
<Marquee speed={25} fade={true} gap="20px">
  <img src="logo1.png" />
  <img src="logo2.png" />
</Marquee>

```