Inspira UI

https://inspira-ui.com/docs
Admin
Inspira UI is a collection of reusable, animated components powered by TailwindCSS, motion-v, GSAP,...
Tokens:52,084
Snippets:371
Trust Score:7
Update:2 months ago
Show doc for...
Tokens:
Raw
### Installation Instructions

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

Provide CLI and manual installation methods for components.

```markdown
## Install using CLI

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

## Install Manually

Copy and paste the following code in the same folder

::code-group

:CodeViewerTab{label="YourComponent.vue" language="vue" componentName="YourComponent" type="ui" id="your-component-folder-name"}
:CodeViewerTab{filename="YourComponent2.vue" language="vue" componentName="YourComponent2" type="ui" id="your-component-folder-name"}

::
```

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

### Include Installation Instructions

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

Provide both CLI and manual installation methods for the component.

```markdown
## Install using CLI

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

## Install Manually

Copy and paste the following code

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

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

### Full Component Documentation Example

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

A complete example of a single-file component documentation page.

```markdown
---
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.                                  |
```

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

### Test component installation via CLI

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

Use this command to verify component installation from a local registry URL after building.

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

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

### Install project dependencies

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

Run this command in the project root to install all required dependencies using pnpm.

```bash
pnpm install
```

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

### Infinite Grid Implementation

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

Demonstrates the setup of card data, configuration options, and the template structure for the Infinite Grid component.

```vue
<script setup>
const cardData = [
  {
    title: "Pipeline Monitor",
    badge: "In Progress",
    image: "https://picsum.photos/1366/768",
    description: "CI/CD pipeline with monitoring hooks",
    tags: ["CI/CD", "Kubernetes", "Docker"],
    date: "2024",
  },
  {
    title: "AssureTest",
    badge: "Complete",
    image: "https://picsum.photos/1366/768",
    description: "End-to-end test framework with smart coverage analysis",
    tags: ["Cypress", "QA", "Automation"],
    date: "2024",
  },
];

const options = computed(() => ({
  gridCols: props.gridCols,
  gridRows: props.gridRows,
  tileSize: props.tileSize,
  baseCameraZ: props.baseCameraZ,
  postProcessParams: {
    distortionIntensity: props.distortionIntensity,
    vignetteDarkness: props.vignetteDarkness,
  },
}));

function onTilesLoaded() {
  tilesLoaded.value = true;
}
</script>

<template>
  <ClientOnly>
    <div class="relative flex h-112 w-full flex-col items-center justify-center">
      <div
        ref="el"
        class="absolute inset-0 z-50 flex flex-col items-center justify-center"
        :class="{}"
      >
        <InfiniteGrid
          :card-data
          :options="options"
          @tiles-loaded="onTilesLoaded"
        />
      </div>
      <span
        v-if="!tilesLoaded"
        class="z-51 text-lg font-semibold"
      >
        Loading Tiles
      </span>

      <InteractiveHoverButton
        v-if="tilesLoaded"
        text="View Fullscreen"
        class="absolute bottom-0 z-52"
        @click="toggle"
      />
    </div>
  </ClientOnly>
</template>
```

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

### Install Inspira UI dependencies

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

Install the required supporting libraries for Inspira UI using your preferred package manager.

```bash
npm install @vueuse/core motion-v tw-animate-css @inspira-ui/plugins
```

```bash
pnpm install @vueuse/core motion-v tw-animate-css @inspira-ui/plugins
```

```bash
bun add @vueuse/core motion-v tw-animate-css @inspira-ui/plugins
```

```bash
yarn add @vueuse/core motion-v tw-animate-css @inspira-ui/plugins
```

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

### Implement Glare Card Component

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

Usage example for the GlareCard component with configurable tone properties.

```vue
<script setup lang="ts">interface Props {  label?: string;  tone?: "dark" | "slate" | "warm";} const props = withDefaults(defineProps<Props>(), {  label: "Inspira UI",  tone: "dark",}); const toneClass = computed(() => {  if (props.tone === "slate") return "bg-slate-950";  if (props.tone === "warm") return "bg-stone-950";  return "bg-neutral-950";});</script> <template>  <div class="flex items-center justify-center">    <GlareCard      class="flex flex-col items-center justify-center"      :class="toneClass"    >      <img src="https://cdn.inspira-ui.com/logo-dark.svg" />      <p class="mt-4 text-xl font-bold text-white">{{ props.label }}</p>    </GlareCard>  </div></template> 
```

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

### Implement Multi-Step Loader in Vue

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

Demonstrates the setup of a Multi-Step Loader component using Vue 3 Composition API, including configuration for both simple and async loading modes.

```vue
<script setup lang="ts">import { computed, reactive, ref } from "vue"; interface Props {  mode?: "simple" | "async";  defaultDuration?: number;  preventClose?: boolean;} const props = withDefaults(defineProps<Props>(), {  mode: "simple",  defaultDuration: 1500,  preventClose: true,}); interface Step {  text: string; // Display text for the step  afterText?: string; // Text to show after step completion  async?: boolean; // If true, waits for external trigger to proceed  duration?: number; // Duration in ms before proceeding (default: 2000)  action?: () => void; // Function to execute when step is active}// State managementconst loaderStates = reactive({  isProcessing: false,  isSavingOrder: false,  sendingMails: false,}); const uiState = reactive({  isSimpleLoading: false,  isAfterTextLoading: false,  closeSimple: () => {    uiState.isSimpleLoading = false;  },  closeAsync: () => {    uiState.isAfterTextLoading = false;  },}); const message = ref(""); // Simple loading steps configurationconst simpleLoadingSteps = computed<Step[]>(() => [  {    text: "Checking Payment",    duration: props.defaultDuration,  },  {    text: "Saving Order",    duration: props.defaultDuration,  },  {    text: "Sending Confirmation Email",    duration: props.defaultDuration,  },  {    text: "Processing Request",    duration: props.defaultDuration,  },  {    text: "Finalizing",    duration: props.defaultDuration,  },  {    text: "Redirecting",    duration: props.defaultDuration,    action: handleSimpleLoadingComplete,  },]); // Async loading steps configurationconst asyncLoadingSteps = computed<Step[]>(() => [  {    text: "Checking Payment",    async: loaderStates.isProcessing,    afterText: "Payment Verified",  },  {    text: "Saving Order",    async: loaderStates.isSavingOrder,    afterText: "Order Saved",  },  {    text: "Sending Confirmation Email",    async: loaderStates.sendingMails,    afterText: "Email Sent",  },  {    text: "Redirecting",    duration: 1000,    action: handleAsyncLoadingComplete,  },]); // Event handlersfunction handleStateChange(_state: number) {  // Handle Loading State Change} function handleComplete() {  // Handle Loading Complete} function handleSimpleLoadingComplete() {  message.value = "Simple loading complete.";  uiState.isSimpleLoading = false;} function handleAsyncLoadingComplete() {  message.value = "Async loading complete.";  uiState.isAfterTextLoading = false;} // Action handlersfunction toggleSimpleLoading() {  uiState.isSimpleLoading = !uiState.isSimpleLoading;} async function startAsyncLoading() {  // Reset states  uiState.isAfterTextLoading = true;  loaderStates.isProcessing = true;  loaderStates.isSavingOrder = true;  loaderStates.sendingMails = true;   // Simulate async operations  function simulateAsyncStep(stateProp: keyof typeof loaderStates, delay: number) {    return new Promise<void>((resolve) => {      setTimeout(() => {        loaderStates[stateProp] = false;        resolve();      }, delay);    });  }   try {    await simulateAsyncStep("isProcessing", 2000);    await simulateAsyncStep("isSavingOrder", 3000);    await simulateAsyncStep("sendingMails", 2500);  } catch {    uiState.isAfterTextLoading = false;  }}</script> <template>  <div class="flex flex-col items-start gap-4">    <section      v-if="props.mode === 'simple'"      class="flex w-full flex-col items-center justify-center"    >      <h2 class="mb-2 text-lg font-semibold">Simple Loading Demo</h2>      <MultiStepLoader        :steps="simpleLoadingSteps"        :loading="uiState.isSimpleLoading"        :default-duration="props.defaultDuration"        :prevent-close="props.preventClose"        @state-change="handleStateChange"        @complete="handleComplete"      />      <button        class="mt-4 rounded-md bg-black px-4 py-2 text-sm font-medium text-white dark:bg-white dark:text-black"        @click="toggleSimpleLoading"      >        {{ uiState.isSimpleLoading ? "Stop Loading" : "Start Simple Loading" }}      </button>      <p        v-if="message"        class="text-muted mt-3 text-sm"      >        {{ message }}      </p>    </section>    <section      v-else      class="flex w-full flex-col items-center justify-center"    >      <h2 class="mb-2 text-lg font-semibold">Async Loading Demo</h2>      <MultiStepLoader        :steps="asyncLoadingSteps"        :loading="uiState.isAfterTextLoading"        :default-duration="props.defaultDuration"        :prevent-close="props.preventClose"        @state-change="handleStateChange"        @complete="handleComplete"        @close="uiState.closeAsync"      />      <button        class="mt-4 rounded-md bg-black px-4 py-2 text-sm font-medium text-white dark:bg-white dark:text-black"        :disabled="uiState.isAfterTextLoading"        @click="startAsyncLoading"      >        Start Async Loading      </button>      <p        v-if="message"        class="text-muted mt-3 text-sm"      >        {{ message }}      </p>    </section>  </div></template>
```

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

### Implement Animated Tooltip in Vue

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

Demonstrates how to use the AnimatedTooltip component with a list of user objects in a Vue 3 setup script.

```vue
<script setup lang="ts">
interface Props {
  visibleItems?: number;
}

const props = withDefaults(defineProps<Props>(), {
  visibleItems: 6,
});

const people = [
  {
    id: 1,
    name: "John Doe",
    designation: "Software Engineer",
    image:
      "https://images.unsplash.com/photo-1599566150163-29194dcaad36?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=3387&q=80",
  },
  {
    id: 2,
    name: "Robert Johnson",
    designation: "Product Manager",
    image:
      "https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8YXZhdGFyfGVufDB8fDB8fHww&auto=format&fit=crop&w=800&q=60",
  },
  {
    id: 3,
    name: "Jane Smith",
    designation: "Data Scientist",
    image:
      "https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8YXZhdGFyfGVufDB8fDB8fHww&auto=format&fit=crop&w=800&q=60",
  },
  {
    id: 4,
    name: "Emily Davis",
    designation: "UX Designer",
    image:
      "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTB8fGF2YXRhcnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=800&q=60",
  },
  {
    id: 5,
    name: "Tyler Durden",
    designation: "Soap Developer",
    image:
      "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=3540&q=80",
  },
  {
    id: 6,
    name: "Dora",
    designation: "The Explorer",
    image:
      "https://images.unsplash.com/photo-1544725176-7c40e5a71c5e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=3534&q=80",
  },
];
</script>

<template>
  <div class="mb-10 flex min-h-96 w-full flex-row items-center justify-center">
    <AnimatedTooltip :items="people.slice(0, props.visibleItems)" />
  </div>
</template>
```

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

### Photo Gallery Component Usage

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

Demonstrates how to define image items and pass them to the PhotoGallery component using Vue 3 script setup.

```vue
<script lang="ts" setup>
interface Props {
  visibleImages?: number;
}

const props = withDefaults(defineProps<Props>(), {
  visibleImages: 8,
});

const items = [
  {
    src: "https://images.pexels.com/photos/16834200/pexels-photo-16834200/free-photo-of-young-brunette-in-a-white-dress-sitting-on-a-bench-and-holding-flowers.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load",
  },
  {
    src: "https://images.pexels.com/photos/16834202/pexels-photo-16834202/free-photo-of-young-woman-in-a-white-dress-posing-outdoors.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load",
  },
  {
    src: "https://images.pexels.com/photos/16834194/pexels-photo-16834194/free-photo-of-woman-in-white-dress-posing-with-red-flowers-on-lap.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load",
  },
  {
    src: "https://images.pexels.com/photos/17362900/pexels-photo-17362900/free-photo-of-pretty-young-model-in-chinese-retro-dress.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load",
  },
  {
    src: "https://images.pexels.com/photos/19447919/pexels-photo-19447919/free-photo-of-model-in-a-pink-ao-dai-dress-with-a-bouquet-of-tulips-by-the-river.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load",
  },
  {
    src: "https://images.pexels.com/photos/20332975/pexels-photo-20332975/free-photo-of-young-woman-posing-in-a-silk-slip-dress.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load",
  },
  {
    src: "https://images.pexels.com/photos/19732643/pexels-photo-19732643/free-photo-of-woman-in-white-dress-sitting-and-reading-book.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load",
  },
  {
    src: "https://images.pexels.com/photos/17347482/pexels-photo-17347482/free-photo-of-woman-in-dress-posing-with-bag.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load",
  },
];
</script>

<template>
  <div class="flex items-center justify-center">
    <PhotoGallery :items="items.slice(0, props.visibleImages)" />
  </div>
</template>
```

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

### Implement Lens Component in Vue

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

Usage example for the Lens component, demonstrating how to wrap content and handle hover states.

```vue
<script setup lang="ts">import { ref } from "vue"; interface Props {  zoomFactor?: number;  lensSize?: number;  isStatic?: boolean;} const props = withDefaults(defineProps<Props>(), {  zoomFactor: 1.5,  lensSize: 170,  isStatic: false,}); const hovering = ref(false); function setHovering(value: boolean) {  hovering.value = value;}</script> <template>  <div    class="relative mx-auto my-10 w-full max-w-md overflow-hidden rounded-3xl bg-linear-to-r from-[#1D2235] to-[#121318] p-8"  >    <Rays />    <Beams />    <div class="relative z-10">      <Lens        :hovering="hovering"        :zoom-factor="props.zoomFactor"        :lens-size="props.lensSize"        :is-static="props.isStatic"        @hover-update="setHovering"      >        <img          src="https://images.unsplash.com/photo-1713869820987-519844949a8a?q=80&w=3500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"          alt="image"          width="500"          height="500"          class="rounded-2xl"        />      </Lens>      <div        :style="{ filter: hovering ? 'blur(2px)' : 'blur(0px)' }"        class="relative z-20 py-4"      >        <h2 class="text-left text-2xl font-bold text-white">Apple Vision Pro</h2>        <p class="mt-4 text-left text-neutral-200">          The all new apple vision pro was the best thing that happened around 8 months ago, not          anymore.        </p>      </div>    </div>  </div></template> 
```

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

### Implement Letter Pullup Component

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

Usage example for the LetterPullup component, demonstrating how to pass words and delay props.

```vue
<script setup lang="ts">
interface Props {
  words?: string;
  delay?: number;
}

const props = withDefaults(defineProps<Props>(), {
  words: "Staggered Letter Pull Up",
  delay: 0.05,
});
</script>

<template>
  <LetterPullup
    :words="props.words"
    :delay="props.delay"
    class="text-black dark:text-white"
  />
</template>
```

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

### Text Reveal Component Usage

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

Example implementation of the TextReveal component in a Vue file, demonstrating prop configuration for duration, delay, and stagger.

```vue
<script setup lang="ts">interface Props {  text?: string;  duration?: number;  delay?: number;  stagger?: number;} const props = withDefaults(defineProps<Props>(), {  text: "With Inspira UI, you can build beautiful websites powered by Vue and Nuxt in record time.",  duration: 0.6,  delay: 0.2,  stagger: 0.1,});</script> <template>  <div class="flex items-center justify-center p-8">    <TextReveal      class="text-center text-4xl leading-relaxed font-semibold"      :duration="props.duration"      :delay="props.delay"      :stagger="props.stagger"    >      {{ props.text }}    </TextReveal>  </div></template> 
```

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

### Implement Image Trail Cursor in Vue

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

Usage example for the Image Trail Cursor component, demonstrating how to pass an array of image URLs and a variant prop.

```vue
<script lang="ts" setup>
import type { VariantType } from "../../ui/image-trail-cursor/ImageTrailCursor.vue";

interface Props {
  variant?: VariantType;
}

const props = withDefaults(defineProps<Props>(), {
  variant: "type2",
});

const images = [
  "https://images.pexels.com/photos/799443/pexels-photo-799443.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  "https://images.pexels.com/photos/16245254/pexels-photo-16245254/free-photo-of-chatgpt-a-chatbot-for-your-website.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  "https://images.pexels.com/photos/1910236/pexels-photo-1910236.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  "https://images.pexels.com/photos/2832382/pexels-photo-2832382.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  "https://images.pexels.com/photos/2333293/pexels-photo-2333293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  "https://images.pexels.com/photos/604684/pexels-photo-604684.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  "https://images.pexels.com/photos/3308588/pexels-photo-3308588.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
];
</script>

<template>
  <div class="flex min-h-96 w-full flex-col gap-2">
    <div class="relative mt-4 flex h-96 w-full items-center justify-center rounded-lg p-4">
      <span class="absolute inset-0 flex items-center justify-center text-4xl">Hover Here</span>
      <ImageTrailCursor
        :key="props.variant"
        :images="images"
        :variant="props.variant"
      />
    </div>
  </div>
</template>
```

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

### Bending Gallery Component Usage

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

Example implementation of the BendingGallery component in a Vue 3 setup using TypeScript.

```vue
<script lang="ts" setup>interface Props {  bend?: number;  borderRadius?: number;  textColor?: string;} const props = withDefaults(defineProps<Props>(), {  bend: 2,  borderRadius: 0.1,  textColor: "#ffffff",}); const items = ref<Array<{ image: string; text: string }>>([  {    image:      "https://images.pexels.com/photos/799443/pexels-photo-799443.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",    text: "",  },  {    image:      "https://images.pexels.com/photos/16245254/pexels-photo-16245254/free-photo-of-chatgpt-a-chatbot-for-your-website.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",    text: "",  },  {    image:      "https://images.pexels.com/photos/1910236/pexels-photo-1910236.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",    text: "",  },  {    image:      "https://images.pexels.com/photos/2832382/pexels-photo-2832382.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",    text: "",  },  {    image:      "https://images.pexels.com/photos/2333293/pexels-photo-2333293.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",    text: "",  },]);</script> <template>  <div    class="relative flex h-96 w-full flex-col items-center justify-center gap-24 overflow-clip rounded-xl border border-zinc-800"  >    <BendingGallery      :items="items"      :bend="props.bend"      :border-radius="props.borderRadius"      :text-color="props.textColor"    />  </div></template> 
```

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

### Component Preview Loader

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

Use this syntax to include a preview section for a component variant.

```markdown
::ComponentLoader{label="Preview" componentName="ComponentVariantDemo" type="examples" id="your-component-folder-name"}
::
```

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

### Display Component Preview

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

Use the ComponentLoader to render a live preview of the component.

```markdown
::ComponentLoader{label="Preview" componentName="YourComponentDemo" type="examples" id="your-component-folder-name"}
::
```

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

### Implement VanishingInput Component

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

Usage example for the VanishingInput component in a Vue application, including custom placeholder configuration.

```vue
<script setup lang="ts">import { ref } from "vue"; interface Props {  title?: string;  firstPlaceholder?: string;} const props = withDefaults(defineProps<Props>(), {  title: "Ask Anything",  firstPlaceholder: "How do I ship this faster?",}); const placeholders = [
  props.firstPlaceholder,
  "What does 'undefined' even mean?",
  "How to center a div (for real this time)",
  "Am I smarter than a compiler?",
  "Do loops ever get dizzy?",
];const text = ref("");</script> <template>  <div class="flex h-160 flex-col items-center justify-center px-4">    <h2 class="mb-10 text-center text-xl text-black sm:mb-20 sm:text-5xl dark:text-white">      {{ props.title }}    </h2>    <VanishingInput      v-model="text"      :placeholders="placeholders"    />  </div></template> 
```

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

### Implement Link Preview in Vue

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

Demonstrates how to use the LinkPreview component with custom URLs and optional width/height props.

```vue
<script setup lang="ts">interface Props {  width?: number;  height?: number;} const props = withDefaults(defineProps<Props>(), {  width: 400,  height: 200,});</script> <template>  <div class="flex h-160 flex-col items-center justify-center px-4">    <p class="mx-auto mb-10 max-w-3xl text-xl text-neutral-500 md:text-3xl dark:text-neutral-400">      <LinkPreview        url="https://tailwindcss.com"        class="font-bold"      >        Tailwind CSS      </LinkPreview>      and      <LinkPreview        url="https://motion.unovue.com/"        class="font-bold"      >        motion-v      </LinkPreview>      are a great way to build modern websites.    </p>    <p class="mx-auto max-w-3xl text-xl text-neutral-500 md:text-3xl dark:text-neutral-400">      Visit      <LinkPreview        url="https://inspira-ui.com"        :width="props.width"        :height="props.height"      >        <span          class="bg-linear-to-br from-purple-500 to-pink-500 bg-clip-text font-bold text-transparent"        >          Inspira UI        </span>      </LinkPreview>      for more cool components    </p>  </div></template> 
```

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

### Define Multi-File Front Matter

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

Use this template for documentation pages covering a group of components.

```yaml
---
title: Your Components Group Title
description: A brief description of what this group of components does.
---
```

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

### Define Globe Arc Data

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

An array of objects defining the start and end coordinates, arc altitude, and color for globe connections.

```typescript
 endLat: 35.6762,    endLng: 139.6503,    arcAlt: 0.1,    color: colors[Math.floor(Math.random() * (colors.length - 1))] as string,  },  {    order: 6,    startLat: 22.3193,    startLng: 114.1694,    endLat: 51.5072,    endLng: -0.1276,    arcAlt: 0.3,    color: colors[Math.floor(Math.random() * (colors.length - 1))] as string,  },  {    order: 7,    startLat: -19.885592,    startLng: -43.951191,    endLat: -15.595412,    endLng: -56.05918,    arcAlt: 0.1,    color: colors[Math.floor(Math.random() * (colors.length - 1))] as string,  },  {    order: 7,    startLat: 48.8566,    startLng: -2.3522,    endLat: 52.52,    endLng: 13.405,    arcAlt: 0.1,    color: colors[Math.floor(Math.random() * (colors.length - 1))] as string,  },  {    order: 7,    startLat: 52.52,    startLng: 13.405,    endLat: 34.0522,    endLng: -118.2437,    arcAlt: 0.2,    color: colors[Math.floor(Math.random() * (colors.length - 1))] as string,  },  {    order: 8,    startLat: -8.833221,    startLng: 13.264837,    endLat: -33.936138,    endLng: 18.436529,    arcAlt: 0.2,    color: colors[Math.floor(Math.random() * (colors.length - 1))] as string,  },  {    order: 8,    startLat: 49.2827,    startLng: -123.1207,    endLat: 52.3676,    endLng: 4.9041,    arcAlt: 0.2,    color: colors[Math.floor(Math.random() * (colors.length - 1))] as string,  },  {    order: 8,    startLat: 1.3521,    startLng: 103.8198,    endLat: 40.7128,    endLng: -74.006,    arcAlt: 0.5,    color: colors[Math.floor(Math.random() * (colors.length - 1))] as string,  },  {    order: 9,    startLat: 51.5072,    startLng: -0.1276,    endLat: 34.0522,    endLng: -118.2437,    arcAlt: 0.2,    color: colors[Math.floor(Math.random() * (colors.length - 1))] as string,  },  {    order: 9,    startLat: 22.3193,    startLng: 114.1694,    endLat: -22.9068,    endLng: -43.1729,    arcAlt: 0.7,    color: colors[Math.floor(Math.random() * (colors.length - 1))] as string,  },  {    order: 9,    startLat: 1.3521,    startLng: 103.8198,    endLat: -34.6037,    endLng: -58.3816,    arcAlt: 0.5,    color: colors[Math.floor(Math.random() * (colors.length - 1))] as string,  },  {    order: 10,    startLat: -22.9068,    startLng: -43.1729,    endLat: 28.6139,    endLng: 77.209,    arcAlt: 0.7,    color: colors[Math.floor(Math.random() * (colors.length - 1))] as string,  },  {    order: 10,    startLat: 34.0522,    startLng: -118.2437,    endLat: 31.2304,    endLng: 121.4737,    arcAlt: 0.3,    color: colors[Math.floor(Math.random() * (colors.length - 1))] as string,  },  {    order: 10,    startLat: -6.2088,    startLng: 106.8456,    endLat: 52.3676,    endLng: 4.9041,    arcAlt: 0.3,    color: colors[Math.floor(Math.random() * (colors.length - 1))] as string,  },  {    order: 11,    startLat: 41.9028,    startLng: 12.4964,    endLat: 34.0522,    endLng: -118.2437,    arcAlt: 0.2,    color: colors[Math.floor(Math.random() * (colors.length - 1))] as string,  },  {    order: 11,    startLat: -6.2088,    startLng: 106.8456,    endLat: 31.2304,    endLng: 121.4737,    arcAlt: 0.2,    color: colors[Math.floor(Math.random() * (colors.length - 1))] as string,  },  {    order: 11,    startLat: 22.3193,    startLng: 114.1694,    endLat: 1.3521,    endLng: 103.8198,    arcAlt: 0.2,    color: colors[Math.floor(Math.random() * (colors.length - 1))] as string,  },  {    order: 12,    startLat: 34.0522,    startLng: -118.2437,    endLat: 37.7749,    endLng: -122.4194,    arcAlt: 0.1,    color: colors[Math.floor(Math.random() * (colors.length - 1))] as string,  },  {    order: 12,    startLat: 35.6762,    startLng: 139.6503,    endLat: 22.3193,    endLng: 114.1694,    arcAlt: 0.2,    color: colors[Math.floor(Math.random() * (colors.length - 1))] as string,  },  {    order: 12,    startLat: 22.3193,    startLng: 114.1694,    endLat: 34.0522,    endLng: -118.2437,    arcAlt: 0.3,    color: colors[Math.floor(Math.random() * (colors.length - 1))] as string,  },  {    order: 13,    startLat: 52.52,    startLng: 13.405,    endLat: 22.3193,    endLng: 114.1694,    arcAlt: 0.3,    color: colors[Math.floor(Math.random() * (colors.length - 1))] as string,  },  {    order: 13,    startLat: 11.986597,    startLng: 8.571831,    endLat: 35.6762,    endLng: 139.6503,    arcAlt: 0.3,    color: colors[Math.floor(Math.random() * (colors.length - 1))] as string,  },  {    order: 13,    startLat: -22.9068,    startLng: -43.1729,    endLat: -34.6037,    endLng: -58.3816,    arcAlt: 0.1,    color: colors[Math.floor(Math.random() * (colors.length - 1))] as string,  },  {    order: 14,    startLat: -33.936138,    startLng: 18.436529,    endLat: 21.395643,    endLng: 39.883798,    arcAlt: 0.3,    color: colors[Math.floor(Math.random() * (colors.length - 1))] as string,  },];
```

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

### Book Component Usage

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

Demonstrates how to implement the Book component with its available props and sub-components like BookHeader, BookTitle, and BookDescription.

```vue
<script setup lang="ts">interface Props {  duration?: number;  color?: "zinc" | "blue" | "green" | "orange" | "red" | "purple";  isStatic?: boolean;  size?: "sm" | "md" | "lg";  radius?: "sm" | "md" | "lg" | "xl";  shadowSize?: "sm" | "md" | "lg" | "xl";} const props = withDefaults(defineProps<Props>(), {  duration: 1000,  color: "zinc",  isStatic: false,  size: "md",  radius: "md",  shadowSize: "lg",});</script> <template>  <div class="grid place-content-center p-10">    <Book      :duration="props.duration"      :color="props.color"      :is-static="props.isStatic"      :size="props.size"      :radius="props.radius"      :shadow-size="props.shadowSize"    >      <BookHeader>        <Icon          name="heroicons:book-open-solid"          size="24"        />      </BookHeader>      <BookTitle>        <h1>The Book</h1>      </BookTitle>      <BookDescription>        <p>Hover me to animate!</p>      </BookDescription>    </Book>  </div></template> 
```

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

### Implement Meteors Component in Vue

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

Usage example of the Meteors component within a Vue template, including props configuration and layout structure.

```vue
<script setup lang="ts">interface Props {  count?: number;} const props = withDefaults(defineProps<Props>(), {  count: 20,});</script> <template>  <ClientOnly>    <div class="flex w-full flex-col items-center justify-center py-24">      <div class="relative w-full max-w-xs">        <div          class="absolute inset-0 size-full scale-[0.80] rounded-full bg-red-500 bg-linear-to-r from-blue-500 to-teal-500 blur-3xl"        />        <div          class="relative flex h-full flex-col items-start justify-end overflow-hidden rounded-2xl border border-gray-800 bg-gray-900 px-4 py-8 shadow-xl"        >          <div            class="mb-4 flex size-5 items-center justify-center rounded-full border border-gray-500"          >            <svg              xmlns="http://www.w3.org/2000/svg"              fill="none"              viewBox="0 0 24 24"              strokeWidth="1.5"              stroke="currentColor"              class="size-2 text-gray-300"            >              <path                strokeLinecap="round"                strokeLinejoin="round"                d="M4.5 4.5l15 15m0 0V8.25m0 11.25H8.25"              />            </svg>          </div> 	          <h1 class="relative z-50 mb-4 text-xl font-bold text-white">            Meteors because they&apos;re cool          </h1> 	          <p class="relative z-50 mb-4 text-base font-normal text-slate-500">            I don&apos;t know what to write so I&apos;ll just paste something cool here. One more            sentence because lorem ipsum is just unacceptable. Won&apos;t ChatGPT the shit out of            this.          </p> 	          <button class="rounded-lg border border-gray-500 px-4 py-1 text-gray-300">Explore</button>          <Meteors :count="props.count" />        </div>      </div>    </div>  </ClientOnly></template> 
```

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

### Define API Documentation Table

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

List all component props in a table format.

```markdown
## API

| Prop Name | Type      | Default | Description                    |
| --------- | --------- | ------- | ------------------------------ |
| `prop1`   | `string`  | `''`    | Description of prop1.          |
| `prop2`   | `number`  | `0`     | Description of prop2.          |
| `prop2`   | `?number` | `0`     | Description of prop2 optional. |
```

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

### Define YAML Front Matter

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

Use this template at the beginning of your component documentation file.

```yaml
---
title: Your Component Title
description: A brief description of what your component does.
---
```
Tokens:
Raw