Marquee Component Installation via CLI Fails to Include ReviewCard.vue, Causing Blank Content

[Vw1n]

Description

When installing the marquee component via the CLI command npx shadcn-vue@latest add "https://registry.inspira-ui.com/marquee.json", the required ReviewCard.vue single-file component is not automatically installed. This results in blank content when using the marquee component, as it depends on ReviewCard.vue to render visible content.

Steps to Reproduce

1. Open the terminal and run the CLI installation command for the marquee component:
   npx shadcn-vue@latest add "https://registry.inspira-ui.com/marquee.json"
2. Wait for the installation process to complete successfully.
3. Navigate to the project's component directory (typically src/components/ or project-specific path).
4. Verify the presence of the marquee component files (e.g., Marquee.vue).
5. Check for the presence of ReviewCard.vue in the same or dependent component directory.
6. Import and use the marquee component in a Vue/Nuxt page or component (following the project's documentation).
7. Run the project locally (e.g., npm run dev) and observe the rendered page.

Expected Results

• ReviewCard.vue should be automatically installed alongside the marquee component when executing the CLI command.
• The marquee component should render correctly with visible content, utilizing ReviewCard.vue as a dependency.

Actual Results

• ReviewCard.vue is missing from the component directory after running the CLI installation command.
• The marquee component appears as blank content in the rendered page due to the missing dependency.

Screenshots/Code Snippets

Missing Component Verification

bash

# Terminal output showing component directory contents after installation
src/components/UI
├── Marquee.vue
├── index.js
└── (No ReviewCard.vue present)

Component Usage Example

vue

<template>
  <div
    class="relative flex h-[500px] w-full flex-col items-center justify-center overflow-hidden rounded-lg border bg-background md:shadow-xl"
  >
    <!-- First Marquee -->
    <Marquee
      pause-on-hover
      class="[--duration:20s]"
    >
      <ReviewCard
        v-for="review in firstRow"
        :key="review.username"
        :img="review.img"
        :name="review.name"
        :username="review.username"
        :body="review.body"
      />
    </Marquee>

    <!-- Second Marquee (reverse) -->
    <Marquee
      reverse
      pause-on-hover
      class="[--duration:20s]"
    >
      <ReviewCard
        v-for="review in secondRow"
        :key="review.username"
        :img="review.img"
        :name="review.name"
        :username="review.username"
        :body="review.body"
      />
    </Marquee>

    <!-- Left Gradient -->
    <div
      class="pointer-events-none absolute inset-y-0 left-0 w-1/3 bg-gradient-to-r from-white dark:from-background"
    ></div>

    <!-- Right Gradient -->
    <div
      class="pointer-events-none absolute inset-y-0 right-0 w-1/3 bg-gradient-to-l from-white dark:from-background"
    ></div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Marquee } from './ui/marquee/index.js';

// Reviews data
const reviews = [
  {
    name: "Jack",
    username: "@jack",
    body: "I've never seen anything like this before. It's amazing. I love it.",
    img: "https://avatar.vercel.sh/jack",
  },
  {
    name: "Jill",
    username: "@jill",
    body: "I don't know what to say. I'm speechless. This is amazing.",
    img: "https://avatar.vercel.sh/jill",
  },
  {
    name: "John",
    username: "@john",
    body: "I'm at a loss for words. This is amazing. I love it.",
    img: "https://avatar.vercel.sh/john",
  },
  {
    name: "Jane",
    username: "@jane",
    body: "I'm at a loss for words. This is amazing. I love it.",
    img: "https://avatar.vercel.sh/jane",
  },
  {
    name: "Jenny",
    username: "@jenny",
    body: "I'm at a loss for words. This is amazing. I love it.",
    img: "https://avatar.vercel.sh/jenny",
  },
  {
    name: "James",
    username: "@james",
    body: "I'm at a loss for words. This is amazing. I love it.",
    img: "https://avatar.vercel.sh/james",
  },
];

// Split reviews into two rows
const firstRow = ref(reviews.slice(0, reviews.length / 2));
const secondRow = ref(reviews.slice(reviews.length / 2));
</script>

Additional Context

• The issue occurs consistently across fresh project setups and existing projects.
• Manually adding ReviewCard.vue to the component directory resolves the blank content issue, confirming it as a dependency of the marquee component.
• This appears to be an oversight in the marquee component's installation configuration (e.g., marquee.json or related CLI logic), where ReviewCard.vue is not included in the installation package or copy process.

Please let me know if additional information or testing is needed to resolve this issue!