diff --git a/apps/test/app/examples/index.ts b/apps/test/app/examples/index.ts
index e265c23..c828671 100644
--- a/apps/test/app/examples/index.ts
+++ b/apps/test/app/examples/index.ts
@@ -8,6 +8,7 @@ export { default as Loader } from './loader.vue'
 export { default as MessageMarkdown } from './message-markdown.vue'
 export { default as Message } from './message.vue'
 export { default as OpenInChat } from './open-in-chat.vue'
+export { default as Plan } from './plan.vue'
 export { default as PromptInput } from './prompt-input.vue'
 export { default as Response } from './response.vue'
 export { default as Shimmer } from './shimmer.vue'
diff --git a/apps/test/app/examples/plan.vue b/apps/test/app/examples/plan.vue
new file mode 100644
index 0000000..d31e0fc
--- /dev/null
+++ b/apps/test/app/examples/plan.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import {
+  Plan,
+  PlanAction,
+  PlanContent,
+  PlanDescription,
+  PlanFooter,
+  PlanHeader,
+  PlanTitle,
+  PlanTrigger,
+} from '@repo/elements/plan'
+import { Button } from '@repo/shadcn-vue/components/ui/button'
+import { Kbd, KbdGroup } from '@repo/shadcn-vue/components/ui/kbd'
+import { FileText } from 'lucide-vue-next'
+</script>
+
+<template>
+  <Plan :default-open="false">
+    <PlanHeader>
+      <div>
+        <div class="mb-4 flex items-center gap-2">
+          <FileText class="size-4" />
+          <PlanTitle>Rewrite AI Elements to VueJS</PlanTitle>
+        </div>
+        <PlanDescription>
+          Rewrite the AI Elements component library from React to VueJS while
+          maintaining compatibility with existing React-based shadcn/ui
+          components using vue-js/compat, updating all 29 components and their
+          test suite.
+        </PlanDescription>
+      </div>
+      <PlanTrigger />
+    </PlanHeader>
+    <PlanContent>
+      <div class="space-y-4 text-sm">
+        <div>
+          <h3 class="mb-2 font-semibold">
+            Overview
+          </h3>
+          <p>
+            This plan outlines the migration strategy for converting the AI
+            Elements library from React to VueJS, ensuring compatibility and
+            maintaining existing functionality.
+          </p>
+        </div>
+        <div>
+          <h3 class="mb-2 font-semibold">
+            Key Steps
+          </h3>
+          <ul class="list-inside list-disc space-y-1">
+            <li>Set up VueJS project structure</li>
+            <li>Install vue-js/compat for React compatibility</li>
+            <li>Migrate components one by one</li>
+            <li>Update test suite for each component</li>
+            <li>Verify compatibility with shadcn/ui</li>
+          </ul>
+        </div>
+      </div>
+    </PlanContent>
+    <PlanFooter class="justify-end">
+      <PlanAction>
+        <Button size="sm">
+          Build
+          <KbdGroup class="gap-0">
+            <Kbd class="bg-transparent text-inherit">⌘</Kbd>
+            <Kbd class="translate-y-px bg-transparent text-inherit">↩</Kbd>
+          </KbdGroup>
+        </Button>
+      </PlanAction>
+    </PlanFooter>
+  </Plan>
+</template>
diff --git a/apps/test/app/pages/index.vue b/apps/test/app/pages/index.vue
index 49d8f3e..25492a1 100644
--- a/apps/test/app/pages/index.vue
+++ b/apps/test/app/pages/index.vue
@@ -10,6 +10,7 @@ import Loader from '~/examples/loader.vue'
 import MessageMarkdown from '~/examples/message-markdown.vue'
 import Message from '~/examples/message.vue'
 import OpenInChat from '~/examples/open-in-chat.vue'
+import Plan from '~/examples/plan.vue'
 import PromptInput from '~/examples/prompt-input.vue'
 import Response from '~/examples/response.vue'
 import Shimmer from '~/examples/shimmer.vue'
@@ -34,6 +35,7 @@ const components = [
   { name: 'OpenInChat', Component: OpenInChat },
   { name: 'Loader', Component: Loader },
   { name: 'Sources', Component: Sources },
+  { name: 'Plan', Component: Plan },
 ]
 </script>
 
diff --git a/apps/www/content/2.components/plan.md b/apps/www/content/2.components/plan.md
new file mode 100644
index 0000000..038712f
--- /dev/null
+++ b/apps/www/content/2.components/plan.md
@@ -0,0 +1,330 @@
+---
+title: Plan
+description:
+icon: lucide:map
+---
+
+The `Plan` component provides a flexible system for displaying AI-generated execution plans with collapsible content. Perfect for showing multi-step workflows, task breakdowns, and implementation strategies with support for streaming content and loading states.
+
+:::ComponentLoader{label="Preview" componentName="Plan"}
+:::
+
+## Install using CLI
+
+::tabs{variant="card"}
+  ::div{label="ai-elements-vue"}
+  ```sh
+  npx ai-elements-vue@latest add plan
+  ```
+  ::
+  ::div{label="shadcn-vue"}
+
+  ```sh
+  npx shadcn-vue@latest add https://registry.ai-elements-vue.com/plan.json
+  ```
+  ::
+::
+
+## Install Manually
+
+Copy and paste the following code in the same folder.
+
+:::code-group
+```vue [Plan.vue]
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { Card } from '@repo/shadcn-vue/components/ui/card'
+import { Collapsible } from '@repo/shadcn-vue/components/ui/collapsible'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { computed } from 'vue'
+import { providePlan } from './context'
+
+interface PlanProps {
+  isStreaming?: boolean
+  class?: HTMLAttributes['class']
+}
+
+const props = withDefaults(
+  defineProps<PlanProps>(),
+  {
+    isStreaming: false,
+  },
+)
+
+providePlan({
+  isStreaming: computed(() => props.isStreaming),
+})
+</script>
+
+<template>
+  <Collapsible as-child data-slot="plan" v-bind="props">
+    <Card :class="cn('shadow-none', props.class)">
+      <slot />
+    </Card>
+  </Collapsible>
+</template>
+```
+
+```vue [PlanHeader.vue]
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { CardHeader } from '@repo/shadcn-vue/components/ui/card'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <CardHeader
+    :class="cn('flex flex-row items-start justify-between', props.class)"
+    data-slot="plan-header"
+  >
+    <slot />
+  </CardHeader>
+</template>
+```
+
+```vue [PlanTitle.vue]
+<script setup lang="ts">
+import { CardTitle } from '@repo/shadcn-vue/components/ui/card'
+import { Shimmer } from '../shimmer'
+import { usePlan } from './context'
+
+const { isStreaming } = usePlan()
+</script>
+
+<template>
+  <CardTitle data-slot="plan-title" v-bind="$attrs">
+    <Shimmer v-if="isStreaming">
+      <slot />
+    </Shimmer>
+    <slot v-else />
+  </CardTitle>
+</template>
+```
+
+```vue [PlanDescription.vue]
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { CardDescription } from '@repo/shadcn-vue/components/ui/card'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { Shimmer } from '../shimmer'
+import { usePlan } from './context'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const { isStreaming } = usePlan()
+</script>
+
+<template>
+  <CardDescription
+    :class="cn('text-balance', props.class)"
+    data-slot="plan-description"
+  >
+    <Shimmer v-if="isStreaming">
+      <slot />
+    </Shimmer>
+    <slot v-else />
+  </CardDescription>
+</template>
+```
+
+```vue [PlanAction.vue]
+<script setup lang="ts">
+import { CardAction } from '@repo/shadcn-vue/components/ui/card'
+</script>
+
+<template>
+  <CardAction data-slot="plan-action">
+    <slot />
+  </CardAction>
+</template>
+```
+
+```vue [PlanContent.vue]
+<script setup lang="ts">
+import { CardContent } from '@repo/shadcn-vue/components/ui/card'
+import { CollapsibleContent } from '@repo/shadcn-vue/components/ui/collapsible'
+</script>
+
+<template>
+  <CollapsibleContent as-child>
+    <CardContent data-slot="plan-content">
+      <slot />
+    </CardContent>
+  </CollapsibleContent>
+</template>
+```
+
+```vue [PlanFooter.vue]
+<script setup lang="ts">
+import { CardFooter } from '@repo/shadcn-vue/components/ui/card'
+</script>
+
+<template>
+  <CardFooter data-slot="plan-footer">
+    <slot />
+  </CardFooter>
+</template>
+```
+
+```vue [PlanTrigger.vue]
+<script setup lang="ts">
+import { Button } from '@repo/shadcn-vue/components/ui/button'
+import { CollapsibleTrigger } from '@repo/shadcn-vue/components/ui/collapsible'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { ChevronsUpDownIcon } from 'lucide-vue-next'
+
+const props = defineProps<{
+  class?: string
+}>()
+</script>
+
+<template>
+  <CollapsibleTrigger as-child>
+    <Button
+      :class="cn('size-8', props.class)"
+      data-slot="plan-trigger"
+      size="icon"
+      variant="ghost"
+    >
+      <ChevronsUpDownIcon class="size-4" />
+      <span class="sr-only">Toggle plan</span>
+    </Button>
+  </CollapsibleTrigger>
+</template>
+```
+
+```ts [context.ts]
+import type { ComputedRef, InjectionKey } from 'vue'
+import { inject, provide } from 'vue'
+
+export interface PlanContextValue {
+  isStreaming: ComputedRef<boolean>
+}
+
+export const PlanKey: InjectionKey<PlanContextValue> = Symbol('PlanContext')
+
+export function providePlan(value: PlanContextValue) {
+  provide(PlanKey, value)
+}
+
+export function usePlan() {
+  const context = inject(PlanKey)
+  if (!context) {
+    throw new Error('Plan components must be used within a Plan component')
+  }
+  return context
+}
+```
+
+```ts [index.ts]
+export { default as Plan } from './Plan.vue'
+export { default as PlanAction } from './PlanAction.vue'
+export { default as PlanContent } from './PlanContent.vue'
+export { default as PlanDescription } from './PlanDescription.vue'
+export { default as PlanFooter } from './PlanFooter.vue'
+export { default as PlanHeader } from './PlanHeader.vue'
+export { default as PlanTitle } from './PlanTitle.vue'
+export { default as PlanTrigger } from './PlanTrigger.vue'
+```
+:::
+
+## Usage
+
+```ts
+import {
+  Plan,
+  PlanAction,
+  PlanContent,
+  PlanDescription,
+  PlanFooter,
+  PlanHeader,
+  PlanTitle,
+  PlanTrigger,
+} from '@/components/ai-elements/plan'
+```
+
+```vue
+<Plan :default-open="false">
+  <PlanHeader>
+    <div>
+      <PlanTitle>Implement new feature</PlanTitle>
+      <PlanDescription>
+        Add authentication system with JWT tokens and refresh logic.
+      </PlanDescription>
+    </div>
+    <PlanTrigger />
+  </PlanHeader>
+  <PlanContent>
+    <div className="space-y-4 text-sm">
+      <div>
+        <h3 className="mb-2 font-semibold">Overview</h3>
+        <p>This plan outlines the implementation strategy...</p>
+      </div>
+    </div>
+  </PlanContent>
+  <PlanFooter>
+    <Button>Execute Plan</Button>
+  </PlanFooter>
+</Plan>
+```
+
+## Features
+
+- Collapsible content with smooth animations
+- Streaming support with shimmer loading states
+- Built on shadcn-vue Card and Collapsible components
+- TypeScript support with comprehensive type definitions
+- Customizable styling with Tailwind CSS
+- Responsive design with mobile-friendly interactions
+- Keyboard navigation and accessibility support
+- Theme-aware with automatic dark mode support
+- Context-based state management for streaming
+
+## Props
+
+### `<Plan />`
+
+:::field-group
+  ::field{name="isStreaming" type="boolean" defaultValue="false"}
+  Whether content is currently streaming. Enables shimmer animations on title and description. Defaults to false.
+  ::
+
+  ::field{name="defaultOpen" type="boolean" defaultValue="false"}
+  Whether the plan is expanded by default.
+  ::
+
+  ::field{name="class" type="string"}
+  Additional classes applied to the component.
+  ::
+:::
+
+### `<PlanHeader />`
+
+:::field-group
+  ::field{name="class" type="string"}
+  Additional classes applied to the component.
+  ::
+:::
+
+### `<PlanDescription />`
+
+:::field-group
+  ::field{name="class" type="string"}
+  Additional classes applied to the component.
+  ::
+:::
+
+### `<PlanTrigger />`
+
+:::field-group
+  ::field{name="class" type="string"}
+  Additional classes applied to the component.
+  ::
+:::
+:::
diff --git a/apps/www/plugins/ai-elements.ts b/apps/www/plugins/ai-elements.ts
index dbe6625..7496b48 100644
--- a/apps/www/plugins/ai-elements.ts
+++ b/apps/www/plugins/ai-elements.ts
@@ -10,6 +10,7 @@ import {
   Message,
   MessageMarkdown,
   OpenInChat,
+  Plan,
   PromptInput,
   Response,
   Shimmer,
@@ -52,4 +53,5 @@ export default defineNuxtPlugin((nuxtApp) => {
   vueApp.component('Loader', Loader)
   vueApp.component('LoaderCustomStyling', LoaderCustomStyling)
   vueApp.component('LoaderSizes', LoaderSizes)
+  vueApp.component('Plan', Plan)
 })
diff --git a/packages/elements/src/index.ts b/packages/elements/src/index.ts
index d225185..9ef7cf9 100644
--- a/packages/elements/src/index.ts
+++ b/packages/elements/src/index.ts
@@ -6,6 +6,7 @@ export * from './image'
 export * from './loader'
 export * from './message'
 export * from './open-in-chat'
+export * from './plan'
 export * from './prompt-input'
 export * from './response'
 export * from './shimmer'
diff --git a/packages/elements/src/plan/Plan.vue b/packages/elements/src/plan/Plan.vue
new file mode 100644
index 0000000..294a666
--- /dev/null
+++ b/packages/elements/src/plan/Plan.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { Card } from '@repo/shadcn-vue/components/ui/card'
+import { Collapsible } from '@repo/shadcn-vue/components/ui/collapsible'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { computed } from 'vue'
+import { providePlan } from './context'
+
+interface PlanProps {
+  isStreaming?: boolean
+  class?: HTMLAttributes['class']
+}
+
+const props = withDefaults(
+  defineProps<PlanProps>(),
+  {
+    isStreaming: false,
+  },
+)
+
+providePlan({
+  isStreaming: computed(() => props.isStreaming),
+})
+</script>
+
+<template>
+  <Collapsible as-child data-slot="plan" v-bind="props">
+    <Card :class="cn('shadow-none', props.class)">
+      <slot />
+    </Card>
+  </Collapsible>
+</template>
diff --git a/packages/elements/src/plan/PlanAction.vue b/packages/elements/src/plan/PlanAction.vue
new file mode 100644
index 0000000..bdf9587
--- /dev/null
+++ b/packages/elements/src/plan/PlanAction.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { CardAction } from '@repo/shadcn-vue/components/ui/card'
+</script>
+
+<template>
+  <CardAction data-slot="plan-action">
+    <slot />
+  </CardAction>
+</template>
diff --git a/packages/elements/src/plan/PlanContent.vue b/packages/elements/src/plan/PlanContent.vue
new file mode 100644
index 0000000..229d921
--- /dev/null
+++ b/packages/elements/src/plan/PlanContent.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { CardContent } from '@repo/shadcn-vue/components/ui/card'
+import { CollapsibleContent } from '@repo/shadcn-vue/components/ui/collapsible'
+</script>
+
+<template>
+  <CollapsibleContent as-child>
+    <CardContent data-slot="plan-content">
+      <slot />
+    </CardContent>
+  </CollapsibleContent>
+</template>
diff --git a/packages/elements/src/plan/PlanDescription.vue b/packages/elements/src/plan/PlanDescription.vue
new file mode 100644
index 0000000..93d4085
--- /dev/null
+++ b/packages/elements/src/plan/PlanDescription.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { CardDescription } from '@repo/shadcn-vue/components/ui/card'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { Shimmer } from '../shimmer'
+import { usePlan } from './context'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const { isStreaming } = usePlan()
+</script>
+
+<template>
+  <CardDescription
+    :class="cn('text-balance', props.class)"
+    data-slot="plan-description"
+  >
+    <Shimmer v-if="isStreaming">
+      <slot />
+    </Shimmer>
+    <slot v-else />
+  </CardDescription>
+</template>
diff --git a/packages/elements/src/plan/PlanFooter.vue b/packages/elements/src/plan/PlanFooter.vue
new file mode 100644
index 0000000..cd7b3ad
--- /dev/null
+++ b/packages/elements/src/plan/PlanFooter.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { CardFooter } from '@repo/shadcn-vue/components/ui/card'
+</script>
+
+<template>
+  <CardFooter data-slot="plan-footer">
+    <slot />
+  </CardFooter>
+</template>
diff --git a/packages/elements/src/plan/PlanHeader.vue b/packages/elements/src/plan/PlanHeader.vue
new file mode 100644
index 0000000..49fe463
--- /dev/null
+++ b/packages/elements/src/plan/PlanHeader.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { CardHeader } from '@repo/shadcn-vue/components/ui/card'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <CardHeader
+    :class="cn('flex flex-row items-start justify-between', props.class)"
+    data-slot="plan-header"
+  >
+    <slot />
+  </CardHeader>
+</template>
diff --git a/packages/elements/src/plan/PlanTitle.vue b/packages/elements/src/plan/PlanTitle.vue
new file mode 100644
index 0000000..05e9ab8
--- /dev/null
+++ b/packages/elements/src/plan/PlanTitle.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { CardTitle } from '@repo/shadcn-vue/components/ui/card'
+import { Shimmer } from '../shimmer'
+import { usePlan } from './context'
+
+const { isStreaming } = usePlan()
+</script>
+
+<template>
+  <CardTitle data-slot="plan-title" v-bind="$attrs">
+    <Shimmer v-if="isStreaming">
+      <slot />
+    </Shimmer>
+    <slot v-else />
+  </CardTitle>
+</template>
diff --git a/packages/elements/src/plan/PlanTrigger.vue b/packages/elements/src/plan/PlanTrigger.vue
new file mode 100644
index 0000000..2f48d6e
--- /dev/null
+++ b/packages/elements/src/plan/PlanTrigger.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { Button } from '@repo/shadcn-vue/components/ui/button'
+import { CollapsibleTrigger } from '@repo/shadcn-vue/components/ui/collapsible'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { ChevronsUpDownIcon } from 'lucide-vue-next'
+
+const props = defineProps<{
+  class?: string
+}>()
+</script>
+
+<template>
+  <CollapsibleTrigger as-child>
+    <Button
+      :class="cn('size-8', props.class)"
+      data-slot="plan-trigger"
+      size="icon"
+      variant="ghost"
+    >
+      <ChevronsUpDownIcon class="size-4" />
+      <span class="sr-only">Toggle plan</span>
+    </Button>
+  </CollapsibleTrigger>
+</template>
diff --git a/packages/elements/src/plan/context.ts b/packages/elements/src/plan/context.ts
new file mode 100644
index 0000000..f276035
--- /dev/null
+++ b/packages/elements/src/plan/context.ts
@@ -0,0 +1,20 @@
+import type { ComputedRef, InjectionKey } from 'vue'
+import { inject, provide } from 'vue'
+
+export interface PlanContextValue {
+  isStreaming: ComputedRef<boolean>
+}
+
+export const PlanKey: InjectionKey<PlanContextValue> = Symbol('PlanContext')
+
+export function providePlan(value: PlanContextValue) {
+  provide(PlanKey, value)
+}
+
+export function usePlan() {
+  const context = inject(PlanKey)
+  if (!context) {
+    throw new Error('Plan components must be used within a Plan component')
+  }
+  return context
+}
diff --git a/packages/elements/src/plan/index.ts b/packages/elements/src/plan/index.ts
new file mode 100644
index 0000000..702cd7a
--- /dev/null
+++ b/packages/elements/src/plan/index.ts
@@ -0,0 +1,8 @@
+export { default as Plan } from './Plan.vue'
+export { default as PlanAction } from './PlanAction.vue'
+export { default as PlanContent } from './PlanContent.vue'
+export { default as PlanDescription } from './PlanDescription.vue'
+export { default as PlanFooter } from './PlanFooter.vue'
+export { default as PlanHeader } from './PlanHeader.vue'
+export { default as PlanTitle } from './PlanTitle.vue'
+export { default as PlanTrigger } from './PlanTrigger.vue'
diff --git a/packages/examples/src/index.ts b/packages/examples/src/index.ts
index 8848e7b..7b2c3f1 100644
--- a/packages/examples/src/index.ts
+++ b/packages/examples/src/index.ts
@@ -9,6 +9,7 @@ export { default as Loader } from './loader.vue'
 export { default as MessageMarkdown } from './message-markdown.vue'
 export { default as Message } from './message.vue'
 export { default as OpenInChat } from './open-in-chat.vue'
+export { default as Plan } from './plan.vue'
 export { default as PromptInput } from './prompt-input.vue'
 export { default as Response } from './response.vue'
 export { default as ShimmerCustomElements } from './shimmer-custom-elements.vue'
diff --git a/packages/examples/src/plan.vue b/packages/examples/src/plan.vue
new file mode 100644
index 0000000..d31e0fc
--- /dev/null
+++ b/packages/examples/src/plan.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import {
+  Plan,
+  PlanAction,
+  PlanContent,
+  PlanDescription,
+  PlanFooter,
+  PlanHeader,
+  PlanTitle,
+  PlanTrigger,
+} from '@repo/elements/plan'
+import { Button } from '@repo/shadcn-vue/components/ui/button'
+import { Kbd, KbdGroup } from '@repo/shadcn-vue/components/ui/kbd'
+import { FileText } from 'lucide-vue-next'
+</script>
+
+<template>
+  <Plan :default-open="false">
+    <PlanHeader>
+      <div>
+        <div class="mb-4 flex items-center gap-2">
+          <FileText class="size-4" />
+          <PlanTitle>Rewrite AI Elements to VueJS</PlanTitle>
+        </div>
+        <PlanDescription>
+          Rewrite the AI Elements component library from React to VueJS while
+          maintaining compatibility with existing React-based shadcn/ui
+          components using vue-js/compat, updating all 29 components and their
+          test suite.
+        </PlanDescription>
+      </div>
+      <PlanTrigger />
+    </PlanHeader>
+    <PlanContent>
+      <div class="space-y-4 text-sm">
+        <div>
+          <h3 class="mb-2 font-semibold">
+            Overview
+          </h3>
+          <p>
+            This plan outlines the migration strategy for converting the AI
+            Elements library from React to VueJS, ensuring compatibility and
+            maintaining existing functionality.
+          </p>
+        </div>
+        <div>
+          <h3 class="mb-2 font-semibold">
+            Key Steps
+          </h3>
+          <ul class="list-inside list-disc space-y-1">
+            <li>Set up VueJS project structure</li>
+            <li>Install vue-js/compat for React compatibility</li>
+            <li>Migrate components one by one</li>
+            <li>Update test suite for each component</li>
+            <li>Verify compatibility with shadcn/ui</li>
+          </ul>
+        </div>
+      </div>
+    </PlanContent>
+    <PlanFooter class="justify-end">
+      <PlanAction>
+        <Button size="sm">
+          Build
+          <KbdGroup class="gap-0">
+            <Kbd class="bg-transparent text-inherit">⌘</Kbd>
+            <Kbd class="translate-y-px bg-transparent text-inherit">↩</Kbd>
+          </KbdGroup>
+        </Button>
+      </PlanAction>
+    </PlanFooter>
+  </Plan>
+</template>
diff --git a/packages/shadcn-vue/components/ui/kbd/Kbd.vue b/packages/shadcn-vue/components/ui/kbd/Kbd.vue
new file mode 100644
index 0000000..bb9b449
--- /dev/null
+++ b/packages/shadcn-vue/components/ui/kbd/Kbd.vue
@@ -0,0 +1,21 @@
+<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>
+  <kbd
+    :class="cn(
+      'bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none',
+      '[&_svg:not([class*=\'size-\'])]:size-3',
+      '[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10',
+      props.class,
+    )"
+  >
+    <slot />
+  </kbd>
+</template>
diff --git a/packages/shadcn-vue/components/ui/kbd/KbdGroup.vue b/packages/shadcn-vue/components/ui/kbd/KbdGroup.vue
new file mode 100644
index 0000000..415be1d
--- /dev/null
+++ b/packages/shadcn-vue/components/ui/kbd/KbdGroup.vue
@@ -0,0 +1,17 @@
+<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>
+  <kbd
+    data-slot="kbd-group"
+    :class="cn('inline-flex items-center gap-1', props.class)"
+  >
+    <slot />
+  </kbd>
+</template>
diff --git a/packages/shadcn-vue/components/ui/kbd/index.ts b/packages/shadcn-vue/components/ui/kbd/index.ts
new file mode 100644
index 0000000..ea722ab
--- /dev/null
+++ b/packages/shadcn-vue/components/ui/kbd/index.ts
@@ -0,0 +1,2 @@
+export { default as Kbd } from './Kbd.vue'
+export { default as KbdGroup } from './KbdGroup.vue'