diff --git a/apps/www/content/3.components/1.chatbot/reasoning.md b/apps/www/content/3.components/1.chatbot/reasoning.md
new file mode 100644
index 0000000..52beb34
--- /dev/null
+++ b/apps/www/content/3.components/1.chatbot/reasoning.md
@@ -0,0 +1,443 @@
+---
+title: Reasoning
+description: A collapsible component that displays AI reasoning content, automatically opening during streaming and closing when finished.
+icon: lucide:brain-circuit
+---
+
+The `Reasoning` component is a collapsible component that displays AI reasoning content, automatically opening during streaming and closing when finished.
+
+:::ComponentLoader{label="Preview" componentName="Reasoning"}
+:::
+
+## Install using CLI
+
+::tabs{variant="card"}
+  ::div{label="ai-elements-vue"}
+  ```sh
+  npx ai-elements-vue@latest add reasoning
+  ```
+  ::
+  ::div{label="shadcn-vue"}
+
+  ```sh
+  npx shadcn-vue@latest add https://registry.ai-elements-vue.com/reasoning.json
+  ```
+  ::
+::
+
+## Install Manually
+
+Copy and paste the following code in the same folder.
+
+:::code-group
+```vue [Reasoning.vue] height=300 collapse
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { Collapsible } from '@repo/shadcn-vue/components/ui/collapsible'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { useVModel } from '@vueuse/core'
+import { computed, provide, ref, watch } from 'vue'
+import { ReasoningKey } from './context'
+
+interface Props {
+  class?: HTMLAttributes['class']
+  isStreaming?: boolean
+  open?: boolean
+  defaultOpen?: boolean
+  duration?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isStreaming: false,
+  defaultOpen: true,
+  duration: undefined,
+})
+
+const emit = defineEmits<{
+  (e: 'update:open', value: boolean): void
+  (e: 'update:duration', value: number): void
+}>()
+
+const isOpen = useVModel(props, 'open', emit, {
+  defaultValue: props.defaultOpen,
+  passive: true,
+})
+
+const internalDuration = ref<number | undefined>(props.duration)
+
+watch(() => props.duration, (newVal) => {
+  internalDuration.value = newVal
+})
+
+function updateDuration(val: number) {
+  internalDuration.value = val
+  emit('update:duration', val)
+}
+
+const hasAutoClosed = ref(false)
+const startTime = ref<number | null>(null)
+
+const MS_IN_S = 1000
+const AUTO_CLOSE_DELAY = 1000
+
+watch(() => props.isStreaming, (streaming) => {
+  if (streaming) {
+    isOpen.value = true
+
+    if (startTime.value === null) {
+      startTime.value = Date.now()
+    }
+  }
+  else if (startTime.value !== null) {
+    const calculatedDuration = Math.ceil((Date.now() - startTime.value) / MS_IN_S)
+    updateDuration(calculatedDuration)
+    startTime.value = null
+  }
+})
+
+watch([() => props.isStreaming, isOpen, () => props.defaultOpen, hasAutoClosed], (_, __, onCleanup) => {
+  if (props.defaultOpen && !props.isStreaming && isOpen.value && !hasAutoClosed.value) {
+    const timer = setTimeout(() => {
+      isOpen.value = false
+      hasAutoClosed.value = true
+    }, AUTO_CLOSE_DELAY)
+
+    onCleanup(() => clearTimeout(timer))
+  }
+}, { immediate: true })
+
+provide(ReasoningKey, {
+  isStreaming: computed(() => props.isStreaming),
+  isOpen,
+  setIsOpen: (val: boolean) => { isOpen.value = val },
+  duration: computed(() => internalDuration.value),
+})
+</script>
+
+<template>
+  <Collapsible
+    v-model:open="isOpen"
+    :class="cn('not-prose mb-4', props.class)"
+  >
+    <slot />
+  </Collapsible>
+</template>
+```
+
+```vue [ReasoningTrigger.vue] height=300 collapse
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { CollapsibleTrigger } from '@repo/shadcn-vue/components/ui/collapsible'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { BrainIcon, ChevronDownIcon } from 'lucide-vue-next'
+import { computed } from 'vue'
+import { Shimmer } from '../shimmer'
+import { useReasoningContext } from './context'
+
+interface Props {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+
+const { isStreaming, isOpen, duration } = useReasoningContext()
+
+const thinkingMessage = computed(() => {
+  if (isStreaming.value || duration.value === 0) {
+    return 'thinking'
+  }
+  if (duration.value === undefined) {
+    return 'default_done'
+  }
+  return 'duration_done'
+})
+</script>
+
+<template>
+  <CollapsibleTrigger
+    :class="cn(
+      'flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground',
+      props.class,
+    )"
+  >
+    <slot>
+      <BrainIcon class="size-4" />
+
+      <template v-if="thinkingMessage === 'thinking'">
+        <Shimmer :duration="1">
+          Thinking...
+        </Shimmer>
+      </template>
+
+      <template v-else-if="thinkingMessage === 'default_done'">
+        <p>Thought for a few seconds</p>
+      </template>
+
+      <template v-else>
+        <p>Thought for {{ duration }} seconds</p>
+      </template>
+
+      <ChevronDownIcon
+        :class="cn(
+          'size-4 transition-transform',
+          isOpen ? 'rotate-180' : 'rotate-0',
+        )"
+      />
+    </slot>
+  </CollapsibleTrigger>
+</template>
+```
+
+```vue [ReasoningContent.vue] height=300 collapse
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { CollapsibleContent } from '@repo/shadcn-vue/components/ui/collapsible'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { StreamMarkdown } from 'streamdown-vue'
+import { computed, useSlots } from 'vue'
+
+interface Props {
+  class?: HTMLAttributes['class']
+  content: string
+}
+
+const props = defineProps<Props>()
+const slots = useSlots()
+
+const slotContent = computed<string | undefined>(() => {
+  const nodes = slots.default?.() || []
+  let text = ''
+  for (const node of nodes) {
+    if (typeof node.children === 'string')
+      text += node.children
+  }
+  return text || undefined
+})
+
+const md = computed(() => (slotContent.value ?? props.content ?? '') as string)
+</script>
+
+<template>
+  <CollapsibleContent
+    :class="cn(
+      'mt-4 text-sm',
+      'data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2',
+      'data-[state=open]:slide-in-from-top-2 text-muted-foreground',
+      'outline-none data-[state=closed]:animate-out data-[state=open]:animate-in',
+      props.class,
+    )"
+  >
+    <StreamMarkdown :content="md" />
+  </CollapsibleContent>
+</template>
+```
+
+```ts [context.ts] height=300 collapse
+import type { InjectionKey, Ref } from 'vue'
+import { inject, provide } from 'vue'
+
+export interface ReasoningContextValue {
+  isStreaming: Ref<boolean>
+  isOpen: Ref<boolean>
+  setIsOpen: (open: boolean) => void
+  duration: Ref<number | undefined>
+}
+
+export const ReasoningKey: InjectionKey<ReasoningContextValue>
+  = Symbol('ReasoningContext')
+
+export function useReasoningContext() {
+  const ctx = inject<ReasoningContextValue>(ReasoningKey)
+  if (!ctx)
+    throw new Error('Reasoning components must be used within <Reasoning>')
+  return ctx
+}
+```
+
+```ts [index.ts] height=300 collapse
+export { default as Reasoning } from './Reasoning.vue'
+export { default as ReasoningContent } from './ReasoningContent.vue'
+export { default as ReasoningTrigger } from './ReasoningTrigger.vue'
+```
+:::
+
+## Usage with AI SDK
+
+Build a chatbot with reasoning using Deepseek R1.
+
+Add the following component to your frontend:
+
+```vue [pages/index.vue] height=300 collapse
+<script setup lang="ts">
+import { useChat } from '@ai-sdk/vue'
+import { ref } from 'vue'
+
+import {
+  Conversation,
+  ConversationContent,
+  ConversationScrollButton,
+} from '@/components/ai-elements/conversation'
+import { Loader } from '@/components/ai-elements/loader'
+import { Message, MessageContent, MessageResponse } from '@/components/ai-elements/message'
+import {
+  PromptInput,
+  PromptInputSubmit,
+  PromptInputTextarea,
+} from '@/components/ai-elements/prompt-input'
+import {
+  Reasoning,
+  ReasoningContent,
+  ReasoningTrigger,
+} from '@/components/ai-elements/reasoning'
+
+const input = ref('')
+
+const { messages, sendMessage, status } = useChat()
+
+function handleSubmit(e: Event) {
+  e.preventDefault()
+
+  if (!input.value.trim())
+    return
+
+  sendMessage({ text: input.value })
+  input.value = ''
+}
+
+function isStreamingPart(msgIndex: number, partIndex: number) {
+  const lastMsg = messages.value.at(-1)
+  const msg = messages.value[msgIndex]
+
+  if (!lastMsg || msg.id !== lastMsg.id)
+    return false
+
+  const isLastPart = partIndex === msg.parts.length - 1
+  return status.value === 'streaming' && isLastPart
+}
+</script>
+
+<template>
+  <div class="max-w-4xl mx-auto p-6 relative size-full rounded-lg border h-[600px]">
+    <div class="flex flex-col h-full">
+      <Conversation>
+        <ConversationContent>
+          <template v-for="(message, msgIndex) in messages" :key="message.id">
+            <Message :from="message.role">
+              <MessageContent>
+                <template v-for="(part, partIndex) in message.parts" :key="partIndex">
+                  <MessageResponse v-if="part.type === 'text'">
+                    {{ part.text }}
+                  </MessageResponse>
+
+                  <Reasoning
+                    v-else-if="part.type === 'reasoning'"
+                    class="w-full"
+                    :is-streaming="isStreamingPart(msgIndex, partIndex)"
+                  >
+                    <ReasoningTrigger />
+                    <ReasoningContent :text="part.text" />
+                  </Reasoning>
+                </template>
+              </MessageContent>
+            </Message>
+          </template>
+
+          <Loader v-if="status === 'submitted'" />
+        </ConversationContent>
+
+        <ConversationScrollButton />
+      </Conversation>
+
+      <PromptInput
+        class="mt-4 w-full max-w-2xl mx-auto relative"
+        @submit="handleSubmit"
+      >
+        <PromptInputTextarea
+          v-model="input"
+          placeholder="Say something..."
+          class="pr-12"
+        />
+
+        <PromptInputSubmit
+          :status="status === 'streaming' ? 'streaming' : 'ready'"
+          :disabled="!input.trim()"
+          class="absolute bottom-1 right-1"
+        />
+      </PromptInput>
+    </div>
+  </div>
+</template>
+```
+
+Add the following route to your backend:
+
+```ts [server/api/chat/route.ts] height=300 collapse
+import { convertToModelMessages, streamText, UIMessage } from 'ai'
+
+export const maxDuration = 30
+
+export default defineEventHandler(async (event) => {
+  const { model, messages }: { model: string, messages: UIMessage[] }
+    = await readBody(event)
+
+  const result = streamText({
+    model: model || 'deepseek/deepseek-r1',
+    messages: convertToModelMessages(messages),
+  })
+
+  return result.toUIMessageStreamResponse({
+    sendReasoning: true,
+  })
+})
+```
+
+## Features
+
+- Automatically opens when streaming content and closes when finished
+- Manual toggle control for user interaction
+- Smooth animations and transitions powered by Radix UI
+- Visual streaming indicator with pulsing animation
+- Composable architecture with separate trigger and content components
+- Built with accessibility in mind including keyboard navigation
+- Responsive design that works across different screen sizes
+- Seamlessly integrates with both light and dark themes
+- Built on top of shadcn/ui Collapsible primitives
+- TypeScript support with proper type definitions
+
+## Props
+
+### `<Reasoning />`
+
+:::field-group
+  ::field{name="isStreaming" type="boolean" defaultValue="false"}
+  Whether the reasoning is currently streaming (auto-opens and closes the panel).
+  ::
+
+  <!-- ::field{name="defaultOpen" type="boolean"}
+  Whether the reasoning is open by default.
+  :: -->
+
+  ::field{name="class" type="string" defaultValue="''"}
+  Additional CSS classes to apply to the component.
+  ::
+:::
+
+### `<ReasoningTrigger />`
+
+:::field-group
+  ::field{name="class" type="string" defaultValue="''"}
+  Additional CSS classes to apply to the component.
+  ::
+:::
+
+### `<ReasoningContent />`
+
+:::field-group
+  ::field{name="content" type="string"}
+  The content to display in the reasoning panel.
+  ::
+
+  ::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 f28cbb7..fb175b2 100644
--- a/apps/www/plugins/ai-elements.ts
+++ b/apps/www/plugins/ai-elements.ts
@@ -7,11 +7,11 @@ import {
   Checkpoint,
   CodeBlock,
   CodeBlockDark,
-  Context,
   Confirmation,
   ConfirmationAccepted,
   ConfirmationRejected,
   ConfirmationRequest,
+  Context,
   Conversation,
   Image,
   InlineCitation,
@@ -27,6 +27,7 @@ import {
   Queue,
   QueueCustom,
   QueuePromptInput,
+  Reasoning,
   Response,
   Shimmer,
   ShimmerCustomElements,
@@ -96,4 +97,5 @@ export default defineNuxtPlugin((nuxtApp) => {
   vueApp.component('ConfirmationAccepted', ConfirmationAccepted)
   vueApp.component('ConfirmationRejected', ConfirmationRejected)
   vueApp.component('ConfirmationRequest', ConfirmationRequest)
+  vueApp.component('Reasoning', Reasoning)
 })
diff --git a/packages/elements/src/index.ts b/packages/elements/src/index.ts
index 5384f73..20e53bd 100644
--- a/packages/elements/src/index.ts
+++ b/packages/elements/src/index.ts
@@ -4,8 +4,8 @@ export * from './branch'
 export * from './chain-of-thought'
 export * from './checkpoint'
 export * from './code-block'
-export * from './context'
 export * from './confirmation'
+export * from './context'
 export * from './conversation'
 export * from './image'
 export * from './inline-citation'
@@ -16,6 +16,7 @@ export * from './open-in-chat'
 export * from './plan'
 export * from './prompt-input'
 export * from './queue'
+export * from './reasoning'
 export * from './response'
 export * from './shimmer'
 export * from './sources'
diff --git a/packages/elements/src/reasoning/Reasoning.vue b/packages/elements/src/reasoning/Reasoning.vue
new file mode 100644
index 0000000..bf3a20e
--- /dev/null
+++ b/packages/elements/src/reasoning/Reasoning.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { Collapsible } from '@repo/shadcn-vue/components/ui/collapsible'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { useVModel } from '@vueuse/core'
+import { computed, provide, ref, watch } from 'vue'
+import { ReasoningKey } from './context'
+
+interface Props {
+  class?: HTMLAttributes['class']
+  isStreaming?: boolean
+  open?: boolean
+  defaultOpen?: boolean
+  duration?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isStreaming: false,
+  defaultOpen: true,
+  duration: undefined,
+})
+
+const emit = defineEmits<{
+  (e: 'update:open', value: boolean): void
+  (e: 'update:duration', value: number): void
+}>()
+
+const isOpen = useVModel(props, 'open', emit, {
+  defaultValue: props.defaultOpen,
+  passive: true,
+})
+
+const internalDuration = ref<number | undefined>(props.duration)
+
+watch(() => props.duration, (newVal) => {
+  internalDuration.value = newVal
+})
+
+function updateDuration(val: number) {
+  internalDuration.value = val
+  emit('update:duration', val)
+}
+
+const hasAutoClosed = ref(false)
+const startTime = ref<number | null>(null)
+
+const MS_IN_S = 1000
+const AUTO_CLOSE_DELAY = 1000
+
+// Track duration when streaming starts and ends
+watch(() => props.isStreaming, (streaming) => {
+  if (streaming) {
+    // Auto-open when streaming starts
+    isOpen.value = true
+
+    if (startTime.value === null) {
+      startTime.value = Date.now()
+    }
+  }
+  else if (startTime.value !== null) {
+    const calculatedDuration = Math.ceil((Date.now() - startTime.value) / MS_IN_S)
+    updateDuration(calculatedDuration)
+    startTime.value = null
+  }
+})
+
+// Auto-close logic
+watch([() => props.isStreaming, isOpen, () => props.defaultOpen, hasAutoClosed], (_, __, onCleanup) => {
+  if (props.defaultOpen && !props.isStreaming && isOpen.value && !hasAutoClosed.value) {
+    const timer = setTimeout(() => {
+      isOpen.value = false
+      hasAutoClosed.value = true
+    }, AUTO_CLOSE_DELAY)
+
+    onCleanup(() => clearTimeout(timer))
+  }
+}, { immediate: true })
+
+provide(ReasoningKey, {
+  isStreaming: computed(() => props.isStreaming),
+  isOpen,
+  setIsOpen: (val: boolean) => { isOpen.value = val },
+  duration: computed(() => internalDuration.value),
+})
+</script>
+
+<template>
+  <Collapsible
+    v-model:open="isOpen"
+    :class="cn('not-prose mb-4', props.class)"
+  >
+    <slot />
+  </Collapsible>
+</template>
diff --git a/packages/elements/src/reasoning/ReasoningContent.vue b/packages/elements/src/reasoning/ReasoningContent.vue
new file mode 100644
index 0000000..7190ef4
--- /dev/null
+++ b/packages/elements/src/reasoning/ReasoningContent.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { CollapsibleContent } from '@repo/shadcn-vue/components/ui/collapsible'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { StreamMarkdown } from 'streamdown-vue'
+import { computed, useSlots } from 'vue'
+
+interface Props {
+  class?: HTMLAttributes['class']
+  content: string
+}
+
+const props = defineProps<Props>()
+const slots = useSlots()
+
+const slotContent = computed<string | undefined>(() => {
+  const nodes = slots.default?.() || []
+  let text = ''
+  for (const node of nodes) {
+    if (typeof node.children === 'string')
+      text += node.children
+  }
+  return text || undefined
+})
+
+const md = computed(() => (slotContent.value ?? props.content ?? '') as string)
+</script>
+
+<template>
+  <CollapsibleContent
+    :class="cn(
+      'mt-4 text-sm',
+      'data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-top-2',
+      'data-[state=open]:slide-in-from-top-2 text-muted-foreground',
+      'outline-none data-[state=closed]:animate-out data-[state=open]:animate-in',
+      props.class,
+    )"
+  >
+    <StreamMarkdown :content="md" />
+  </CollapsibleContent>
+</template>
diff --git a/packages/elements/src/reasoning/ReasoningTrigger.vue b/packages/elements/src/reasoning/ReasoningTrigger.vue
new file mode 100644
index 0000000..0b14517
--- /dev/null
+++ b/packages/elements/src/reasoning/ReasoningTrigger.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { CollapsibleTrigger } from '@repo/shadcn-vue/components/ui/collapsible'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { BrainIcon, ChevronDownIcon } from 'lucide-vue-next'
+import { computed } from 'vue'
+import { Shimmer } from '../shimmer'
+import { useReasoningContext } from './context'
+
+interface Props {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<Props>()
+
+const { isStreaming, isOpen, duration } = useReasoningContext()
+
+const thinkingMessage = computed(() => {
+  if (isStreaming.value || duration.value === 0) {
+    return 'thinking'
+  }
+  if (duration.value === undefined) {
+    return 'default_done'
+  }
+  return 'duration_done'
+})
+</script>
+
+<template>
+  <CollapsibleTrigger
+    :class="cn(
+      'flex w-full items-center gap-2 text-muted-foreground text-sm transition-colors hover:text-foreground',
+      props.class,
+    )"
+  >
+    <slot>
+      <BrainIcon class="size-4" />
+
+      <template v-if="thinkingMessage === 'thinking'">
+        <Shimmer :duration="1">
+          Thinking...
+        </Shimmer>
+      </template>
+
+      <template v-else-if="thinkingMessage === 'default_done'">
+        <p>Thought for a few seconds</p>
+      </template>
+
+      <template v-else>
+        <p>Thought for {{ duration }} seconds</p>
+      </template>
+
+      <ChevronDownIcon
+        :class="cn(
+          'size-4 transition-transform',
+          isOpen ? 'rotate-180' : 'rotate-0',
+        )"
+      />
+    </slot>
+  </CollapsibleTrigger>
+</template>
diff --git a/packages/elements/src/reasoning/context.ts b/packages/elements/src/reasoning/context.ts
new file mode 100644
index 0000000..619d86e
--- /dev/null
+++ b/packages/elements/src/reasoning/context.ts
@@ -0,0 +1,19 @@
+import type { InjectionKey, Ref } from 'vue'
+import { inject } from 'vue'
+
+export interface ReasoningContextValue {
+  isStreaming: Ref<boolean>
+  isOpen: Ref<boolean>
+  setIsOpen: (open: boolean) => void
+  duration: Ref<number | undefined>
+}
+
+export const ReasoningKey: InjectionKey<ReasoningContextValue>
+  = Symbol('ReasoningContext')
+
+export function useReasoningContext() {
+  const ctx = inject<ReasoningContextValue>(ReasoningKey)
+  if (!ctx)
+    throw new Error('Reasoning components must be used within <Reasoning>')
+  return ctx
+}
diff --git a/packages/elements/src/reasoning/index.ts b/packages/elements/src/reasoning/index.ts
new file mode 100644
index 0000000..f71d435
--- /dev/null
+++ b/packages/elements/src/reasoning/index.ts
@@ -0,0 +1,3 @@
+export { default as Reasoning } from './Reasoning.vue'
+export { default as ReasoningContent } from './ReasoningContent.vue'
+export { default as ReasoningTrigger } from './ReasoningTrigger.vue'
diff --git a/packages/examples/src/index.ts b/packages/examples/src/index.ts
index 113a3c5..aa2a4b8 100644
--- a/packages/examples/src/index.ts
+++ b/packages/examples/src/index.ts
@@ -6,11 +6,11 @@ export { default as ChainOfThought } from './chain-of-thought.vue'
 export { default as Checkpoint } from './checkpoint.vue'
 export { default as CodeBlockDark } from './code-block-dark.vue'
 export { default as CodeBlock } from './code-block.vue'
-export { default as Context } from './context.vue'
 export { default as ConfirmationAccepted } from './confirmation-accepted.vue'
 export { default as ConfirmationRejected } from './confirmation-rejected.vue'
 export { default as ConfirmationRequest } from './confirmation-request.vue'
 export { default as Confirmation } from './confirmation.vue'
+export { default as Context } from './context.vue'
 export { default as Conversation } from './conversation.vue'
 export { default as Image } from './image.vue'
 export { default as InlineCitation } from './inline-citation.vue'
@@ -26,6 +26,7 @@ export { default as PromptInput } from './prompt-input.vue'
 export { default as QueueCustom } from './queue-custom.vue'
 export { default as QueuePromptInput } from './queue-prompt-input.vue'
 export { default as Queue } from './queue.vue'
+export { default as Reasoning } from './reasoning.vue'
 export { default as Response } from './response.vue'
 export { default as ShimmerCustomElements } from './shimmer-custom-elements.vue'
 export { default as ShimmerDurations } from './shimmer-durations.vue'
diff --git a/packages/examples/src/reasoning.vue b/packages/examples/src/reasoning.vue
new file mode 100644
index 0000000..e654cce
--- /dev/null
+++ b/packages/examples/src/reasoning.vue
@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { Reasoning, ReasoningContent, ReasoningTrigger } from '@repo/elements/reasoning'
+import { onMounted, ref } from 'vue'
+
+const reasoningSteps = [
+  'Let me think about this problem step by step.',
+  '\n\nFirst, I need to understand what the user is asking for.',
+  '\n\nThey want a reasoning component that opens automatically when streaming begins and closes when streaming finishes. The component should be composable and follow existing patterns in the codebase.',
+  '\n\nThis seems like a collapsible component with state management would be the right approach.',
+].join('')
+
+const content = ref('')
+const isStreaming = ref(false)
+const currentTokenIndex = ref(0)
+const tokens = ref<string[]>([])
+
+function chunkIntoTokens(text: string): string[] {
+  const tokenArray: string[] = []
+  let i = 0
+  while (i < text.length) {
+    const chunkSize = Math.floor(Math.random() * 2) + 3
+    tokenArray.push(text.slice(i, i + chunkSize))
+    i += chunkSize
+  }
+  return tokenArray
+}
+
+function streamToken() {
+  if (!isStreaming.value || currentTokenIndex.value >= tokens.value.length) {
+    if (isStreaming.value) {
+      isStreaming.value = false
+    }
+    return
+  }
+
+  content.value += tokens.value[currentTokenIndex.value]
+  currentTokenIndex.value++
+
+  setTimeout(streamToken, 25)
+}
+
+function startSimulation() {
+  tokens.value = chunkIntoTokens(reasoningSteps)
+  content.value = ''
+  currentTokenIndex.value = 0
+  isStreaming.value = true
+  streamToken()
+}
+
+onMounted(() => {
+  startSimulation()
+})
+</script>
+
+<template>
+  <div class="w-full p-4" style="height: 300px">
+    <Reasoning class="w-full" :is-streaming="isStreaming">
+      <ReasoningTrigger />
+      <ReasoningContent :content="content" />
+    </Reasoning>
+  </div>
+</template>