diff --git a/apps/test/app/examples/index.ts b/apps/test/app/examples/index.ts
index 2b1bf5b..837dcba 100644
--- a/apps/test/app/examples/index.ts
+++ b/apps/test/app/examples/index.ts
@@ -5,6 +5,7 @@ export { default as ChainOfThought } from './chain-of-thought.vue'
 export { default as CodeBlock } from './code-block.vue'
 export { default as Conversation } from './conversation.vue'
 export { default as Image } from './image.vue'
+export { default as InlineCitation } from './inline-citation.vue'
 export { default as Loader } from './loader.vue'
 export { default as MessageMarkdown } from './message-markdown.vue'
 export { default as Message } from './message.vue'
diff --git a/apps/test/app/examples/inline-citation.vue b/apps/test/app/examples/inline-citation.vue
new file mode 100644
index 0000000..675441e
--- /dev/null
+++ b/apps/test/app/examples/inline-citation.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import {
+  InlineCitation,
+  InlineCitationCard,
+  InlineCitationCardBody,
+  InlineCitationCardTrigger,
+  InlineCitationCarousel,
+  InlineCitationCarouselContent,
+  InlineCitationCarouselHeader,
+  InlineCitationCarouselIndex,
+  InlineCitationCarouselItem,
+  InlineCitationCarouselNext,
+  InlineCitationCarouselPrev,
+  InlineCitationSource,
+  InlineCitationText,
+} from '@repo/elements/inline-citation'
+
+const citation = {
+  text: 'The technology continues to evolve rapidly, with new breakthroughs being announced regularly',
+  sources: [
+    {
+      title: 'Advances in Natural Language Processing',
+      url: 'https://example.com/nlp-advances',
+      description:
+        'A comprehensive study on the recent developments in natural language processing technologies and their applications.',
+    },
+    {
+      title: 'Breakthroughs in Machine Learning',
+      url: 'https://mlnews.org/breakthroughs',
+      description:
+        'An overview of the most significant machine learning breakthroughs in the past year.',
+    },
+    {
+      title: 'AI in Healthcare: Current Trends',
+      url: 'https://healthai.com/trends',
+      description:
+        'A report on how artificial intelligence is transforming healthcare and diagnostics.',
+    },
+    {
+      title: 'Ethics of Artificial Intelligence',
+      url: 'https://aiethics.org/overview',
+      description:
+        'A discussion on the ethical considerations and challenges in the development of AI.',
+    },
+    {
+      title: 'Scaling Deep Learning Models',
+      url: 'https://deeplearninghub.com/scaling-models',
+      description:
+        'Insights into the technical challenges and solutions for scaling deep learning architectures.',
+    },
+    {
+      title: 'Natural Language Understanding Benchmarks',
+      url: 'https://nlubenchmarks.com/latest',
+      description:
+        'A summary of the latest benchmarks and evaluation metrics for natural language understanding systems.',
+    },
+  ],
+}
+</script>
+
+<template>
+  <p class="text-sm leading-relaxed">
+    According to recent studies, artificial intelligence has shown remarkable
+    progress in natural language processing.
+    <InlineCitation>
+      <InlineCitationText>{{ citation.text }}</InlineCitationText>
+      <InlineCitationCard>
+        <InlineCitationCardTrigger
+          :sources="citation.sources.map((source) => source.url)"
+        />
+        <InlineCitationCardBody>
+          <InlineCitationCarousel>
+            <InlineCitationCarouselHeader>
+              <InlineCitationCarouselPrev />
+              <InlineCitationCarouselNext />
+              <InlineCitationCarouselIndex />
+            </InlineCitationCarouselHeader>
+            <InlineCitationCarouselContent>
+              <InlineCitationCarouselItem
+                v-for="source in citation.sources"
+                :key="source.url"
+              >
+                <InlineCitationSource
+                  :description="source.description"
+                  :title="source.title"
+                  :url="source.url"
+                />
+              </InlineCitationCarouselItem>
+            </InlineCitationCarouselContent>
+          </InlineCitationCarousel>
+        </InlineCitationCardBody>
+      </InlineCitationCard>
+    </InlineCitation>.
+  </p>
+</template>
diff --git a/apps/test/app/pages/index.vue b/apps/test/app/pages/index.vue
index c07a4f9..a089323 100644
--- a/apps/test/app/pages/index.vue
+++ b/apps/test/app/pages/index.vue
@@ -7,6 +7,7 @@ import ChainOfThought from '~/examples/chain-of-thought.vue'
 import CodeBlock from '~/examples/code-block.vue'
 import Conversation from '~/examples/conversation.vue'
 import Image from '~/examples/image.vue'
+import InlineCitation from '~/examples/inline-citation.vue'
 import Loader from '~/examples/loader.vue'
 import MessageMarkdown from '~/examples/message-markdown.vue'
 import Message from '~/examples/message.vue'
@@ -40,6 +41,7 @@ const components = [
   { name: 'ChainOfThought', Component: ChainOfThought },
   { name: 'Queue', Component: Queue },
   { name: 'Plan', Component: Plan },
+  { name: 'InlineCitation', Component: InlineCitation },
 ]
 </script>
 
diff --git a/apps/www/content/1.overview/1.Introduction.md b/apps/www/content/1.overview/1.Introduction.md
index b6382df..8ebc0ee 100644
--- a/apps/www/content/1.overview/1.Introduction.md
+++ b/apps/www/content/1.overview/1.Introduction.md
@@ -45,4 +45,22 @@ You can install it with:
 :::ComponentLoader{label="OpenInChat" componentName="OpenInChat"}
 :::
 
+:::ComponentLoader{label="Task" componentName="Task"}
+:::
+
+:::ComponentLoader{label="Sources" componentName="Sources"}
+:::
+
+:::ComponentLoader{label="Plan" componentName="Plan"}
+:::
+
+:::ComponentLoader{label="Queue" componentName="Queue"}
+:::
+
+:::ComponentLoader{label="ChainOfThought" componentName="ChainOfThought"}
+:::
+
+:::ComponentLoader{label="InlineCitation" componentName="InlineCitation"}
+:::
+
 View the [source code](https://github.com/cwandev/ai-elements-vue) for all components on GitHub.
diff --git a/apps/www/content/2.components/chain-of-thought.md b/apps/www/content/2.components/chain-of-thought.md
index 94c6630..d366bef 100644
--- a/apps/www/content/2.components/chain-of-thought.md
+++ b/apps/www/content/2.components/chain-of-thought.md
@@ -1,7 +1,7 @@
 ---
 title: Chain of Thought
 description:
-icon: lucide:code
+icon: lucide:brain
 ---
 
 The `ChainOfThought` component provides a visual representation of an AI's reasoning process, showing step-by-step thinking with support for search results, images, and progress indicators. It helps users understand how AI arrives at conclusions.
diff --git a/apps/www/content/2.components/inline-citation.md b/apps/www/content/2.components/inline-citation.md
new file mode 100644
index 0000000..eb211c8
--- /dev/null
+++ b/apps/www/content/2.components/inline-citation.md
@@ -0,0 +1,573 @@
+---
+title: Inline Citation
+description:
+icon: lucide:message-square-quote
+---
+
+The `InlineCitation` component provides a way to display citations inline with text content, similar to academic papers or research documents. It consists of a citation pill that shows detailed source information on hover, making it perfect for AI-generated content that needs to reference sources.
+
+:::ComponentLoader{label="InlineCitation" componentName="InlineCitation"}
+:::
+
+## Install using CLI
+
+:::tabs{variant="card"}
+  ::div{label="ai-elements-vue"}
+  ```sh
+  npx ai-elements-vue@latest add inline-citation
+  ```
+  ::
+  ::div{label="shadcn-vue"}
+
+  ```sh
+  npx shadcn-vue@latest add https://registry.ai-elements-vue.com/inline-citation.json
+  ```
+  ::
+:::
+
+## Install Manually
+
+Copy and paste the following files into the same folder.
+
+:::code-group
+```vue [InlineCitation.vue]
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span :class="cn('group inline items-center gap-1', props.class)">
+    <slot />
+  </span>
+</template>
+```
+
+```vue [InlineCitationCard.vue]
+<script setup lang="ts">
+import { HoverCard } from '@repo/shadcn-vue/components/ui/hover-card'
+
+const props = withDefaults(defineProps<{
+  closeDelay?: number
+  openDelay?: number
+}>(), {
+  closeDelay: 0,
+  openDelay: 0,
+})
+</script>
+
+<template>
+  <HoverCard :close-delay="props.closeDelay" :open-delay="props.openDelay">
+    <slot />
+  </HoverCard>
+</template>
+```
+
+```vue [InlineCitationCardBody.vue]
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { HoverCardContent } from '@repo/shadcn-vue/components/ui/hover-card'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <HoverCardContent :class="cn('relative w-80 p-0', props.class)">
+    <slot />
+  </HoverCardContent>
+</template>
+```
+
+```vue [InlineCitationCardTrigger.vue]
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { Badge } from '@repo/shadcn-vue/components/ui/badge'
+import { HoverCardTrigger } from '@repo/shadcn-vue/components/ui/hover-card'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  sources: string[]
+  class?: HTMLAttributes['class']
+}>()
+
+const displayText = computed(() => {
+  const firstSource = props.sources[0]
+  if (!firstSource)
+    return 'unknown'
+
+  try {
+    const hostname = new URL(firstSource).hostname
+    const additionalCount = props.sources.length - 1
+    return additionalCount > 0 ? `${hostname} +${additionalCount}` : hostname
+  }
+  catch {
+    return 'unknown'
+  }
+})
+</script>
+
+<template>
+  <HoverCardTrigger as-child>
+    <Badge :class="cn('ml-1 rounded-full', props.class)" variant="secondary">
+      {{ displayText }}
+    </Badge>
+  </HoverCardTrigger>
+</template>
+```
+
+```vue [InlineCitationCarousel.vue]
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { Carousel } from '@repo/shadcn-vue/components/ui/carousel'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <Carousel :class="cn('w-full', props.class)">
+    <slot />
+  </Carousel>
+</template>
+```
+
+```vue [InlineCitationCarouselContent.vue]
+<script setup lang="ts">
+import { CarouselContent } from '@repo/shadcn-vue/components/ui/carousel'
+</script>
+
+<template>
+  <CarouselContent>
+    <slot />
+  </CarouselContent>
+</template>
+```
+
+```vue [InlineCitationCarouselHeader.vue]
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    :class="cn('flex items-center justify-between gap-2 rounded-t-md bg-secondary p-2', props.class)"
+  >
+    <slot />
+  </div>
+</template>
+```
+
+```vue [InlineCitationCarouselIndex.vue]
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { useCarousel } from '@repo/shadcn-vue/components/ui/carousel'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { computed, nextTick, ref, watch } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const { carouselApi } = useCarousel()
+const current = ref(0)
+const count = ref(0)
+
+const displayText = computed(() => `${current.value}/${count.value}`)
+
+function updateState() {
+  if (!carouselApi.value)
+    return
+
+  count.value = carouselApi.value.scrollSnapList().length
+  current.value = carouselApi.value.selectedScrollSnap() + 1
+}
+
+const stop = watch(carouselApi, (api) => {
+  if (!api)
+    return
+
+  // Watch only once
+  nextTick(() => stop())
+
+  updateState()
+
+  api.on('select', () => {
+    updateState()
+  })
+})
+</script>
+
+<template>
+  <div
+    :class="cn('flex flex-1 items-center justify-end px-3 py-1 text-muted-foreground text-xs', props.class)"
+  >
+    <slot>{{ displayText }}</slot>
+  </div>
+</template>
+```
+
+```vue [InlineCitationCarouselItem.vue]
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { CarouselItem } from '@repo/shadcn-vue/components/ui/carousel'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <CarouselItem :class="cn('w-full space-y-2 p-4 pl-8', props.class)">
+    <slot />
+  </CarouselItem>
+</template>
+```
+
+```vue [InlineCitationCarouselNext.vue]
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { useCarousel } from '@repo/shadcn-vue/components/ui/carousel'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { ArrowRight } from 'lucide-vue-next'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const { scrollNext } = useCarousel()
+</script>
+
+<template>
+  <button
+    :class="cn('shrink-0', props.class)"
+    type="button"
+    aria-label="Next"
+    @click="scrollNext"
+  >
+    <ArrowRight class="size-4 text-muted-foreground" />
+  </button>
+</template>
+```
+
+```vue [InlineCitationCarouselPrev.vue]
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { useCarousel } from '@repo/shadcn-vue/components/ui/carousel'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { ArrowLeft } from 'lucide-vue-next'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const { scrollPrev } = useCarousel()
+</script>
+
+<template>
+  <button
+    :class="cn('shrink-0', props.class)"
+    type="button"
+    aria-label="Previous"
+    @click="scrollPrev"
+  >
+    <ArrowLeft class="size-4 text-muted-foreground" />
+  </button>
+</template>
+```
+
+```vue [InlineCitationQuote.vue]
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <blockquote
+    :class="cn('border-muted border-l-2 pl-3 text-muted-foreground text-sm italic', props.class)"
+  >
+    <slot />
+  </blockquote>
+</template>
+```
+
+```vue [InlineCitationSource.vue]
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+const props = defineProps<{
+  title?: string
+  url?: string
+  description?: string
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('space-y-1', props.class)">
+    <h4 v-if="title" class="truncate font-medium text-sm leading-tight">
+      {{ title }}
+    </h4>
+    <p v-if="url" class="truncate break-all text-muted-foreground text-xs">
+      {{ url }}
+    </p>
+    <p v-if="description" class="line-clamp-3 text-muted-foreground text-sm leading-relaxed">
+      {{ description }}
+    </p>
+    <slot />
+  </div>
+</template>
+```
+
+```vue [InlineCitationText.vue]
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span :class="cn('transition-colors group-hover:bg-accent', props.class)">
+    <slot />
+  </span>
+</template>
+```
+
+```ts [index.ts]
+export { default as InlineCitation } from './InlineCitation.vue'
+export { default as InlineCitationCard } from './InlineCitationCard.vue'
+export { default as InlineCitationCardBody } from './InlineCitationCardBody.vue'
+export { default as InlineCitationCardTrigger } from './InlineCitationCardTrigger.vue'
+export { default as InlineCitationCarousel } from './InlineCitationCarousel.vue'
+export { default as InlineCitationCarouselContent } from './InlineCitationCarouselContent.vue'
+export { default as InlineCitationCarouselHeader } from './InlineCitationCarouselHeader.vue'
+export { default as InlineCitationCarouselIndex } from './InlineCitationCarouselIndex.vue'
+export { default as InlineCitationCarouselItem } from './InlineCitationCarouselItem.vue'
+export { default as InlineCitationCarouselNext } from './InlineCitationCarouselNext.vue'
+export { default as InlineCitationCarouselPrev } from './InlineCitationCarouselPrev.vue'
+export { default as InlineCitationQuote } from './InlineCitationQuote.vue'
+export { default as InlineCitationSource } from './InlineCitationSource.vue'
+export { default as InlineCitationText } from './InlineCitationText.vue'
+```
+:::
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import {
+  InlineCitation,
+  InlineCitationCard,
+  InlineCitationCardBody,
+  InlineCitationCardTrigger,
+  InlineCitationCarousel,
+  InlineCitationCarouselContent,
+  InlineCitationCarouselHeader,
+  InlineCitationCarouselIndex,
+  InlineCitationCarouselItem,
+  InlineCitationCarouselNext,
+  InlineCitationCarouselPrev,
+  InlineCitationSource,
+  InlineCitationText,
+} from '@/components/ai-elements/inline-citation'
+</script>
+
+<template>
+  <InlineCitation>
+    <InlineCitationText>{{ citation.text }}</InlineCitationText>
+    <InlineCitationCard>
+      <InlineCitationCardTrigger
+        :sources="citation.sources.map((source) => source.url)"
+      />
+      <InlineCitationCardBody>
+        <InlineCitationCarousel>
+          <InlineCitationCarouselHeader>
+            <InlineCitationCarouselPrev />
+            <InlineCitationCarouselNext />
+            <InlineCitationCarouselIndex />
+          </InlineCitationCarouselHeader>
+          <InlineCitationCarouselContent>
+            <InlineCitationCarouselItem>
+              <InlineCitationSource
+                title="AI SDK"
+                url="https://ai-sdk.dev"
+                description="The AI Toolkit for TypeScript"
+              />
+            </InlineCitationCarouselItem>
+          </InlineCitationCarouselContent>
+        </InlineCitationCarousel>
+      </InlineCitationCardBody>
+    </InlineCitationCard>
+  </InlineCitation>
+</template>
+```
+
+## Features
+
+- Hover interaction to reveal detailed citation information
+- **Carousel navigation** for multiple citations with prev/next controls
+- **Live index tracking** showing current slide position (e.g., "1/5")
+- Support for source titles, URLs, and descriptions
+- Optional quote blocks for relevant excerpts
+- Composable architecture for flexible citation formats
+- Accessible design with proper keyboard navigation
+- Seamless integration with AI-generated content
+- Clean visual design that doesn't disrupt reading flow
+- Smart badge display showing source hostname and count
+
+## Props
+
+### `<InlineCitation />`
+
+:::field-group
+  ::field{name="class" type="string" defaultValue="''"}
+  Additional CSS classes to apply to the component.
+  ::
+:::
+
+### `<InlineCitationText />`
+
+:::field-group
+  ::field{name="class" type="string" defaultValue="''"}
+  Additional CSS classes to apply to the component.
+  ::
+:::
+
+### `<InlineCitationCard />`
+
+:::field-group
+  ::field{name="closeDelay" type="number" optional defaultValue="0"}
+  Delay in milliseconds before the hover card closes.
+  ::
+
+  ::field{name="openDelay" type="number" optional defaultValue="0"}
+  Delay in milliseconds before the hover card opens.
+  ::
+:::
+
+### `<InlineCitationCardTrigger />`
+
+:::field-group
+  ::field{name="sources" type="string[]"}
+  Array of source URLs. The first URL's hostname is displayed on the badge, with a count indicator if there are multiple sources.
+  ::
+
+  ::field{name="class" type="string" defaultValue="''"}
+  Additional CSS classes to apply to the component.
+  ::
+:::
+
+### `<InlineCitationCardBody />`
+
+:::field-group
+  ::field{name="class" type="string" defaultValue="''"}
+  Additional CSS classes to apply to the component.
+  ::
+:::
+
+### `<InlineCitationCarousel />`
+
+:::field-group
+  ::field{name="class" type="string" defaultValue="''"}
+  Additional CSS classes to apply to the component.
+  ::
+:::
+
+### `<InlineCitationCarouselContent />`
+
+:::field-group
+  ::field{name="class" type="string" defaultValue="''"}
+  Additional CSS classes to apply to the component.
+  ::
+:::
+
+### `<InlineCitationCarouselItem />`
+
+:::field-group
+  ::field{name="class" type="string" defaultValue="''"}
+  Additional CSS classes to apply to the component.
+  ::
+:::
+
+### `<InlineCitationCarouselHeader />`
+
+:::field-group
+  ::field{name="class" type="string" defaultValue="''"}
+  Additional CSS classes to apply to the component.
+  ::
+:::
+
+### `<InlineCitationCarouselIndex />`
+
+:::field-group
+  ::field{name="class" type="string" defaultValue="''"}
+  Additional CSS classes to apply to the component.
+  ::
+:::
+
+### `<InlineCitationCarouselPrev />`
+
+:::field-group
+  ::field{name="class" type="string" defaultValue="''"}
+  Additional CSS classes to apply to the component.
+  ::
+:::
+
+### `<InlineCitationCarouselNext />`
+
+:::field-group
+  ::field{name="class" type="string" defaultValue="''"}
+  Additional CSS classes to apply to the component.
+  ::
+:::
+
+### `<InlineCitationSource />`
+
+:::field-group
+  ::field{name="title" type="string" optional}
+  The title of the citation source.
+  ::
+
+  ::field{name="url" type="string" optional}
+  The URL of the citation source.
+  ::
+
+  ::field{name="description" type="string" optional}
+  A brief description of the citation source.
+  ::
+
+  ::field{name="class" type="string" defaultValue="''"}
+  Additional CSS classes to apply to the component.
+  ::
+:::
+
+### `<InlineCitationQuote />`
+
+:::field-group
+  ::field{name="class" type="string" defaultValue="''"}
+  Additional CSS classes to apply to the component.
+  ::
+:::
diff --git a/apps/www/plugins/ai-elements.ts b/apps/www/plugins/ai-elements.ts
index ae110e3..7759964 100644
--- a/apps/www/plugins/ai-elements.ts
+++ b/apps/www/plugins/ai-elements.ts
@@ -5,6 +5,7 @@ import {
   ChainOfThought,
   Conversation,
   Image,
+  InlineCitation,
   Loader,
   LoaderCustomStyling,
   LoaderSizes,
@@ -62,4 +63,5 @@ export default defineNuxtPlugin((nuxtApp) => {
   vueApp.component('Queue', Queue)
   vueApp.component('QueuePromptInput', QueuePromptInput)
   vueApp.component('Plan', Plan)
+  vueApp.component('InlineCitation', InlineCitation)
 })
diff --git a/packages/elements/src/index.ts b/packages/elements/src/index.ts
index 4aa22b5..2e9e507 100644
--- a/packages/elements/src/index.ts
+++ b/packages/elements/src/index.ts
@@ -4,6 +4,7 @@ export * from './chain-of-thought'
 export * from './code-block'
 export * from './conversation'
 export * from './image'
+export * from './inline-citation'
 export * from './loader'
 export * from './message'
 export * from './open-in-chat'
diff --git a/packages/elements/src/inline-citation/InlineCitation.vue b/packages/elements/src/inline-citation/InlineCitation.vue
new file mode 100644
index 0000000..211c40d
--- /dev/null
+++ b/packages/elements/src/inline-citation/InlineCitation.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span :class="cn('group inline items-center gap-1', props.class)">
+    <slot />
+  </span>
+</template>
diff --git a/packages/elements/src/inline-citation/InlineCitationCard.vue b/packages/elements/src/inline-citation/InlineCitationCard.vue
new file mode 100644
index 0000000..3883a81
--- /dev/null
+++ b/packages/elements/src/inline-citation/InlineCitationCard.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { HoverCard } from '@repo/shadcn-vue/components/ui/hover-card'
+
+const props = withDefaults(defineProps<{
+  closeDelay?: number
+  openDelay?: number
+}>(), {
+  closeDelay: 0,
+  openDelay: 0,
+})
+</script>
+
+<template>
+  <HoverCard :close-delay="props.closeDelay" :open-delay="props.openDelay">
+    <slot />
+  </HoverCard>
+</template>
diff --git a/packages/elements/src/inline-citation/InlineCitationCardBody.vue b/packages/elements/src/inline-citation/InlineCitationCardBody.vue
new file mode 100644
index 0000000..0351daf
--- /dev/null
+++ b/packages/elements/src/inline-citation/InlineCitationCardBody.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { HoverCardContent } from '@repo/shadcn-vue/components/ui/hover-card'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <HoverCardContent :class="cn('relative w-80 p-0', props.class)">
+    <slot />
+  </HoverCardContent>
+</template>
diff --git a/packages/elements/src/inline-citation/InlineCitationCardTrigger.vue b/packages/elements/src/inline-citation/InlineCitationCardTrigger.vue
new file mode 100644
index 0000000..9ba3c6a
--- /dev/null
+++ b/packages/elements/src/inline-citation/InlineCitationCardTrigger.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { Badge } from '@repo/shadcn-vue/components/ui/badge'
+import { HoverCardTrigger } from '@repo/shadcn-vue/components/ui/hover-card'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  sources: string[]
+  class?: HTMLAttributes['class']
+}>()
+
+const displayText = computed(() => {
+  const firstSource = props.sources[0]
+  if (!firstSource)
+    return 'unknown'
+
+  try {
+    const hostname = new URL(firstSource).hostname
+    const additionalCount = props.sources.length - 1
+    return additionalCount > 0 ? `${hostname} +${additionalCount}` : hostname
+  }
+  catch {
+    return 'unknown'
+  }
+})
+</script>
+
+<template>
+  <HoverCardTrigger as-child>
+    <Badge :class="cn('ml-1 rounded-full', props.class)" variant="secondary">
+      {{ displayText }}
+    </Badge>
+  </HoverCardTrigger>
+</template>
diff --git a/packages/elements/src/inline-citation/InlineCitationCarousel.vue b/packages/elements/src/inline-citation/InlineCitationCarousel.vue
new file mode 100644
index 0000000..42e9920
--- /dev/null
+++ b/packages/elements/src/inline-citation/InlineCitationCarousel.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { Carousel } from '@repo/shadcn-vue/components/ui/carousel'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <Carousel :class="cn('w-full', props.class)">
+    <slot />
+  </Carousel>
+</template>
diff --git a/packages/elements/src/inline-citation/InlineCitationCarouselContent.vue b/packages/elements/src/inline-citation/InlineCitationCarouselContent.vue
new file mode 100644
index 0000000..90875a5
--- /dev/null
+++ b/packages/elements/src/inline-citation/InlineCitationCarouselContent.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { CarouselContent } from '@repo/shadcn-vue/components/ui/carousel'
+</script>
+
+<template>
+  <CarouselContent>
+    <slot />
+  </CarouselContent>
+</template>
diff --git a/packages/elements/src/inline-citation/InlineCitationCarouselHeader.vue b/packages/elements/src/inline-citation/InlineCitationCarouselHeader.vue
new file mode 100644
index 0000000..e10afd7
--- /dev/null
+++ b/packages/elements/src/inline-citation/InlineCitationCarouselHeader.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    :class="cn('flex items-center justify-between gap-2 rounded-t-md bg-secondary p-2', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/packages/elements/src/inline-citation/InlineCitationCarouselIndex.vue b/packages/elements/src/inline-citation/InlineCitationCarouselIndex.vue
new file mode 100644
index 0000000..68e3807
--- /dev/null
+++ b/packages/elements/src/inline-citation/InlineCitationCarouselIndex.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { useCarousel } from '@repo/shadcn-vue/components/ui/carousel'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { computed, nextTick, ref, watch } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const { carouselApi } = useCarousel()
+const current = ref(0)
+const count = ref(0)
+
+const displayText = computed(() => `${current.value}/${count.value}`)
+
+function updateState() {
+  if (!carouselApi.value)
+    return
+
+  count.value = carouselApi.value.scrollSnapList().length
+  current.value = carouselApi.value.selectedScrollSnap() + 1
+}
+
+const stop = watch(carouselApi, (api) => {
+  if (!api)
+    return
+
+  // Watch only once
+  nextTick(() => stop())
+
+  updateState()
+
+  api.on('select', () => {
+    updateState()
+  })
+})
+</script>
+
+<template>
+  <div
+    :class="cn('flex flex-1 items-center justify-end px-3 py-1 text-muted-foreground text-xs', props.class)"
+  >
+    <slot>{{ displayText }}</slot>
+  </div>
+</template>
diff --git a/packages/elements/src/inline-citation/InlineCitationCarouselItem.vue b/packages/elements/src/inline-citation/InlineCitationCarouselItem.vue
new file mode 100644
index 0000000..c1c3acd
--- /dev/null
+++ b/packages/elements/src/inline-citation/InlineCitationCarouselItem.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { CarouselItem } from '@repo/shadcn-vue/components/ui/carousel'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <CarouselItem :class="cn('w-full space-y-2 p-4 pl-8', props.class)">
+    <slot />
+  </CarouselItem>
+</template>
diff --git a/packages/elements/src/inline-citation/InlineCitationCarouselNext.vue b/packages/elements/src/inline-citation/InlineCitationCarouselNext.vue
new file mode 100644
index 0000000..ffb5026
--- /dev/null
+++ b/packages/elements/src/inline-citation/InlineCitationCarouselNext.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { useCarousel } from '@repo/shadcn-vue/components/ui/carousel'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { ArrowRight } from 'lucide-vue-next'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const { scrollNext } = useCarousel()
+</script>
+
+<template>
+  <button
+    :class="cn('shrink-0', props.class)"
+    type="button"
+    aria-label="Next"
+    @click="scrollNext"
+  >
+    <ArrowRight class="size-4 text-muted-foreground" />
+  </button>
+</template>
diff --git a/packages/elements/src/inline-citation/InlineCitationCarouselPrev.vue b/packages/elements/src/inline-citation/InlineCitationCarouselPrev.vue
new file mode 100644
index 0000000..06a7f19
--- /dev/null
+++ b/packages/elements/src/inline-citation/InlineCitationCarouselPrev.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { useCarousel } from '@repo/shadcn-vue/components/ui/carousel'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { ArrowLeft } from 'lucide-vue-next'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const { scrollPrev } = useCarousel()
+</script>
+
+<template>
+  <button
+    :class="cn('shrink-0', props.class)"
+    type="button"
+    aria-label="Previous"
+    @click="scrollPrev"
+  >
+    <ArrowLeft class="size-4 text-muted-foreground" />
+  </button>
+</template>
diff --git a/packages/elements/src/inline-citation/InlineCitationQuote.vue b/packages/elements/src/inline-citation/InlineCitationQuote.vue
new file mode 100644
index 0000000..0ccf845
--- /dev/null
+++ b/packages/elements/src/inline-citation/InlineCitationQuote.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <blockquote
+    :class="cn('border-muted border-l-2 pl-3 text-muted-foreground text-sm italic', props.class)"
+  >
+    <slot />
+  </blockquote>
+</template>
diff --git a/packages/elements/src/inline-citation/InlineCitationSource.vue b/packages/elements/src/inline-citation/InlineCitationSource.vue
new file mode 100644
index 0000000..64be0cb
--- /dev/null
+++ b/packages/elements/src/inline-citation/InlineCitationSource.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+const props = defineProps<{
+  title?: string
+  url?: string
+  description?: string
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div :class="cn('space-y-1', props.class)">
+    <h4 v-if="title" class="truncate font-medium text-sm leading-tight">
+      {{ title }}
+    </h4>
+    <p v-if="url" class="truncate break-all text-muted-foreground text-xs">
+      {{ url }}
+    </p>
+    <p v-if="description" class="line-clamp-3 text-muted-foreground text-sm leading-relaxed">
+      {{ description }}
+    </p>
+    <slot />
+  </div>
+</template>
diff --git a/packages/elements/src/inline-citation/InlineCitationText.vue b/packages/elements/src/inline-citation/InlineCitationText.vue
new file mode 100644
index 0000000..f9b9183
--- /dev/null
+++ b/packages/elements/src/inline-citation/InlineCitationText.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span :class="cn('transition-colors group-hover:bg-accent', props.class)">
+    <slot />
+  </span>
+</template>
diff --git a/packages/elements/src/inline-citation/index.ts b/packages/elements/src/inline-citation/index.ts
new file mode 100644
index 0000000..fcd59a8
--- /dev/null
+++ b/packages/elements/src/inline-citation/index.ts
@@ -0,0 +1,14 @@
+export { default as InlineCitation } from './InlineCitation.vue'
+export { default as InlineCitationCard } from './InlineCitationCard.vue'
+export { default as InlineCitationCardBody } from './InlineCitationCardBody.vue'
+export { default as InlineCitationCardTrigger } from './InlineCitationCardTrigger.vue'
+export { default as InlineCitationCarousel } from './InlineCitationCarousel.vue'
+export { default as InlineCitationCarouselContent } from './InlineCitationCarouselContent.vue'
+export { default as InlineCitationCarouselHeader } from './InlineCitationCarouselHeader.vue'
+export { default as InlineCitationCarouselIndex } from './InlineCitationCarouselIndex.vue'
+export { default as InlineCitationCarouselItem } from './InlineCitationCarouselItem.vue'
+export { default as InlineCitationCarouselNext } from './InlineCitationCarouselNext.vue'
+export { default as InlineCitationCarouselPrev } from './InlineCitationCarouselPrev.vue'
+export { default as InlineCitationQuote } from './InlineCitationQuote.vue'
+export { default as InlineCitationSource } from './InlineCitationSource.vue'
+export { default as InlineCitationText } from './InlineCitationText.vue'
diff --git a/packages/examples/src/index.ts b/packages/examples/src/index.ts
index 3a3e39b..a1c1b6c 100644
--- a/packages/examples/src/index.ts
+++ b/packages/examples/src/index.ts
@@ -4,6 +4,7 @@ export { default as Branch } from './branch.vue'
 export { default as ChainOfThought } from './chain-of-thought.vue'
 export { default as Conversation } from './conversation.vue'
 export { default as Image } from './image.vue'
+export { default as InlineCitation } from './inline-citation.vue'
 export { default as LoaderCustomStyling } from './loader-custom-styling.vue'
 export { default as LoaderSizes } from './loader-sizes.vue'
 export { default as Loader } from './loader.vue'
diff --git a/packages/examples/src/inline-citation.vue b/packages/examples/src/inline-citation.vue
new file mode 100644
index 0000000..675441e
--- /dev/null
+++ b/packages/examples/src/inline-citation.vue
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import {
+  InlineCitation,
+  InlineCitationCard,
+  InlineCitationCardBody,
+  InlineCitationCardTrigger,
+  InlineCitationCarousel,
+  InlineCitationCarouselContent,
+  InlineCitationCarouselHeader,
+  InlineCitationCarouselIndex,
+  InlineCitationCarouselItem,
+  InlineCitationCarouselNext,
+  InlineCitationCarouselPrev,
+  InlineCitationSource,
+  InlineCitationText,
+} from '@repo/elements/inline-citation'
+
+const citation = {
+  text: 'The technology continues to evolve rapidly, with new breakthroughs being announced regularly',
+  sources: [
+    {
+      title: 'Advances in Natural Language Processing',
+      url: 'https://example.com/nlp-advances',
+      description:
+        'A comprehensive study on the recent developments in natural language processing technologies and their applications.',
+    },
+    {
+      title: 'Breakthroughs in Machine Learning',
+      url: 'https://mlnews.org/breakthroughs',
+      description:
+        'An overview of the most significant machine learning breakthroughs in the past year.',
+    },
+    {
+      title: 'AI in Healthcare: Current Trends',
+      url: 'https://healthai.com/trends',
+      description:
+        'A report on how artificial intelligence is transforming healthcare and diagnostics.',
+    },
+    {
+      title: 'Ethics of Artificial Intelligence',
+      url: 'https://aiethics.org/overview',
+      description:
+        'A discussion on the ethical considerations and challenges in the development of AI.',
+    },
+    {
+      title: 'Scaling Deep Learning Models',
+      url: 'https://deeplearninghub.com/scaling-models',
+      description:
+        'Insights into the technical challenges and solutions for scaling deep learning architectures.',
+    },
+    {
+      title: 'Natural Language Understanding Benchmarks',
+      url: 'https://nlubenchmarks.com/latest',
+      description:
+        'A summary of the latest benchmarks and evaluation metrics for natural language understanding systems.',
+    },
+  ],
+}
+</script>
+
+<template>
+  <p class="text-sm leading-relaxed">
+    According to recent studies, artificial intelligence has shown remarkable
+    progress in natural language processing.
+    <InlineCitation>
+      <InlineCitationText>{{ citation.text }}</InlineCitationText>
+      <InlineCitationCard>
+        <InlineCitationCardTrigger
+          :sources="citation.sources.map((source) => source.url)"
+        />
+        <InlineCitationCardBody>
+          <InlineCitationCarousel>
+            <InlineCitationCarouselHeader>
+              <InlineCitationCarouselPrev />
+              <InlineCitationCarouselNext />
+              <InlineCitationCarouselIndex />
+            </InlineCitationCarouselHeader>
+            <InlineCitationCarouselContent>
+              <InlineCitationCarouselItem
+                v-for="source in citation.sources"
+                :key="source.url"
+              >
+                <InlineCitationSource
+                  :description="source.description"
+                  :title="source.title"
+                  :url="source.url"
+                />
+              </InlineCitationCarouselItem>
+            </InlineCitationCarouselContent>
+          </InlineCitationCarousel>
+        </InlineCitationCardBody>
+      </InlineCitationCard>
+    </InlineCitation>.
+  </p>
+</template>
diff --git a/packages/shadcn-vue/components/ui/button/index.ts b/packages/shadcn-vue/components/ui/button/index.ts
index 66fa988..ce9ceb0 100644
--- a/packages/shadcn-vue/components/ui/button/index.ts
+++ b/packages/shadcn-vue/components/ui/button/index.ts
@@ -21,10 +21,12 @@ export const buttonVariants = cva(
         link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
-        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
-        sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
-        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
-        icon: 'size-9',
+        'default': 'h-9 px-4 py-2 has-[>svg]:px-3',
+        'sm': 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+        'lg': 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        'icon': 'size-9',
+        'icon-sm': 'size-8',
+        'icon-lg': 'size-10',
       },
     },
     defaultVariants: {
diff --git a/packages/shadcn-vue/components/ui/carousel/Carousel.vue b/packages/shadcn-vue/components/ui/carousel/Carousel.vue
new file mode 100644
index 0000000..2bbf851
--- /dev/null
+++ b/packages/shadcn-vue/components/ui/carousel/Carousel.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { CarouselEmits, CarouselProps, WithClassAsProps } from './interface'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { useProvideCarousel } from './useCarousel'
+
+const props = withDefaults(defineProps<CarouselProps & WithClassAsProps>(), {
+  orientation: 'horizontal',
+})
+
+const emits = defineEmits<CarouselEmits>()
+
+const { canScrollNext, canScrollPrev, carouselApi, carouselRef, orientation, scrollNext, scrollPrev } = useProvideCarousel(props, emits)
+
+defineExpose({
+  canScrollNext,
+  canScrollPrev,
+  carouselApi,
+  carouselRef,
+  orientation,
+  scrollNext,
+  scrollPrev,
+})
+
+function onKeyDown(event: KeyboardEvent) {
+  const prevKey = props.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft'
+  const nextKey = props.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight'
+
+  if (event.key === prevKey) {
+    event.preventDefault()
+    scrollPrev()
+
+    return
+  }
+
+  if (event.key === nextKey) {
+    event.preventDefault()
+    scrollNext()
+  }
+}
+</script>
+
+<template>
+  <div
+    data-slot="carousel"
+    :class="cn('relative', props.class)"
+    role="region"
+    aria-roledescription="carousel"
+    tabindex="0"
+    @keydown="onKeyDown"
+  >
+    <slot :can-scroll-next :can-scroll-prev :carousel-api :carousel-ref :orientation :scroll-next :scroll-prev />
+  </div>
+</template>
diff --git a/packages/shadcn-vue/components/ui/carousel/CarouselContent.vue b/packages/shadcn-vue/components/ui/carousel/CarouselContent.vue
new file mode 100644
index 0000000..11cbde1
--- /dev/null
+++ b/packages/shadcn-vue/components/ui/carousel/CarouselContent.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { WithClassAsProps } from './interface'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { useCarousel } from './useCarousel'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<WithClassAsProps>()
+
+const { carouselRef, orientation } = useCarousel()
+</script>
+
+<template>
+  <div
+    ref="carouselRef"
+    data-slot="carousel-content"
+    class="overflow-hidden"
+  >
+    <div
+      :class="
+        cn(
+          'flex',
+          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
+          props.class,
+        )"
+      v-bind="$attrs"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
diff --git a/packages/shadcn-vue/components/ui/carousel/CarouselItem.vue b/packages/shadcn-vue/components/ui/carousel/CarouselItem.vue
new file mode 100644
index 0000000..5e228bd
--- /dev/null
+++ b/packages/shadcn-vue/components/ui/carousel/CarouselItem.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { WithClassAsProps } from './interface'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { useCarousel } from './useCarousel'
+
+const props = defineProps<WithClassAsProps>()
+
+const { orientation } = useCarousel()
+</script>
+
+<template>
+  <div
+    data-slot="carousel-item"
+    role="group"
+    aria-roledescription="slide"
+    :class="cn(
+      'min-w-0 shrink-0 grow-0 basis-full',
+      orientation === 'horizontal' ? 'pl-4' : 'pt-4',
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/packages/shadcn-vue/components/ui/carousel/CarouselNext.vue b/packages/shadcn-vue/components/ui/carousel/CarouselNext.vue
new file mode 100644
index 0000000..b5c662d
--- /dev/null
+++ b/packages/shadcn-vue/components/ui/carousel/CarouselNext.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { ButtonVariants } from '@repo/shadcn-vue/components/ui/button'
+import type { WithClassAsProps } from './interface'
+import { Button } from '@repo/shadcn-vue/components/ui/button'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { ArrowRight } from 'lucide-vue-next'
+import { useCarousel } from './useCarousel'
+
+const props = withDefaults(defineProps<{
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
+}
+& WithClassAsProps>(), {
+  variant: 'outline',
+  size: 'icon',
+})
+
+const { orientation, canScrollNext, scrollNext } = useCarousel()
+</script>
+
+<template>
+  <Button
+    data-slot="carousel-next"
+    :disabled="!canScrollNext"
+    :class="cn(
+      'absolute size-8 rounded-full',
+      orientation === 'horizontal'
+        ? 'top-1/2 -right-12 -translate-y-1/2'
+        : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+      props.class,
+    )"
+    :variant="variant"
+    :size="size"
+    @click="scrollNext"
+  >
+    <slot>
+      <ArrowRight />
+      <span class="sr-only">Next Slide</span>
+    </slot>
+  </Button>
+</template>
diff --git a/packages/shadcn-vue/components/ui/carousel/CarouselPrevious.vue b/packages/shadcn-vue/components/ui/carousel/CarouselPrevious.vue
new file mode 100644
index 0000000..c19fc6a
--- /dev/null
+++ b/packages/shadcn-vue/components/ui/carousel/CarouselPrevious.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { ButtonVariants } from '@repo/shadcn-vue/components/ui/button'
+import type { WithClassAsProps } from './interface'
+import { Button } from '@repo/shadcn-vue/components/ui/button'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { ArrowLeft } from 'lucide-vue-next'
+import { useCarousel } from './useCarousel'
+
+const props = withDefaults(defineProps<{
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
+}
+& WithClassAsProps>(), {
+  variant: 'outline',
+  size: 'icon',
+})
+
+const { orientation, canScrollPrev, scrollPrev } = useCarousel()
+</script>
+
+<template>
+  <Button
+    data-slot="carousel-previous"
+    :disabled="!canScrollPrev"
+    :class="cn(
+      'absolute size-8 rounded-full',
+      orientation === 'horizontal'
+        ? 'top-1/2 -left-12 -translate-y-1/2'
+        : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+      props.class,
+    )"
+    :variant="variant"
+    :size="size"
+    @click="scrollPrev"
+  >
+    <slot>
+      <ArrowLeft />
+      <span class="sr-only">Previous Slide</span>
+    </slot>
+  </Button>
+</template>
diff --git a/packages/shadcn-vue/components/ui/carousel/index.ts b/packages/shadcn-vue/components/ui/carousel/index.ts
new file mode 100644
index 0000000..58162c0
--- /dev/null
+++ b/packages/shadcn-vue/components/ui/carousel/index.ts
@@ -0,0 +1,10 @@
+export { default as Carousel } from './Carousel.vue'
+export { default as CarouselContent } from './CarouselContent.vue'
+export { default as CarouselItem } from './CarouselItem.vue'
+export { default as CarouselNext } from './CarouselNext.vue'
+export { default as CarouselPrevious } from './CarouselPrevious.vue'
+export type {
+  UnwrapRefCarouselApi as CarouselApi,
+} from './interface'
+
+export { useCarousel } from './useCarousel'
diff --git a/packages/shadcn-vue/components/ui/carousel/interface.ts b/packages/shadcn-vue/components/ui/carousel/interface.ts
new file mode 100644
index 0000000..e2605be
--- /dev/null
+++ b/packages/shadcn-vue/components/ui/carousel/interface.ts
@@ -0,0 +1,26 @@
+import type useEmblaCarousel from 'embla-carousel-vue'
+import type {
+  EmblaCarouselVueType,
+} from 'embla-carousel-vue'
+import type { HTMLAttributes, UnwrapRef } from 'vue'
+
+type CarouselApi = EmblaCarouselVueType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+export type UnwrapRefCarouselApi = UnwrapRef<CarouselApi>
+
+export interface CarouselProps {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: 'horizontal' | 'vertical'
+}
+
+export interface CarouselEmits {
+  (e: 'init-api', payload: UnwrapRefCarouselApi): void
+}
+
+export interface WithClassAsProps {
+  class?: HTMLAttributes['class']
+}
diff --git a/packages/shadcn-vue/components/ui/carousel/useCarousel.ts b/packages/shadcn-vue/components/ui/carousel/useCarousel.ts
new file mode 100644
index 0000000..4c86651
--- /dev/null
+++ b/packages/shadcn-vue/components/ui/carousel/useCarousel.ts
@@ -0,0 +1,67 @@
+import type { Ref } from 'vue'
+import type { UnwrapRefCarouselApi as CarouselApi, CarouselEmits, CarouselProps } from './interface'
+import { createInjectionState } from '@vueuse/core'
+import emblaCarouselVue from 'embla-carousel-vue'
+import { onMounted, ref } from 'vue'
+
+interface CarouselContext {
+  carouselRef: Ref<HTMLElement | undefined>
+  carouselApi: Ref<CarouselApi | undefined>
+  canScrollPrev: Ref<boolean>
+  canScrollNext: Ref<boolean>
+  scrollPrev: () => void
+  scrollNext: () => void
+  orientation: 'horizontal' | 'vertical' | undefined
+}
+
+const [useProvideCarousel, useInjectCarousel] = createInjectionState(
+  ({
+    opts,
+    orientation,
+    plugins,
+  }: CarouselProps, emits: CarouselEmits): CarouselContext => {
+    const [emblaNode, emblaApi] = emblaCarouselVue({
+      ...opts,
+      axis: orientation === 'horizontal' ? 'x' : 'y',
+    }, plugins)
+
+    function scrollPrev() {
+      emblaApi.value?.scrollPrev()
+    }
+    function scrollNext() {
+      emblaApi.value?.scrollNext()
+    }
+
+    const canScrollNext = ref(false)
+    const canScrollPrev = ref(false)
+
+    function onSelect(api: CarouselApi) {
+      canScrollNext.value = api?.canScrollNext() || false
+      canScrollPrev.value = api?.canScrollPrev() || false
+    }
+
+    onMounted(() => {
+      if (!emblaApi.value)
+        return
+
+      emblaApi.value?.on('init', onSelect)
+      emblaApi.value?.on('reInit', onSelect)
+      emblaApi.value?.on('select', onSelect)
+
+      emits('init-api', emblaApi.value)
+    })
+
+    return { carouselRef: emblaNode, carouselApi: emblaApi, canScrollPrev, canScrollNext, scrollPrev, scrollNext, orientation }
+  },
+)
+
+function useCarousel() {
+  const carouselState = useInjectCarousel()
+
+  if (!carouselState)
+    throw new Error('useCarousel must be used within a <Carousel />')
+
+  return carouselState
+}
+
+export { useCarousel, useProvideCarousel }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 19e901d..bc6edbf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1277,72 +1277,84 @@ packages:
     engines: {node: '>=14.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-minify/binding-linux-arm64-gnu@0.87.0':
     resolution: {integrity: sha512-tf2Shom09AaSmu7U1hYYcEFF/cd+20HtmQ8eyGsRkqD5bqUj6lDu8TNSU9FWZ9tcZ83NzyFMwXZWHyeeIIbpxw==}
     engines: {node: '>=14.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-minify/binding-linux-arm64-musl@0.78.0':
     resolution: {integrity: sha512-q4x8hLW9JyHVS+AtKSt6Z4W+S+fXSCARBnizzW9mtND47atRiJzChOInlZUBgQhyDy3KQFt51aKIEDJpwysoEw==}
     engines: {node: '>=14.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@oxc-minify/binding-linux-arm64-musl@0.87.0':
     resolution: {integrity: sha512-pgWeYfSprtpnJVea9Q5eI6Eo80lDGlMw2JdcSMXmShtBjEhBl6bvDNHlV+6kNfh7iT65y/uC6FR8utFrRghu8A==}
     engines: {node: '>=14.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@oxc-minify/binding-linux-riscv64-gnu@0.78.0':
     resolution: {integrity: sha512-ajBxhoqW04KUI/fWewBf71WB2xdjce9VgF9rbLfQOBgCeCcyHMh+VKYjxBuWQamWrcABqt8Z5OIiRth9qt6CIg==}
     engines: {node: '>=14.0.0'}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-minify/binding-linux-riscv64-gnu@0.87.0':
     resolution: {integrity: sha512-O1QPczlT+lqNZVeKOdFxxL+s1RIlnixaJYFLrcqDcRyn82MGKLz7sAenBTFRQoIfLnSxtMGL6dqHOefYkQx7Cg==}
     engines: {node: '>=14.0.0'}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-minify/binding-linux-s390x-gnu@0.78.0':
     resolution: {integrity: sha512-H6B+h4Q3w/AtAr7EWScvDevxPKQPlhijMmSiMYRMkbTYwJPlUsBXyVj39Atdd1BIjCx8rYGvGxl/PhxPkdCjXQ==}
     engines: {node: '>=14.0.0'}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-minify/binding-linux-s390x-gnu@0.87.0':
     resolution: {integrity: sha512-tcwt3ZUWOKfNLXN2edxFVHMlIuPvbuyMaKmRopgljSCfFcNHWhfTNlxlvmECRNhuQ91EcGwte6F1dwoeMCNd7A==}
     engines: {node: '>=14.0.0'}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-minify/binding-linux-x64-gnu@0.78.0':
     resolution: {integrity: sha512-5vSPG67PVTwrzSPbXLofJtdSlb/lWyn36WElonLwecAtZX7v7KDhX0aUHqKSBsQ0qnJaYnhv5o0uUHudNZwq8g==}
     engines: {node: '>=14.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-minify/binding-linux-x64-gnu@0.87.0':
     resolution: {integrity: sha512-Xf4AXF14KXUzSnfgTcFLFSM0TykJhFw14+xwNvlAb6WdqXAKlMrz9joIAezc8dkW1NNscCVTsqBUPJ4RhvCM1Q==}
     engines: {node: '>=14.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-minify/binding-linux-x64-musl@0.78.0':
     resolution: {integrity: sha512-Iq7eeZkGFUbyo7zRrAIP6rNAH+lIft9VJQUbDhhnTIMJWLUZx9JkSmM+0NBRfxPeurxbzO3EToDZ2cCYtVEU0Q==}
     engines: {node: '>=14.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@oxc-minify/binding-linux-x64-musl@0.87.0':
     resolution: {integrity: sha512-LIqvpx9UihEW4n9QbEljDnfUdAWqhr6dRqmzSFwVAeLZRUECluLCDdsdwemrC/aZkvnisA4w0LFcFr3HmeTLJg==}
     engines: {node: '>=14.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@oxc-minify/binding-wasm32-wasi@0.78.0':
     resolution: {integrity: sha512-Bj2l/A6e32mZ2aPRDmlkDClMkbPe+dCWl4enPY+PCZNkhLLfLfcMFemCCWO44rdWCOCehWiP8Tr3QEe3yTR7kA==}
@@ -1521,144 +1533,168 @@ packages:
     engines: {node: '>=14.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-parser/binding-linux-arm64-gnu@0.78.0':
     resolution: {integrity: sha512-YbXJzCfZ6Tyupe/z0+OerL65JY9KU069Yh0G4mGMVNr7taW2jtsuUiV6CWdgNpXnXJTgKopjyHvc0g9yQsG2Rg==}
     engines: {node: '>=20.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-parser/binding-linux-arm64-gnu@0.87.0':
     resolution: {integrity: sha512-fcnnsfcyLamJOMVKq+BQ8dasb8gRnZtNpCUfZhaEFAdXQ7J2RmZreFzlygcn80iti0V7c5LejcjHbF4IdK3GAw==}
     engines: {node: '>=20.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-parser/binding-linux-arm64-gnu@0.93.0':
     resolution: {integrity: sha512-NoB7BJmwVGrcS/J5XXn362lBsIyeTqZF70rCFij3/XwQ2kcELfGMALY9AUulFYauLTY2AG4vcmctJQxn9Lj85g==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-parser/binding-linux-arm64-musl@0.70.0':
     resolution: {integrity: sha512-BJ+N25UWmHU624558ojSTnht3uFL00jV1c8qk1hnKf4cl6+ovFcoktRWAWSBlgLEP8tLlu8qgIhz875tMj2PkQ==}
     engines: {node: '>=14.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@oxc-parser/binding-linux-arm64-musl@0.78.0':
     resolution: {integrity: sha512-VBdPB2N37A+M49zPV8ziiFywlgE3VX3AnR+zT1cIdQyKDoFM3uGPtjmtRe1qw6KhFF5YtxInzb0v3E3VkSdhuQ==}
     engines: {node: '>=20.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@oxc-parser/binding-linux-arm64-musl@0.87.0':
     resolution: {integrity: sha512-tBPkSPgRSSbmrje8CUovISi/Hj/tWjZJ3n/qnrjx2B+u86hWtwLsngtPDQa5d4seSyDaHSx6tNEUcH7+g5Ee0Q==}
     engines: {node: '>=20.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@oxc-parser/binding-linux-arm64-musl@0.93.0':
     resolution: {integrity: sha512-s+nraJJR9SuHsgsr42nbOBpAsaSAE6MhK7HGbz01svLJzDsk3Ylh9cbVUPLaS3gOlTq5WC6VjPBkQuInLo0hvQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@oxc-parser/binding-linux-riscv64-gnu@0.70.0':
     resolution: {integrity: sha512-nxu22nVuPA2xy1cxvBC0D5mVl0myqStOw3XBkVkDViNL01iPyuEFJd5VsM0GqsgrXvF95H/jrbMd+XWnto924g==}
     engines: {node: '>=14.0.0'}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-parser/binding-linux-riscv64-gnu@0.78.0':
     resolution: {integrity: sha512-743OajvLP/fJm2d2da4/vqLMfki6XxfXizbUfPzEAXJMH0vEjf63s4gf55SBuy6hpmXOdCW5k4L6AoS+E89qtw==}
     engines: {node: '>=20.0.0'}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-parser/binding-linux-riscv64-gnu@0.87.0':
     resolution: {integrity: sha512-z4UKGM4wv2wEAQAlx2pBq6+pDJw5J/5oDEXqW6yBSLbWLjLDo4oagmRSE3+giOWteUa+0FVJ+ypq4iYxBkYSWg==}
     engines: {node: '>=20.0.0'}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-parser/binding-linux-riscv64-gnu@0.93.0':
     resolution: {integrity: sha512-oNIQb/7HGxVNeVgtkoqNcDS1hjfxArLDuMI72V+Slp67yfBdxgvfmM2JSWE7kGR5gyiZQeTjRbG89VrRwPDtww==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-parser/binding-linux-s390x-gnu@0.70.0':
     resolution: {integrity: sha512-AQ6Xj97lYRxHZl94cZIHJxT5M1qkeEi+vQe+e7M2lAtjcURl8cwhZmWKSv4rt4BQRVfO3ys0bY8AgIh4eFJiqw==}
     engines: {node: '>=14.0.0'}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-parser/binding-linux-s390x-gnu@0.78.0':
     resolution: {integrity: sha512-z3HVOr6F1PpKAxzwwG9NKfFmCCMMI8MbmxZ3l+UKKViFD9NlJYKx+Afye3SgHHTkYKEm3POgmmR4Aq3kKMP7sQ==}
     engines: {node: '>=20.0.0'}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-parser/binding-linux-s390x-gnu@0.87.0':
     resolution: {integrity: sha512-6W1ENe/nZtr2TBnrEzmdGEraEAdZOiH3YoUNNeQWuqwLkmpoHTJJdclieToPe/l2IKJ4WL3FsSLSGHE8yt/OEg==}
     engines: {node: '>=20.0.0'}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-parser/binding-linux-s390x-gnu@0.93.0':
     resolution: {integrity: sha512-YyzhzAoq5WpRtAGOngpJUu+4jKagSbknORejmpeW48vu8/+XjrVZFc/1Qe4i72EsPzLorDwCxWVkU8VftpM4iA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-parser/binding-linux-x64-gnu@0.70.0':
     resolution: {integrity: sha512-RIxaVsIxtG90CoX6/Okij8itaMrJp4SEJm1pSL0pz3hGo0yur3Il9M1mmGvOpW+avY8uHdwXIvf2qMnnTKZuoQ==}
     engines: {node: '>=14.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-parser/binding-linux-x64-gnu@0.78.0':
     resolution: {integrity: sha512-qJULpZeRsN0mfxasPh8EzzE7lsEEMEEtcprgw8QetB5l1Urz4gzKyeKdqs1vuxBl9o0s+WHSiowH2YqFMALs/g==}
     engines: {node: '>=20.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-parser/binding-linux-x64-gnu@0.87.0':
     resolution: {integrity: sha512-s3kB/Ii3X3IOZ27Iu7wx2zYkIcDO22Emu32SNC6kkUSy09dPBc1yaW14TnAkPMe/rvtuzR512JPWj3iGpl+Dng==}
     engines: {node: '>=20.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-parser/binding-linux-x64-gnu@0.93.0':
     resolution: {integrity: sha512-UMXsE6c0MIlvtqDe5t5K8qwC6HqNb3wmy8zKxONo42dIx0WAhVV9ydG2Xlznt1/RhD6nLLtHVaq4yWJXRjUxcg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-parser/binding-linux-x64-musl@0.70.0':
     resolution: {integrity: sha512-B3S0G4TlZ+WLdQq4mSQtt2ZW0MAkKWc8dla17tZY86kcXvvCWwACvj7I27Z/nSlb7uJOdRZS9/r6Gw0uAARNVQ==}
     engines: {node: '>=14.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@oxc-parser/binding-linux-x64-musl@0.78.0':
     resolution: {integrity: sha512-ctEL662Oe9Gaqf/48lsVZzAMcAcXIWsddZy59kGH7592rJBaXxmQhkOnnVEeJF25k4JMbCCdYwGsgI7WtC+Fdg==}
     engines: {node: '>=20.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@oxc-parser/binding-linux-x64-musl@0.87.0':
     resolution: {integrity: sha512-3+M9hfrZSDi4+Uy4Ll3rtOuVG3IHDQlj027jgtmAAHJK1eqp4CQfC7rrwE+LFUqUwX+KD2GwlxR+eHyyEf5Gbg==}
     engines: {node: '>=20.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@oxc-parser/binding-linux-x64-musl@0.93.0':
     resolution: {integrity: sha512-0Vd0yFUq129VW+Cpcj/gJOqub4EMN5hUWnVk8UfAvUZ+lxZBFeXbYNI5483SLwzvw5umzlMmkKpYWw5OTwYFaA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@oxc-parser/binding-wasm32-wasi@0.70.0':
     resolution: {integrity: sha512-QN8yxH7eHXTqed8Oo7ZUzOWn6hixXa8EVINLy21eLU9isoifSPKMswSmCXHxsM2L5rIIvzoaKfghGOru1mMQbw==}
@@ -1824,72 +1860,84 @@ packages:
     engines: {node: '>=14.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-transform/binding-linux-arm64-gnu@0.87.0':
     resolution: {integrity: sha512-BxFkIcso2V1+FCDoU+KctxvJzSQVSnEZ5EEQ8O3Up9EoFVQRnZ8ktXvqYj2Oqvc4IYPskLPsKUgc9gdK8wGhUg==}
     engines: {node: '>=14.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-transform/binding-linux-arm64-musl@0.78.0':
     resolution: {integrity: sha512-dr9J1uRo6ssDtuqx7s9GeePEDXlQOf4jk8/Tke9x5PCSJim5goMebEoAikuPf0jMhMNc05Kow0eOPLX1EmwsFQ==}
     engines: {node: '>=14.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@oxc-transform/binding-linux-arm64-musl@0.87.0':
     resolution: {integrity: sha512-MZ1/TNaebhXK73j1UDfwyBFnAy0tT3n6otOkhlt1vlJwqboUS/D7E/XrCZmAuHIfVPxAXRPovkl7kfxLB43SKw==}
     engines: {node: '>=14.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@oxc-transform/binding-linux-riscv64-gnu@0.78.0':
     resolution: {integrity: sha512-ALNvBi1l+17moTS2BtVZRxR0D1BGyR7iddNUJkHxEegvNzHyGJTZ60b0IXdvpCTH+CKUNsM40KxCVdzHca6VJQ==}
     engines: {node: '>=14.0.0'}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-transform/binding-linux-riscv64-gnu@0.87.0':
     resolution: {integrity: sha512-JCWE6n4Hicu0FVbvmLdH/dS8V6JykOUsbrbDYm6JwFlHr4eFTTlS2B+mh5KPOxcdeOlv/D/XRnvMJ6WGYs25EA==}
     engines: {node: '>=14.0.0'}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-transform/binding-linux-s390x-gnu@0.78.0':
     resolution: {integrity: sha512-s0r4cz6zZqr7SqfoUinn27B/mp1aiFVUsbsI4vomc7DtZkLpBSnSOAomZBlb0OSLbR9n2YPXm1033XR5W+ezWg==}
     engines: {node: '>=14.0.0'}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-transform/binding-linux-s390x-gnu@0.87.0':
     resolution: {integrity: sha512-n2NTgM+3PqFagJV9UXRDNOmYesF+TO9SF9FeHqwVmW893ayef9KK+vfWAAhvOYHXYaKWT5XoHd87ODD7nruyhw==}
     engines: {node: '>=14.0.0'}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-transform/binding-linux-x64-gnu@0.78.0':
     resolution: {integrity: sha512-nH9y61/1oyCQfUjtKHEnnMPBJZOhH+G2QqSAD7sCH35Iz78UA+bKVjHnlfnhBedy1xWCNwlboNclaBTHYAgNeA==}
     engines: {node: '>=14.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-transform/binding-linux-x64-gnu@0.87.0':
     resolution: {integrity: sha512-ZOKW3wx0bW2O7jGdOzr8DyLZqX2C36sXvJdsHj3IueZZ//d/NjLZqEiUKz+q0JlERHtCVKShQ5PLaCx7NpuqNg==}
     engines: {node: '>=14.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@oxc-transform/binding-linux-x64-musl@0.78.0':
     resolution: {integrity: sha512-Yo+pmsW49QNo4F4RoqOhfRxN9851Td/nc93ESQbzav9vhriipPRvZRVusG5t126inAgjlprFbOet5TXSWKd92A==}
     engines: {node: '>=14.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@oxc-transform/binding-linux-x64-musl@0.87.0':
     resolution: {integrity: sha512-eIspx/JqkVMPK1CAYEOo2J8o49s4ZTf+32MSMUknIN2ZS1fvRmWS0D/xFFaLP/9UGhdrXRIPbn/iSYEA8JnV/g==}
     engines: {node: '>=14.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@oxc-transform/binding-wasm32-wasi@0.78.0':
     resolution: {integrity: sha512-djA47tsuUwNPHqcxre+EMD/wBBaP+TP6kQt2ioC6XElRldHCEGBUsVidrS5rgN4O7SyKx/DuJ528locJKTDSPw==}
@@ -1954,36 +2002,42 @@ packages:
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@parcel/watcher-linux-arm-musl@2.5.1':
     resolution: {integrity: sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
+    libc: [musl]
 
   '@parcel/watcher-linux-arm64-glibc@2.5.1':
     resolution: {integrity: sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@parcel/watcher-linux-arm64-musl@2.5.1':
     resolution: {integrity: sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@parcel/watcher-linux-x64-glibc@2.5.1':
     resolution: {integrity: sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@parcel/watcher-linux-x64-musl@2.5.1':
     resolution: {integrity: sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@parcel/watcher-wasm@2.5.1':
     resolution: {integrity: sha512-RJxlQQLkaMMIuWRozy+z2vEqbaQlCuaCgVZIUCzQLYggY22LZbP5Y1+ia+FD724Ids9e+XIyOLXLrLgQSHIthw==}
@@ -2068,24 +2122,28 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@resvg/resvg-js-linux-arm64-musl@2.6.2':
     resolution: {integrity: sha512-3h3dLPWNgSsD4lQBJPb4f+kvdOSJHa5PjTYVsWHxLUzH4IFTJUAnmuWpw4KqyQ3NA5QCyhw4TWgxk3jRkQxEKg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@resvg/resvg-js-linux-x64-gnu@2.6.2':
     resolution: {integrity: sha512-IVUe+ckIerA7xMZ50duAZzwf1U7khQe2E0QpUxu5MBJNao5RqC0zwV/Zm965vw6D3gGFUl7j4m+oJjubBVoftw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@resvg/resvg-js-linux-x64-musl@2.6.2':
     resolution: {integrity: sha512-UOf83vqTzoYQO9SZ0fPl2ZIFtNIz/Rr/y+7X8XRX1ZnBYsQ/tTb+cj9TE+KHOdmlTFBxhYzVkP2lRByCzqi4jQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@resvg/resvg-js-win32-arm64-msvc@2.6.2':
     resolution: {integrity: sha512-7C/RSgCa+7vqZ7qAbItfiaAWhyRSoD4l4BQAbVDqRRsRgY+S+hgS3in0Rxr7IorKUpGE69X48q6/nOAuTJQxeQ==}
@@ -2234,56 +2292,67 @@ packages:
     resolution: {integrity: sha512-xRiOu9Of1FZ4SxVbB0iEDXc4ddIcjCv2aj03dmW8UrZIW7aIQ9jVJdLBIhxBI+MaTnGAKyvMwPwQnoOEvP7FgQ==}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.52.4':
     resolution: {integrity: sha512-FbhM2p9TJAmEIEhIgzR4soUcsW49e9veAQCziwbR+XWB2zqJ12b4i/+hel9yLiD8pLncDH4fKIPIbt5238341Q==}
     cpu: [arm]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.52.4':
     resolution: {integrity: sha512-4n4gVwhPHR9q/g8lKCyz0yuaD0MvDf7dV4f9tHt0C73Mp8h38UCtSCSE6R9iBlTbXlmA8CjpsZoujhszefqueg==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.52.4':
     resolution: {integrity: sha512-u0n17nGA0nvi/11gcZKsjkLj1QIpAuPFQbR48Subo7SmZJnGxDpspyw2kbpuoQnyK+9pwf3pAoEXerJs/8Mi9g==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-loong64-gnu@4.52.4':
     resolution: {integrity: sha512-0G2c2lpYtbTuXo8KEJkDkClE/+/2AFPdPAbmaHoE870foRFs4pBrDehilMcrSScrN/fB/1HTaWO4bqw+ewBzMQ==}
     cpu: [loong64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-ppc64-gnu@4.52.4':
     resolution: {integrity: sha512-teSACug1GyZHmPDv14VNbvZFX779UqWTsd7KtTM9JIZRDI5NUwYSIS30kzI8m06gOPB//jtpqlhmraQ68b5X2g==}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-gnu@4.52.4':
     resolution: {integrity: sha512-/MOEW3aHjjs1p4Pw1Xk4+3egRevx8Ji9N6HUIA1Ifh8Q+cg9dremvFCUbOX2Zebz80BwJIgCBUemjqhU5XI5Eg==}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-musl@4.52.4':
     resolution: {integrity: sha512-1HHmsRyh845QDpEWzOFtMCph5Ts+9+yllCrREuBR/vg2RogAQGGBRC8lDPrPOMnrdOJ+mt1WLMOC2Kao/UwcvA==}
     cpu: [riscv64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-s390x-gnu@4.52.4':
     resolution: {integrity: sha512-seoeZp4L/6D1MUyjWkOMRU6/iLmCU2EjbMTyAG4oIOs1/I82Y5lTeaxW0KBfkUdHAWN7j25bpkt0rjnOgAcQcA==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.52.4':
     resolution: {integrity: sha512-Wi6AXf0k0L7E2gteNsNHUs7UMwCIhsCTs6+tqQ5GPwVRWMaflqGec4Sd8n6+FNFDw9vGcReqk2KzBDhCa1DLYg==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.52.4':
     resolution: {integrity: sha512-dtBZYjDmCQ9hW+WgEkaffvRRCKm767wWhxsFW3Lw86VXz/uJRuD438/XvbZT//B96Vs8oTA8Q4A0AfHbrxP9zw==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-openharmony-arm64@4.52.4':
     resolution: {integrity: sha512-1ox+GqgRWqaB1RnyZXL8PD6E5f7YyRUJYnCqKpNzxzP0TkaUh112NDrR9Tt+C8rJ4x5G9Mk8PQR3o7Ku2RKqKA==}
@@ -2417,24 +2486,28 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@tailwindcss/oxide-linux-arm64-musl@4.1.14':
     resolution: {integrity: sha512-ISZjT44s59O8xKsPEIesiIydMG/sCXoMBCqsphDm/WcbnuWLxxb+GcvSIIA5NjUw6F8Tex7s5/LM2yDy8RqYBQ==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@tailwindcss/oxide-linux-x64-gnu@4.1.14':
     resolution: {integrity: sha512-02c6JhLPJj10L2caH4U0zF8Hji4dOeahmuMl23stk0MU1wfd1OraE7rOloidSF8W5JTHkFdVo/O7uRUJJnUAJg==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@tailwindcss/oxide-linux-x64-musl@4.1.14':
     resolution: {integrity: sha512-TNGeLiN1XS66kQhxHG/7wMeQDOoL0S33x9BgmydbrWAb9Qw0KYdd8o1ifx4HOGDWhVmJ+Ul+JQ7lyknQFilO3Q==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@tailwindcss/oxide-wasm32-wasi@4.1.14':
     resolution: {integrity: sha512-uZYAsaW/jS/IYkd6EWPJKW/NlPNSkWkBlaeVBi/WsFQNP05/bzkebUL8FH1pdsqx4f2fH/bWFcUABOM9nfiJkQ==}
@@ -5086,24 +5159,28 @@ packages:
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-arm64-musl@1.30.1:
     resolution: {integrity: sha512-jmUQVx4331m6LIX+0wUhBbmMX7TCfjF5FoOH6SD1CttzuYlGNVpA7QnrmLxrsub43ClTINfGSYyHe2HWeLl5CQ==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-linux-x64-gnu@1.30.1:
     resolution: {integrity: sha512-piWx3z4wN8J8z3+O5kO74+yr6ze/dKmPnI7vLqfSqI8bccaTGY5xiSGVIJBDd5K5BHlvVLpUB3S2YCfelyJ1bw==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-x64-musl@1.30.1:
     resolution: {integrity: sha512-rRomAK7eIkL+tHY0YPxbc5Dra2gXlI63HL+v1Pdi1a3sC+tJTcFrHX+E86sulgAXeI7rSzDYhPSeHHjqFhqfeQ==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-win32-arm64-msvc@1.30.1:
     resolution: {integrity: sha512-mSL4rqPi4iXq5YVqzSsJgMVFENoa4nGTT/GjO2c0Yl9OuQfPsIfncvLrEW6RbbB24WtZ3xP/2CCmI3tNkNV4oA==}