### Installation Guide

Source: https://inspira-ui.com/docs/en/components/miscellaneous/container-scroll

Instructions on how to install the Container Scroll component using either the CLI or manual copy-pasting.

```APIDOC
## Installation

### Description
Install the component by either using the CLI command or by manually copying the component files.

### CLI Installation
Use one of the following commands based on your package manager:

- **pnpm**
  ```bash
  pnpm dlx shadcn-vue@latest add "https://registry.inspira-ui.com/container-scroll.json"
  ```

- **npx**
  ```bash
  npx shadcn-vue@latest add "https://registry.inspira-ui.com/container-scroll.json"
  ```

- **yarn**
  ```bash
  yarn dlx shadcn-vue@latest add "https://registry.inspira-ui.com/container-scroll.json"
  ```

- **bun**
  ```bash
  bunx shadcn-vue@latest add "https://registry.inspira-ui.com/container-scroll.json"
  ```

### Manual Installation
(Instructions for manual installation would typically go here if provided in the source text)
```

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

### Install Infinite Grid with NPX

Source: https://inspira-ui.com/docs/en/components/visualization/infinite-grid

Install the Infinite Grid component using NPX, a package runner tool. This command fetches and executes the installation script for the component.

```shell
npx shadcn-vue@latest add "https://registry.inspira-ui.com/infinite-grid.json"
```

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

### Vue Component CLI and Manual Installation

Source: https://inspira-ui.com/docs/en/getting-started/contribution

Vue component snippets for installation instructions. Includes a CLI installation command using `InstallationCli` and manual installation via a `CodeViewer` for the component's code.

```vue
## Install using CLI

::InstallationCli{componentId="your-component-folder-name"}
::
```

```vue
## Install Manually

Copy and paste the following code

::CodeViewer{filename="YourComponent.vue" language="vue" componentName="YourComponent" type="ui" id="your-component-folder-name"}
::
```

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

### Installation

Source: https://inspira-ui.com/docs/en/components/input-and-forms/input

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

```APIDOC
## Installation

Install component by either CLI or Manually copy-pasting.

### Using CLI:

**pnpm**
```
pnpm dlx shadcn-vue@latest add "https://registry.inspira-ui.com/input.json"
```

**npx**
```
npx shadcn-vue@latest add "https://registry.inspira-ui.com/input.json"
```

**yarn**
```
yarn dlx shadcn-vue@latest add "https://registry.inspira-ui.com/input.json"
```

**bun**
```
bunx shadcn-vue@latest add "https://registry.inspira-ui.com/input.json"
```
```

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

### Install Liquid Background with bun

Source: https://inspira-ui.com/docs/en/components/backgrounds/liquid-background

Installs the Liquid Background component using the bun runtime. This command uses bunx to execute the installation command, fetching the component from the provided URL.

```bash
bunx shadcn-vue@latest add "https://registry.inspira-ui.com/liquid-background.json"

```

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

### Install Safari Mockup using bun

Source: https://inspira-ui.com/docs/en/components/device-mocks/safari-mockup

Command to install the Safari Mockup component using bun via the shadcn-vue CLI.

```bash
bunx shadcn-vue@latest add "https://registry.inspira-ui.com/safari-mockup.json"

```

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

### Install Safari Mockup using npx

Source: https://inspira-ui.com/docs/en/components/device-mocks/safari-mockup

Command to install the Safari Mockup component using npx via the shadcn-vue CLI.

```bash
npx shadcn-vue@latest add "https://registry.inspira-ui.com/safari-mockup.json"

```

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

### Install Wavy Background Component using Bun

Source: https://inspira-ui.com/docs/en/components/backgrounds/wavy-background

Instructions for installing the Wavy Background component using the Bun runtime. This command employs `bunx` to run the shadcn-vue CLI, specifying the component's installation URL.

```bash
bunx shadcn-vue@latest add "https://registry.inspira-ui.com/wavy-background.json"


```

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

### Install Tracing Beam Component with npx

Source: https://inspira-ui.com/docs/en/components/miscellaneous/tracing-beam

Instructions for installing the Tracing Beam component using npx. This command facilitates the addition of the component by fetching it from the provided registry URL.

```bash
npx shadcn-vue@latest add "https://registry.inspira-ui.com/tracing-beam.json"
```

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

### Install Safari Mockup using yarn

Source: https://inspira-ui.com/docs/en/components/device-mocks/safari-mockup

Command to install the Safari Mockup component using yarn via the shadcn-vue CLI.

```bash
yarn dlx shadcn-vue@latest add "https://registry.inspira-ui.com/safari-mockup.json"

```

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

### Install Pattern Background Component via CLI (bun)

Source: https://inspira-ui.com/docs/en/components/backgrounds/pattern-background

Provides the command to install the Pattern Background component using bunx and shadcn-vue CLI. This is the recommended installation method for projects utilizing bun as their package manager.

```bash
bunx shadcn-vue@latest add "https://registry.inspira-ui.com/pattern-background.json"

```

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

### Installation

Source: https://inspira-ui.com/docs/en/components/backgrounds/wavy-background

Instructions for installing the Wavy Background component using the CLI.

```APIDOC
## Installation

### Description
Install the Wavy Background component into your project using the provided CLI commands.

### CLI Installation

**Using pnpm:**
```bash
pnpm dlx shadcn-vue@latest add "https://registry.inspira-ui.com/wavy-background.json"
```

**Using npx:**
```bash
npx shadcn-vue@latest add "https://registry.inspira-ui.com/wavy-background.json"
```

**Using yarn:**
```bash
yarn dlx shadcn-vue@latest add "https://registry.inspira-ui.com/wavy-background.json"
```

**Using bun:**
```bash
bunx shadcn-vue@latest add "https://registry.inspira-ui.com/wavy-background.json"
```
```

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

### Install Link Preview Component with npx

Source: https://inspira-ui.com/docs/en/components/miscellaneous/link-preview

Installs the Link Preview component using npx. This command fetches and adds the component to your project. It's a convenient way to manage dependencies without global installations.

```bash
npx shadcn-vue@latest add "https://registry.inspira-ui.com/link-preview.json"

```

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

### Install Safari Mockup using pnpm

Source: https://inspira-ui.com/docs/en/components/device-mocks/safari-mockup

Command to install the Safari Mockup component using pnpm via the shadcn-vue CLI.

```bash
pnpm dlx shadcn-vue@latest add "https://registry.inspira-ui.com/safari-mockup.json"

```

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

### Install iPhone Mockup using npx

Source: https://inspira-ui.com/docs/en/components/device-mocks/iphone-mockup

Installs the iPhone Mockup component using npx, a package runner tool for Node.js. This command allows executing npm package executables without installing them globally, fetching the component from the provided URL.

```bash
npx shadcn-vue@latest add "https://registry.inspira-ui.com/iphone-mockup.json"


```

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

### Install StarsBackground Component via bun

Source: https://inspira-ui.com/docs/en/components/backgrounds/stars-background

Installs the StarsBackground component using the bun runtime and its package management capabilities. This command uses bunx to execute the installation process from the specified package URL.

```bash
bunx shadcn-vue@latest add "https://registry.inspira-ui.com/bg-stars.json"

```

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

### Install Github Globe Component using Bun

Source: https://inspira-ui.com/docs/en/components/visualization/github-globe

This command installs the Github Globe component using the Bun runtime. It executes the 'shadcn-vue' package with 'bunx' to add the component.

```bash
bunx shadcn-vue@latest add "https://registry.inspira-ui.com/github-globe.json"
```

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

### Install Shader Toy Viewer with npx

Source: https://inspira-ui.com/docs/en/components/miscellaneous/shader-toy

Installs the Shader Toy Viewer component using npx, a package runner tool that comes with npm. This command simplifies the installation process by executing the package directly.

```bash
npx shadcn-vue@latest add "https://registry.inspira-ui.com/animated-circular-progressbar.json"
```

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

### Install Tracing Beam Component with yarn

Source: https://inspira-ui.com/docs/en/components/miscellaneous/tracing-beam

Instructions for installing the Tracing Beam component using yarn. This command utilizes yarn dlx to add the component from the specified registry.

```bash
yarn dlx shadcn-vue@latest add "https://registry.inspira-ui.com/tracing-beam.json"
```

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

### Install Link Preview Component with pnpm

Source: https://inspira-ui.com/docs/en/components/miscellaneous/link-preview

Installs the Link Preview component using the pnpm package manager. This command downloads and integrates the component into your project. Ensure pnpm is installed and configured.

```bash
pnpm dlx shadcn-vue@latest add "https://registry.inspira-ui.com/link-preview.json"

```

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

### Install Infinite Grid with PNPM

Source: https://inspira-ui.com/docs/en/components/visualization/infinite-grid

Install the Infinite Grid component using the PNPM package manager. This command downloads and integrates the component into your project, ensuring all dependencies are managed.

```shell
pnpm dlx shadcn-vue@latest add "https://registry.inspira-ui.com/infinite-grid.json"
```

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

### Install Line Shadow Text Component via CLI (bun)

Source: https://inspira-ui.com/docs/en/components/text-animations/line-shadow-text

Installs the Line Shadow Text component using the bun runtime. This command uses bunx to execute the installation script for the component.

```bash
bunx shadcn-vue@latest add "https://registry.inspira-ui.com/line-shadow-text.json"

```

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

### Install Infinite Grid with Yarn

Source: https://inspira-ui.com/docs/en/components/visualization/infinite-grid

Install the Infinite Grid component using the Yarn package manager. This command adds the component and its dependencies to your project.

```shell
yarn dlx shadcn-vue@latest add "https://registry.inspira-ui.com/infinite-grid.json"
```

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

### Install Tracing Beam Component with pnpm

Source: https://inspira-ui.com/docs/en/components/miscellaneous/tracing-beam

Instructions for installing the Tracing Beam component using the pnpm package manager. This command downloads and adds the component from the specified registry URL.

```bash
pnpm dlx shadcn-vue@latest add "https://registry.inspira-ui.com/tracing-beam.json"
```

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

### Component Usage Example

Source: https://inspira-ui.com/docs/en/components/input-and-forms/input

Example of how to use the Input component within a Vue.js template.

```APIDOC
## Component Usage Example

Example of how to use the Input component within a Vue.js template.

### File: `InputDemo.vue`

```vue
<template>
  <div class="flex h-56 w-full flex-col items-center justify-center gap-2">
    <label
      for="inputDemo"
      class="ml-4 w-full max-w-sm text-sm font-medium text-gray-700 dark:text-gray-200"
      >Hover over below input</label
    >
    <IInput
      id="inputDemo"
      placeholder="Hover over me"
      container-class="w-full max-w-sm"
    />
  </div>
</template>
```
```

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

### Install Focus Component with bun

Source: https://inspira-ui.com/docs/en/components/text-animations/focus

Provides the command to install the Focus component using bun. This command fetches the component from the specified registry.

```bash
bunx shadcn-vue@latest add "https://registry.inspira-ui.com/focus.json"

```

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

### Install Focus Component with yarn

Source: https://inspira-ui.com/docs/en/components/text-animations/focus

Provides the command to install the Focus component using yarn. This command fetches the component from the specified registry.

```bash
yarn dlx shadcn-vue@latest add "https://registry.inspira-ui.com/focus.json"

```

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

### Install Focus Component with npx

Source: https://inspira-ui.com/docs/en/components/text-animations/focus

Provides the command to install the Focus component using npx. This command fetches the component from the specified registry.

```bash
npx shadcn-vue@latest add "https://registry.inspira-ui.com/focus.json"

```

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

### Install iPhone Mockup using bun

Source: https://inspira-ui.com/docs/en/components/device-mocks/iphone-mockup

Installs the iPhone Mockup component using the bun runtime's `dlx` command. This command executes the `shadcn-vue` CLI to add the component, fetching it from the provided JSON configuration URL.

```bash
bunx shadcn-vue@latest add "https://registry.inspira-ui.com/iphone-mockup.json"


```

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

### Install Supporting Libraries for Inspira UI

Source: https://inspira-ui.com/docs/en/getting-started/installation

Installs essential supporting libraries for Inspira UI, including @vueuse/core, motion-v, and tw-animate-css. These libraries provide core functionalities and animations used by Inspira UI components. They can be installed using npm, pnpm, bun, or yarn.

```npm
npm install @vueuse/core motion-v tw-animate-css

```

```pnpm
pnpm install @vueuse/core motion-v tw-animate-css

```

```bun
bun add @vueuse/core motion-v tw-animate-css

```

```yarn
yarn add @vueuse/core motion-v tw-animate-css

```

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

### Install Github Globe Component using NPX

Source: https://inspira-ui.com/docs/en/components/visualization/github-globe

This command installs the Github Globe component and its dependencies using NPX. It executes the 'shadcn-vue' package to add the component from the specified URL.

```bash
npx shadcn-vue@latest add "https://registry.inspira-ui.com/github-globe.json"
```

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

### Install Inspira UI Multi-Step Loader with pnpm

Source: https://inspira-ui.com/docs/en/components/miscellaneous/multi-step-loader

Installs the Multi-Step Loader component using the pnpm package manager. This command fetches the component definition from the Inspira UI registry.

```bash
pnpm dlx shadcn-vue@latest add "https://registry.inspira-ui.com/multi-step-loader.json"

```

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

### Install Infinite Grid with Bun

Source: https://inspira-ui.com/docs/en/components/visualization/infinite-grid

Install the Infinite Grid component using the Bun runtime and its package manager. This command ensures the component is added to your project with Bun's efficient package handling.

```shell
bunx shadcn-vue@latest add "https://registry.inspira-ui.com/infinite-grid.json"
```

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

### Install Timeline Component using PNPM

Source: https://inspira-ui.com/docs/en/components/miscellaneous/timeline

Installs the Inspira UI Timeline component using the PNPM package manager. This command downloads and integrates the component into your project, simplifying the setup process. Ensure PNPM is installed and configured in your environment.

```bash
pnpm dlx shadcn-vue@latest add "https://registry.inspira-ui.com/timeline.json"

```

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

### Vue Text Hover Effect Example

Source: https://inspira-ui.com/docs/en/getting-started/contribution

Example of a complete single-file component documentation using Vue syntax. It includes front matter, a preview, an alert, installation instructions, and API documentation for a text hover effect component.

```vue
---
title: Text Hover Effect
description: A text hover effect that animates and outlines gradient on hover, as seen on x.ai
---

::ComponentLoader{label="Preview" componentName="TextHoverEffectDemo" type="examples"}
::

::alert{type="warning"}
This component uses the `nuxt-only` syntax with the `<ClientOnly>`. If you are not using Nuxt, you can simply remove it.
::

## Install using CLI

::InstallationCli{componentId="text-hover-effect"}
::

## Install Manually

Copy and paste the following code

::CodeViewer{filename="TextHoverEffect.vue" language="vue" componentName="TextHoverEffect" type="ui" id="text-hover-effect"}
::

## API

| Prop Name     | Type     | Default  | Description                                               |
| ------------- | -------- | -------- | --------------------------------------------------------- |
| `text`        | `string` | Required | The text to be displayed with the hover effect.           |
| `duration`    | `number` | `200`    | The duration of the mask transition animation in seconds. |
| `strokeWidth` | `number` | `0.75`   | The width of the text stroke.                             |
| `opacity`     | `number` | `null`   | The opacity of the text.                                  |
```

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

### Install Focus Component with pnpm

Source: https://inspira-ui.com/docs/en/components/text-animations/focus

Provides the command to install the Focus component using pnpm. This command fetches the component from the specified registry.

```bash
pnpm dlx shadcn-vue@latest add "https://registry.inspira-ui.com/focus.json"

```

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

### Configure Inspira UI CSS Variables and Theming

Source: https://inspira-ui.com/docs/en/getting-started/installation

Updates the main CSS file to include necessary imports for Tailwind CSS and tw-animate-css, defines custom CSS variables for theming (light and dark modes), and sets up base styles for the application. This configuration is essential for Inspira UI components to render correctly with the desired look and feel.

```css
@import "tailwindcss";
@import "tw-animate-css";

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

:root {
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.141 0.005 285.823);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.141 0.005 285.823);
  --primary: oklch(0.21 0.006 285.885);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.967 0.001 286.375);
  --secondary-foreground: oklch(0.21 0.006 285.885);
  --muted: oklch(0.967 0.001 286.375);
  --muted-foreground: oklch(0.552 0.016 285.938);
  --accent: oklch(0.967 0.001 286.375);
  --accent-foreground: oklch(0.21 0.006 285.885);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.92 0.004 286.32);
  --input: oklch(0.92 0.004 286.32);
  --ring: oklch(0.705 0.015 286.067);
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.141 0.005 285.823);
}

.dark {
  --background: oklch(0.141 0.005 285.823);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.141 0.005 285.823);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.141 0.005 285.823);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.985 0 0);
  --primary-foreground: oklch(0.21 0.006 285.885);
  --secondary: oklch(0.274 0.006 286.033);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.274 0.006 286.033);
  --muted-foreground: oklch(0.705 0.015 286.067);
  --accent: oklch(0.274 0.006 286.033);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.274 0.006 286.033);
  --input: oklch(0.274 0.006 286.033);
  --ring: oklch(0.442 0.017 285.786);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);

  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
}

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

html {
  color-scheme: light dark;
}
html.dark {
  color-scheme: dark;
}
html.light {
  color-scheme: light;
}

```

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

### Install iPhone Mockup using pnpm

Source: https://inspira-ui.com/docs/en/components/device-mocks/iphone-mockup

Installs the iPhone Mockup component using the pnpm package manager via the `shadcn-vue` CLI. This command fetches the component configuration and assets from the specified registry URL.

```bash
pnpm dlx shadcn-vue@latest add "https://registry.inspira-ui.com/iphone-mockup.json"


```

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

### Install Fluid Cursor using npm/npx/yarn/bun

Source: https://inspira-ui.com/docs/en/components/cursors/fluid-cursor

Provides commands for installing the Fluid Cursor component using various package managers. This component can be added to your project via CLI commands, abstracting the installation process. Ensure you have Node.js and a compatible package manager installed.

```bash
pnpm dlx shadcn-vue@latest add "https://registry.inspira-ui.com/fluid-cursor.json"

```

```bash
npx shadcn-vue@latest add "https://registry.inspira-ui.com/fluid-cursor.json"

```

```bash
yarn dlx shadcn-vue@latest add "https://registry.inspira-ui.com/fluid-cursor.json"

```

```bash
bunx shadcn-vue@latest add "https://registry.inspira-ui.com/fluid-cursor.json"

```

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

### Install 3D Carousel using bun

Source: https://inspira-ui.com/docs/en/components/visualization/carousal-3d

Installs the 3D Carousel component using bun. This command uses bunx to execute the installation command and add the component to your project.

```bash
bunx shadcn-vue@latest add "https://registry.inspira-ui.com/carousel-3d.json"

```

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

### Install Marquee Component with pnpm

Source: https://inspira-ui.com/docs/en/components/miscellaneous/marquee

Command to install the Marquee component using pnpm's dlx command, which allows executing packages without installing them globally.

```bash
pnpm dlx shadcn-vue@latest add "https://registry.inspira-ui.com/marquee.json"
```

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

### Install Link Preview Component with bun

Source: https://inspira-ui.com/docs/en/components/miscellaneous/link-preview

Installs the Link Preview component using the bun runtime. This command automates the integration of the component into your project, leveraging bun's speed for package management.

```bash
bunx shadcn-vue@latest add "https://registry.inspira-ui.com/link-preview.json"

```

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

### Install Dock Component via NPX

Source: https://inspira-ui.com/docs/en/components/miscellaneous/dock

Provides the command to install the Dock component using NPX. This method allows for easy installation and integration of the component.

```shell
npx shadcn-vue@latest add "https://registry.inspira-ui.com/dock.json"

```

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

### Install Tetris Background Component using npx

Source: https://inspira-ui.com/docs/en/components/backgrounds/tetris

Instructions for installing the Tetris background component using npx, a package runner tool. This method allows you to execute the installation command without globally installing shadcn-vue, providing a convenient way to add the component to your project.

```bash
npx shadcn-vue@latest add "https://registry.inspira-ui.com/tetris.json"

```

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

### Install Scratch To Reveal Component via CLI (bun)

Source: https://inspira-ui.com/docs/en/components/special-effects/scratch-to-reveal

Instructions for installing the ScratchToReveal component using the bun package manager via the command line interface.

```bash
bunx shadcn-vue@latest add "https://registry.inspira-ui.com/scratch-to-reveal.json"

```

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

### Install Shader Toy Viewer with bun

Source: https://inspira-ui.com/docs/en/components/miscellaneous/shader-toy

Installs the Shader Toy Viewer component using the bun runtime via the CLI. This command is suitable for projects utilizing bun as their JavaScript runtime.

```bash
bunx shadcn-vue@latest add "https://registry.inspira-ui.com/animated-circular-progressbar.json"
```

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

### Install Number Ticker with yarn

Source: https://inspira-ui.com/docs/en/components/text-animations/number-ticker

Installs the Number Ticker component using the yarn package manager. The `yarn dlx` command allows executing packages like `shadcn-vue` to manage component installations.

```bash
yarn dlx shadcn-vue@latest add "https://registry.inspira-ui.com/number-ticker.json"

```

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

### Install iPhone Mockup using yarn

Source: https://inspira-ui.com/docs/en/components/device-mocks/iphone-mockup

Installs the iPhone Mockup component using the yarn package manager with the `dlx` command, similar to pnpm's dlx. This command executes the `shadcn-vue` CLI to add the component from the specified registry.

```bash
yarn dlx shadcn-vue@latest add "https://registry.inspira-ui.com/iphone-mockup.json"


```

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

### Install Direction Aware Hover via CLI

Source: https://inspira-ui.com/docs/en/components/cards/direction-aware-hover

Install the Direction Aware Hover component using the shadcn-vue CLI. This command fetches the component's configuration from a specified URL. Ensure you have Node.js and a compatible package manager installed.

```bash
pnpm dlx shadcn-vue@latest add "https://registry.inspira-ui.com/direction-aware-hover.json"

```

```bash
npx shadcn-vue@latest add "https://registry.inspira-ui.com/direction-aware-hover.json"

```

```bash
yarn dlx shadcn-vue@latest add "https://registry.inspira-ui.com/direction-aware-hover.json"

```

```bash
bunx shadcn-vue@latest add "https://registry.inspira-ui.com/direction-aware-hover.json"

```

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

### Test CLI Installation with Local Registry

Source: https://inspira-ui.com/docs/en/getting-started/contribution

This command demonstrates how to test the CLI installation of a component after updating the registry. It assumes the local registry is running on localhost:3000 and requires specifying the component name.

```bash
npx shadcn-vue@latest add "https://localhost:3000/r/<component-name>"

```

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

### Install StarsBackground Component via yarn

Source: https://inspira-ui.com/docs/en/components/backgrounds/stars-background

Installs the StarsBackground component using the yarn package manager. This command utilizes yarn's dlx command to execute package installation from a remote URL.

```bash
yarn dlx shadcn-vue@latest add "https://registry.inspira-ui.com/bg-stars.json"

```

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

### Install Confetti Component using yarn

Source: https://inspira-ui.com/docs/en/components/special-effects/confetti

Installs the Confetti component using the `yarn dlx` command, which is yarn's equivalent to npx. This command fetches and runs the specified package, simplifying component installation.

```bash
yarn dlx shadcn-vue@latest add "https://registry.inspira-ui.com/confetti.json"

```

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

### Install Expandable Gallery using Bun

Source: https://inspira-ui.com/docs/en/components/miscellaneous/expandable-gallery

Instructions for installing the Expandable Gallery component using Bun. This command uses `dlx` to execute the `shadcn-vue` add command with the provided JSON registry URL.

```bash
bunx shadcn-vue@latest add "https://registry.inspira-ui.com/expandable-gallery.json"
```

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

### Install Tracing Beam Component with bun

Source: https://inspira-ui.com/docs/en/components/miscellaneous/tracing-beam

Instructions for installing the Tracing Beam component using bun. This command uses bunx to execute the shadcn-vue add command with the component's registry URL.

```bash
bunx shadcn-vue@latest add "https://registry.inspira-ui.com/tracing-beam.json"
```

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

### Component Usage Example

Source: https://inspira-ui.com/docs/en/components/miscellaneous/container-scroll

Example of how to integrate and use the ContainerScroll component in a Vue.js template.

```APIDOC
## Component Usage Example

### Description
This example demonstrates how to use the `ContainerScroll` component within a Vue.js template, including slots for title and card content.

### Code Example
```vue
<template>
  <div class="flex flex-col overflow-hidden">
    <ContainerScroll>
      <template #title>
        <h1 class="text-4xl font-semibold text-black dark:text-white">
          Unleash the power of <br />
          <span class="mt-1 text-4xl leading-none font-bold md:text-[6rem]">
            Scroll Animations
          </span>
        </h1>
      </template>
      <template #card>
        <img
          src="https://cdn.inspira-ui.com/images/linear.webp"
          class="mx-auto h-full rounded-2xl object-cover object-left-top"
          alt="hero"
          height="720"
          width="1400"
        />
      </template>
    </ContainerScroll>
  </div>
</template>

<script setup>
import ContainerScroll from './components/ContainerScroll.vue'; // Adjust path as needed
</script>
```
```

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

### Install Inspira UI Input Component with Bun

Source: https://inspira-ui.com/docs/en/components/input-and-forms/input

Instructions for installing the Inspira UI Input component using the Bun runtime. This command downloads the component's JSON definition and integrates it into your project.

```bash
bunx shadcn-vue@latest add "https://registry.inspira-ui.com/input.json"

```

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

### Install StarsBackground Component via npx

Source: https://inspira-ui.com/docs/en/components/backgrounds/stars-background

Installs the StarsBackground component using npx, a package runner tool. This command allows for the execution of npm package binaries directly from the command line without prior installation.

```bash
npx shadcn-vue@latest add "https://registry.inspira-ui.com/bg-stars.json"

```

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

### Install Compare Component (bun)

Source: https://inspira-ui.com/docs/en/components/miscellaneous/compare

Command to install the Compare component using bun. This command uses `bune` to execute the `shadcn-vue` CLI command, pointing to the component registry.

```bash
bunx shadcn-vue@latest add "https://registry.inspira-ui.com/compare.json"

```

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

### Install Timeline Component using Bun

Source: https://inspira-ui.com/docs/en/components/miscellaneous/timeline

Installs the Inspira UI Timeline component using Bun, a fast JavaScript runtime and package manager. This command integrates the component into your project efficiently. Ensure Bun is installed on your system.

```bash
bunx shadcn-vue@latest add "https://registry.inspira-ui.com/timeline.json"

```

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

### Install Card Spotlight Component via CLI (Bun)

Source: https://inspira-ui.com/docs/en/components/cards/card-spotlight

Instructions for installing the Card Spotlight component using Bun package manager. This command fetches the component's JSON definition from the Inspira UI registry.

```bash
bunx shadcn-vue@latest add "https://registry.inspira-ui.com/card-spotlight.json"

```

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

### Install Inspira UI Multi-Step Loader with npx

Source: https://inspira-ui.com/docs/en/components/miscellaneous/multi-step-loader

Installs the Multi-Step Loader component using npx. This command downloads and executes the shadcn-vue CLI to add the component from the specified registry URL.

```bash
npx shadcn-vue@latest add "https://registry.inspira-ui.com/multi-step-loader.json"

```

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

### Component Usage Example

Source: https://inspira-ui.com/docs/en/components/backgrounds/wavy-background

An example demonstrating how to use the Wavy Background component in a Vue.js application.

```APIDOC
## Component Usage Example

### Description
This example shows how to implement the Wavy Background component within a Vue.js template, including adding custom text content.

### Vue Component (`WavyBackgroundDemo.vue`)

```html
<template>
  <WavyBackground class="mx-auto max-w-4xl pb-40">
    <p class="inter-var text-center text-2xl font-bold text-white md:text-4xl lg:text-7xl">
      Hero waves are cool
    </p>
    <p class="inter-var mt-4 text-center text-base font-normal text-white md:text-lg">
      Leverage the power of canvas to create a beautiful hero section
    </p>
  </WavyBackground>
</template>

<script setup>
import WavyBackground from './components/WavyBackground.vue'; // Adjust path as needed
</script>

<style scoped>
/* Add any component-specific styles here */
.inter-var {
  font-family: 'Inter', sans-serif;
}
</style>
```
```

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

### Install Text Highlight Component using bun

Source: https://inspira-ui.com/docs/en/components/text-animations/text-highlight

Instructions for installing the Text Highlight component using the bun runtime. This command uses bunx to execute the shadcn-vue CLI and add the component.

```bash
bunx shadcn-vue@latest add "https://registry.inspira-ui.com/text-highlight.json"

```

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

### Install HyperText Component with bun

Source: https://inspira-ui.com/docs/en/components/text-animations/hyper-text

Installs the HyperText component using the bun package manager via the command line interface. This command fetches the component's JSON registry and adds it to your project.

```bash
bunx shadcn-vue@latest add "https://registry.inspira-ui.com/hyper-text.json"

```

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

### Install Confetti Component using bun

Source: https://inspira-ui.com/docs/en/components/special-effects/confetti

Installs the Confetti component using the `bunx` command. Bun's package execution tool allows for quick installation and execution of packages, making it efficient to add the Confetti component to your project.

```bash
bunx shadcn-vue@latest add "https://registry.inspira-ui.com/confetti.json"

```

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

### Install Spline Component using bun

Source: https://inspira-ui.com/docs/en/components/visualization/spline

Installs the Spline component into your project using the bun runtime.

```shell
bunx shadcn-vue@latest add "https://registry.inspira-ui.com/spline.json"

```

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

### Install Animated List using npm/npx/yarn/bun

Source: https://inspira-ui.com/docs/en/components/miscellaneous/animated-list

Provides commands to install the Animated List component using various package managers. These commands utilize 'shadcn-vue' to add the component from a remote registry. Ensure you have the respective package manager installed.

```bash
pnpm dlx shadcn-vue@latest add "https://registry.inspira-ui.com/animated-list.json"

```

```bash
npx shadcn-vue@latest add "https://registry.inspira-ui.com/animated-list.json"

```

```bash
yarn dlx shadcn-vue@latest add "https://registry.inspira-ui.com/animated-list.json"

```

```bash
bunx shadcn-vue@latest add "https://registry.inspira-ui.com/animated-list.json"

```

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

### Install Scratch To Reveal Component via CLI (npx)

Source: https://inspira-ui.com/docs/en/components/special-effects/scratch-to-reveal

Instructions for installing the ScratchToReveal component using npx (often associated with npm) via the command line interface.

```bash
npx shadcn-vue@latest add "https://registry.inspira-ui.com/scratch-to-reveal.json"

```

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

### Install Timeline Component using NPX

Source: https://inspira-ui.com/docs/en/components/miscellaneous/timeline

Installs the Inspira UI Timeline component using NPX, a package runner tool. This command fetches and adds the component to your project, providing a convenient way to integrate its functionality. Ensure Node.js and npm are installed.

```bash
npx shadcn-vue@latest add "https://registry.inspira-ui.com/timeline.json"

```

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

### Install Apple Card Carousel via CLI (bun)

Source: https://inspira-ui.com/docs/en/components/cards/apple-card-carousel

This command installs the Apple Card Carousel component using the bun runtime. It uses `bunx` to execute the `shadcn-vue` CLI command, specifying the component's JSON definition URL.

```bash
bunx shadcn-vue@latest add "https://registry.inspira-ui.com/apple-card-carousel.json"
```

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

### Install Video Text Component via Bun

Source: https://inspira-ui.com/docs/en/components/backgrounds/video-text

Instructions to install the Video Text component using Bun. This command fetches the component's configuration from the specified JSON URL.

```bash
bunx shadcn-vue@latest add "https://registry.inspira-ui.com/video-text.json"

```

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

### Install Spline Component using yarn

Source: https://inspira-ui.com/docs/en/components/visualization/spline

Installs the Spline component into your project using the yarn package manager.

```shell
yarn dlx shadcn-vue@latest add "https://registry.inspira-ui.com/spline.json"

```

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

### Install Timeline Component using Yarn

Source: https://inspira-ui.com/docs/en/components/miscellaneous/timeline

Installs the Inspira UI Timeline component using Yarn. This command executes the necessary steps to add the component to your project, leveraging Yarn's package management capabilities. Make sure Yarn is installed and set up.

```bash
yarn dlx shadcn-vue@latest add "https://registry.inspira-ui.com/timeline.json"

```

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

### Install Box Reveal Component using CLI

Source: https://inspira-ui.com/docs/en/components/text-animations/box-reveal

Provides installation instructions for the Box Reveal component using various package managers (pnpm, npx, yarn, bun). This command-line interface approach simplifies the integration of the component into your project.

```bash
pnpm dlx shadcn-vue@latest add "https://registry.inspira-ui.com/box-reveal.json"
```

```bash
npx shadcn-vue@latest add "https://registry.inspira-ui.com/box-reveal.json"
```

```bash
yarn dlx shadcn-vue@latest add "https://registry.inspira-ui.com/box-reveal.json"
```

```bash
bunx shadcn-vue@latest add "https://registry.inspira-ui.com/box-reveal.json"
```

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

### Install Spline Component using npx

Source: https://inspira-ui.com/docs/en/components/visualization/spline

Installs the Spline component into your project using npx, commonly used with npm.

```shell
npx shadcn-vue@latest add "https://registry.inspira-ui.com/spline.json"

```

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

### Install Ripple Component using npx

Source: https://inspira-ui.com/docs/en/components/backgrounds/ripple

Instructions for installing the Ripple component using npx via the shadcn-vue CLI.

```bash
npx shadcn-vue@latest add "https://registry.inspira-ui.com/ripple.json"

```

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

### Install Expandable Gallery using NPX

Source: https://inspira-ui.com/docs/en/components/miscellaneous/expandable-gallery

Instructions for installing the Expandable Gallery component using NPX. This command executes the `shadcn-vue` add command with the specified JSON registry URL.

```bash
npx shadcn-vue@latest add "https://registry.inspira-ui.com/expandable-gallery.json"
```