diff --git a/apps/test/app/examples/code-block.vue b/apps/test/app/examples/code-block.vue
index d0bb17d..e9ff39f 100644
--- a/apps/test/app/examples/code-block.vue
+++ b/apps/test/app/examples/code-block.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { CodeBlock } from '@repo/elements/code-block'
+import { CodeBlock, CodeBlockCopyButton } from '@repo/elements/code-block'
 
 const code = `<template>
   <div>
@@ -15,8 +15,22 @@ interface Props {
 
 defineProps<Props>()
 <\/script>`
+
+function handleCopy() {
+  // eslint-disable-next-line no-console
+  console.log('Copied code to clipboard')
+}
+
+function handleError(error: Error) {
+  console.error('Failed to copy code to clipboard', error)
+}
 </script>
 
 <template>
-  <CodeBlock :code="code" lang="vue" />
+  <CodeBlock :code="code" language="vue">
+    <CodeBlockCopyButton
+      @copy="handleCopy"
+      @error="handleError"
+    />
+  </CodeBlock>
 </template>
diff --git a/apps/www/assets/css/tailwind.css b/apps/www/assets/css/tailwind.css
index 5e6c8e2..d63d41d 100644
--- a/apps/www/assets/css/tailwind.css
+++ b/apps/www/assets/css/tailwind.css
@@ -119,4 +119,11 @@
   }
 }
 
-
+@layer components {
+  /* Override shadcn-docs-nuxt's .shiki code span.line styles
+    to prevent conflicts with code-block component preview */
+  .docs-component-preview .shiki code span.line {
+    min-height: 0 !important;
+    line-height: 0 !important;
+  }
+}
diff --git a/apps/www/components/ComponentViewer.vue b/apps/www/components/ComponentViewer.vue
index d51a882..d475818 100644
--- a/apps/www/components/ComponentViewer.vue
+++ b/apps/www/components/ComponentViewer.vue
@@ -11,7 +11,9 @@ defineProps<Props>()
   <ClientOnly>
     <Suspense>
       <template #default>
-        <component :is="componentName" />
+        <div class="docs-component-preview">
+          <component :is="componentName" />
+        </div>
       </template>
       <template #fallback>
         <div class="p-4" />
diff --git a/apps/www/content/1.overview/1.Introduction.md b/apps/www/content/1.overview/1.Introduction.md
index 8ebc0ee..ffd935a 100644
--- a/apps/www/content/1.overview/1.Introduction.md
+++ b/apps/www/content/1.overview/1.Introduction.md
@@ -63,4 +63,7 @@ You can install it with:
 :::ComponentLoader{label="InlineCitation" componentName="InlineCitation"}
 :::
 
+:::ComponentLoader{label="CodeBlock" componentName="CodeBlock"}
+:::
+
 View the [source code](https://github.com/cwandev/ai-elements-vue) for all components on GitHub.
diff --git a/apps/www/content/2.components/code-block.md b/apps/www/content/2.components/code-block.md
index 0281efa..d7e695b 100644
--- a/apps/www/content/2.components/code-block.md
+++ b/apps/www/content/2.components/code-block.md
@@ -4,11 +4,14 @@ description:
 icon: lucide:code
 ---
 
-The `CodeBlock` component provides syntax highlighting and copy to clipboard functionality for code blocks. It uses Shiki for syntax highlighting and includes automatic light/dark theme switching.
+The `CodeBlock` component provides syntax highlighting, line numbers, and copy to clipboard functionality for code blocks.
+
+:::ComponentLoader{label="Preview" componentName="CodeBlock"}
+:::
 
 ## Install using CLI
 
-:::tabs{variant="card"}
+::::tabs{variant="card"}
   ::div{label="ai-elements-vue"}
   ```sh
   npx ai-elements-vue@latest add code-block
@@ -20,148 +23,420 @@ The `CodeBlock` component provides syntax highlighting and copy to clipboard fun
   npx shadcn-vue@latest add https://registry.ai-elements-vue.com/code-block.json
   ```
   ::
-:::
+::::
 
 ## Install Manually
 
 Copy and paste the following files into the same folder.
 
-:::code-group
+::::code-group
   ```vue [CodeBlock.vue]
   <script setup lang="ts">
-  import type { BuiltinTheme, BundledLanguage } from 'shiki'
-  import { transformerCopyButton } from '@selemondev/shiki-transformer-copy-button'
-  import CodeBlock from 'shiki-block-vue'
+  import type { BundledLanguage } from 'shiki'
+  import type { HTMLAttributes } from 'vue'
+  import { cn } from '@repo/shadcn-vue/lib/utils'
+  import { reactiveOmit } from '@vueuse/core'
+  import { computed, onBeforeUnmount, provide, ref, watch } from 'vue'
+  import { CodeBlockKey } from './context'
+  import { highlightCode } from './utils'
 
-  interface Props {
-    code: string
-    lang: BundledLanguage
-  }
+  const props = withDefaults(
+    defineProps<{
+      code: string
+      language: BundledLanguage
+      showLineNumbers?: boolean
+      class?: HTMLAttributes['class']
+    }>(),
+    {
+      showLineNumbers: false,
+    },
+  )
 
-  const props = withDefaults(defineProps<Props>(), {})
+  const delegatedProps = reactiveOmit(props, 'code', 'language', 'showLineNumbers', 'class')
 
-  const theme: { light: BuiltinTheme, dark: BuiltinTheme } = {
-    light: 'vitesse-light',
-    dark: 'vitesse-dark',
-  }
+  const html = ref('')
+  const darkHtml = ref('')
+
+  provide(CodeBlockKey, {
+    code: computed(() => props.code),
+  })
+
+  let requestId = 0
+  let isUnmounted = false
+
+  watch(
+    () => [props.code, props.language, props.showLineNumbers] as const,
+    async ([code, language, showLineNumbers]) => {
+      requestId += 1
+      const currentId = requestId
+
+      try {
+        const [light, dark] = await highlightCode(code, language, showLineNumbers)
+
+        if (currentId === requestId && !isUnmounted) {
+          html.value = light
+          darkHtml.value = dark
+        }
+      }
+      catch (error) {
+        console.error('[CodeBlock] highlight failed', error)
+      }
+    },
+    { immediate: true },
+  )
+
+  onBeforeUnmount(() => {
+    isUnmounted = true
+  })
   </script>
 
   <template>
-    <CodeBlock
-      :lang="props.lang"
-      :code="props.code"
-      :theme="theme"
-      class="overflow-hidden"
-      :transformers="[
-        transformerCopyButton({
-          duration: 3000,
-          display: 'ready',
-          successIcon: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E`,
-          copyIcon: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E`,
-        }),
-      ]"
-    />
+    <div
+      data-slot="code-block"
+      v-bind="delegatedProps"
+      :class="cn('group relative w-full overflow-hidden rounded-md border bg-background text-foreground', props.class)"
+    >
+      <div class="relative">
+        <div
+          class="overflow-hidden dark:hidden [&>pre]:m-0 [&>pre]:bg-background! [&>pre]:p-4 [&>pre]:text-foreground! [&>pre]:text-sm [&_code]:font-mono [&_code]:text-sm"
+          v-html="html"
+        />
+        <div
+          class="hidden overflow-hidden dark:block [&>pre]:m-0 [&>pre]:bg-background! [&>pre]:p-4 [&>pre]:text-foreground! [&>pre]:text-sm [&_code]:font-mono [&_code]:text-sm"
+          v-html="darkHtml"
+        />
+        <div v-if="$slots.default" class="absolute top-2 right-2 flex items-center gap-2">
+          <slot />
+        </div>
+      </div>
+    </div>
   </template>
+  ```
+
+  ```vue [CodeBlockCopyButton.vue]
+  <script setup lang="ts">
+  import type { HTMLAttributes } from 'vue'
+  import { Button } from '@repo/shadcn-vue/components/ui/button'
+  import { cn } from '@repo/shadcn-vue/lib/utils'
+  import { reactiveOmit } from '@vueuse/core'
+  import { CheckIcon, CopyIcon } from 'lucide-vue-next'
+  import { computed, inject, onBeforeUnmount, ref } from 'vue'
+  import { CodeBlockKey } from './context'
+
+  const props = withDefaults(
+    defineProps<{
+      timeout?: number
+      class?: HTMLAttributes['class']
+    }>(),
+    {
+      timeout: 2000,
+    },
+  )
+
+  const emit = defineEmits<{
+    (event: 'copy'): void
+    (event: 'error', error: Error): void
+  }>()
+
+  const delegatedProps = reactiveOmit(props, 'timeout', 'class')
+
+  const context = inject(CodeBlockKey)
+
+  if (!context)
+    throw new Error('CodeBlockCopyButton must be used within a <CodeBlock />')
+
+  const { code } = context
+
+  const isCopied = ref(false)
+  let resetTimer: ReturnType<typeof setTimeout> | undefined
 
-  <style scoped>
-  /* Dark Mode */
-  @media (prefers-color-scheme: dark) {
-    :deep(.shiki),
-    :deep(.shiki span) {
-      color: var(--shiki-dark) !important;
-      background-color: var(--shiki-dark-bg) !important;
-      /* Optional, if you also want font styles */
-      font-style: var(--shiki-dark-font-style) !important;
-      font-weight: var(--shiki-dark-font-weight) !important;
-      text-decoration: var(--shiki-dark-text-decoration) !important;
+  const icon = computed(() => (isCopied.value ? CheckIcon : CopyIcon))
+
+  async function copyToClipboard() {
+    if (typeof window === 'undefined' || !navigator?.clipboard?.writeText) {
+      const error = new Error('Clipboard API not available')
+      emit('error', error)
+      return
     }
-  }
 
-  html.dark :deep(.shiki),
-  html.dark :deep(.shiki span) {
-    color: var(--shiki-dark) !important;
-    background-color: var(--shiki-dark-bg) !important;
-    font-style: var(--shiki-dark-font-style) !important;
-    font-weight: var(--shiki-dark-font-weight) !important;
-    text-decoration: var(--shiki-dark-text-decoration) !important;
+    try {
+      await navigator.clipboard.writeText(code.value)
+      isCopied.value = true
+      emit('copy')
+
+      if (resetTimer) {
+        clearTimeout(resetTimer)
+      }
+
+      resetTimer = setTimeout(() => {
+        isCopied.value = false
+      }, props.timeout)
+    }
+    catch (error) {
+      emit('error', error instanceof Error ? error : new Error('Copy failed'))
+    }
   }
 
-  :deep(.shiki--code--block) {
-    width: 100%;
+  onBeforeUnmount(() => {
+    if (resetTimer) {
+      clearTimeout(resetTimer)
+    }
+  })
+  </script>
+
+  <template>
+    <Button
+      data-slot="code-block-copy-button"
+      v-bind="delegatedProps"
+      :class="cn('shrink-0', props.class)"
+      size="icon"
+      variant="ghost"
+      @click="copyToClipboard"
+    >
+      <slot>
+        <component :is="icon" :size="14" />
+      </slot>
+    </Button>
+  </template>
+  ```
+
+  ```ts [context.ts]
+  import type { ComputedRef, InjectionKey } from 'vue'
+
+  export interface CodeBlockContext {
+    code: ComputedRef<string>
   }
 
-  :deep(pre) {
-    z-index: 1;
-    padding: 24px;
-    border-radius: 10px;
-    overflow-x: auto;
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-    position: relative;
-    background-color: #F9F9F9 !important;
+  export const CodeBlockKey: InjectionKey<CodeBlockContext> = Symbol('CodeBlock')
+  ```
+
+  ```ts [utils.ts]
+  import type { Element } from 'hast'
+  import type { BundledLanguage, ShikiTransformer } from 'shiki'
+  import { codeToHtml } from 'shiki'
+
+  const lineNumberTransformer: ShikiTransformer = {
+    name: 'line-numbers',
+    line(node: Element, line: number) {
+      node.children.unshift({
+        type: 'element',
+        tagName: 'span',
+        properties: {
+          className: [
+            'inline-block',
+            'min-w-10',
+            'mr-4',
+            'text-right',
+            'select-none',
+            'text-muted-foreground',
+          ],
+        },
+        children: [{ type: 'text', value: String(line) }],
+      })
+    },
   }
 
-  :deep(code) {
-    display: block;
-    line-height: 1.7;
-    font-size: 15px;
+  export async function highlightCode(
+    code: string,
+    language: BundledLanguage,
+    showLineNumbers = false,
+  ) {
+    const transformers: ShikiTransformer[] = showLineNumbers
+      ? [lineNumberTransformer]
+      : []
+
+    return await Promise.all([
+      codeToHtml(code, {
+        lang: language,
+        theme: 'one-light',
+        transformers,
+      }),
+      codeToHtml(code, {
+        lang: language,
+        theme: 'one-dark-pro',
+        transformers,
+      }),
+    ])
   }
-  </style>
   ```
 
   ```ts [index.ts]
   export { default as CodeBlock } from './CodeBlock.vue'
+  export { default as CodeBlockCopyButton } from './CodeBlockCopyButton.vue'
   ```
-:::
+::::
 
 ## Usage
 
 ```vue
-<script setup lang="ts">
-import { CodeBlock } from '@/components/ai-elements/code-block'
+import { CodeBlock, CodeBlockCopyButton } from '@/components/ai-elements/code-block'
+```
 
-const code = `<template>
-  <div>
-    <h1>Hello, {{ name }}!</h1>
-    <p>This is an example Vue component.</p>
-  </div>
-</template>
+```vue
+<CodeBlock :code="console.log('hello world')" language="javascript">
+  <CodeBlockCopyButton
+    @copy="() => console.log('Copied code to clipboard')"
+    @error="() => console.error('Failed to copy code to clipboard')"
+  />
+</CodeBlock>
+```
+
+## Usage with AI SDK
 
+Build a simple code generation tool using the [`experimental_useObject`](https://sdk.vercel.ai/docs/reference/ai-sdk-ui/use-object) hook.
+
+Add the following component to your frontend:
+
+::::code-group
+```vue [app/page.vue]
 <script setup lang="ts">
-interface Props {
-  name: string
-}
+import { useObject } from '@ai-sdk/vue'
+import { ref } from 'vue'
+import { z } from 'zod'
+import { CodeBlock, CodeBlockCopyButton } from '@/components/ai-elements/code-block'
+import { Input, PromptInputSubmit, PromptInputTextarea } from '@/components/ai-elements/prompt-input'
+
+const codeBlockSchema = z.object({
+  language: z.string(),
+  filename: z.string(),
+  code: z.string(),
+})
+
+const input = ref('')
+const { object, submit, isLoading } = useObject({
+  api: '/api/codegen',
+  schema: codeBlockSchema,
+})
 
-defineProps<Props>()
-<\/script>`
+function handleSubmit(e: Event) {
+  e.preventDefault()
+  if (input.value.trim()) {
+    submit(input.value)
+  }
+}
 </script>
 
 <template>
-  <CodeBlock :code="code" lang="vue" />
+  <div class="max-w-4xl mx-auto p-6 relative size-full rounded-lg border h-[600px]">
+    <div class="flex flex-col h-full">
+      <div class="flex-1 overflow-auto mb-4">
+        <CodeBlock
+          v-if="object?.code && object?.language"
+          :code="object.code"
+          :language="object.language"
+          :show-line-numbers="true"
+        >
+          <CodeBlockCopyButton />
+        </CodeBlock>
+      </div>
+
+      <Input
+        class="mt-4 w-full max-w-2xl mx-auto relative"
+        @submit="handleSubmit"
+      >
+        <PromptInputTextarea
+          v-model="input"
+          placeholder="Generate a Vue todolist component"
+          class="pr-12"
+        />
+        <PromptInputSubmit
+          :status="isLoading ? 'streaming' : 'ready'"
+          :disabled="!input.trim()"
+          class="absolute bottom-1 right-1"
+        />
+      </Input>
+    </div>
+  </div>
 </template>
 ```
+::::
+
+Add the following route to your backend:
+
+::::code-group
+```ts [server/api/codegen.post.ts]
+import { openai } from '@ai-sdk/openai'
+import { streamObject } from 'ai'
+import { z } from 'zod'
+
+const codeBlockSchema = z.object({
+  language: z.string(),
+  filename: z.string(),
+  code: z.string(),
+})
+
+export default defineEventHandler(async (event) => {
+  const { prompt } = await readBody(event)
+
+  const result = streamObject({
+    model: openai('gpt-4o'),
+    schema: codeBlockSchema,
+    prompt:
+      `You are a helpful coding assitant. Only generate code, no markdown formatting or backticks, or text.${
+        prompt}`,
+  })
+
+  return result.toTextStreamResponse()
+})
+```
+::::
 
 ## Features
 
-- Syntax highlighting with Shiki
-- Copy to clipboard functionality
-- Automatic light/dark theme switching
-- Support for all Shiki bundled languages
-- Customizable themes (vitesse-light/vitesse-dark)
-- Responsive design with horizontal scrolling
-- Clean, modern styling
-- Accessible design
+* Syntax highlighting with Shiki
+* Line numbers (optional)
+* Copy to clipboard functionality
+* Automatic light/dark theme switching
+* Customizable styles
+* Accessible design
+
+## Examples
+
+### Dark Mode
+
+To use the `CodeBlock` component in dark mode, you can wrap it in a `div` with the `dark` class.
+
+:::ComponentLoader{label="Preview" componentName="CodeBlockDark"}
+:::
 
 ## Props
 
 ### `<CodeBlock />`
 
-:::field-group
+::::field-group
   ::field{name="code" type="string" required}
   The code content to display.
   ::
 
-  ::field{name="lang" type="BundledLanguage" required}
-  The programming language for syntax highlighting. Supports all Shiki bundled languages.
+  ::field{name="language" type="BundledLanguage" required}
+  The programming language for syntax highlighting.
   ::
-:::
+
+  ::field{name="showLineNumbers" type="boolean" default="false"}
+  Whether to show line numbers.
+  ::
+
+  ::field{name="class" type="string"}
+  Additional CSS classes to apply to the root container.
+  ::
+::::
+
+### `<CodeBlockCopyButton />`
+
+::::field-group
+  ::field{name="timeout" type="number" default="2000"}
+  How long to show the copied state (ms).
+  ::
+
+  ::field{name="class" type="string"}
+  Additional CSS classes to apply to the button.
+  ::
+
+  ::field{name="@copy" type="() => void"}
+  Callback fired after a successful copy.
+  ::
+
+  ::field{name="@error" type="(error: Error) => void"}
+  Callback fired if copying fails.
+  ::
+::::
diff --git a/apps/www/plugins/ai-elements.ts b/apps/www/plugins/ai-elements.ts
index 7759964..afe782c 100644
--- a/apps/www/plugins/ai-elements.ts
+++ b/apps/www/plugins/ai-elements.ts
@@ -3,6 +3,8 @@ import {
   ActionsHover,
   Branch,
   ChainOfThought,
+  CodeBlock,
+  CodeBlockDark,
   Conversation,
   Image,
   InlineCitation,
@@ -64,4 +66,6 @@ export default defineNuxtPlugin((nuxtApp) => {
   vueApp.component('QueuePromptInput', QueuePromptInput)
   vueApp.component('Plan', Plan)
   vueApp.component('InlineCitation', InlineCitation)
+  vueApp.component('CodeBlock', CodeBlock)
+  vueApp.component('CodeBlockDark', CodeBlockDark)
 })
diff --git a/packages/elements/package.json b/packages/elements/package.json
index a15f2d2..201c98d 100644
--- a/packages/elements/package.json
+++ b/packages/elements/package.json
@@ -8,18 +8,17 @@
   },
   "dependencies": {
     "@repo/shadcn-vue": "workspace:*",
-    "@selemondev/shiki-transformer-copy-button": "^0.0.2",
     "@vueuse/core": "^13.9.0",
     "ai": "^5.0.60",
     "lucide-vue-next": "^0.544.0",
     "motion-v": "^1.7.3",
-    "shiki-block-vue": "^1.0.5",
+    "shiki": "^3.14.0",
     "streamdown-vue": "^1.0.21",
     "vue": "^3.5.22",
     "vue-stick-to-bottom": "^0.1.0"
   },
   "devDependencies": {
-    "shiki": "^3.13.0",
+    "@types/hast": "^3.0.4",
     "typescript": "^5.9.3"
   }
 }
diff --git a/packages/elements/src/code-block/CodeBlock.vue b/packages/elements/src/code-block/CodeBlock.vue
index 02f66f1..32eca00 100644
--- a/packages/elements/src/code-block/CodeBlock.vue
+++ b/packages/elements/src/code-block/CodeBlock.vue
@@ -1,79 +1,80 @@
 <script setup lang="ts">
-import type { BuiltinTheme, BundledLanguage } from 'shiki'
-import { transformerCopyButton } from '@selemondev/shiki-transformer-copy-button'
-import CodeBlock from 'shiki-block-vue'
+import type { BundledLanguage } from 'shiki'
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import { computed, onBeforeUnmount, provide, ref, watch } from 'vue'
+import { CodeBlockKey } from './context'
+import { highlightCode } from './utils'
 
-interface Props {
-  code: string
-  lang: BundledLanguage
-}
+const props = withDefaults(
+  defineProps<{
+    code: string
+    language: BundledLanguage
+    showLineNumbers?: boolean
+    class?: HTMLAttributes['class']
+  }>(),
+  {
+    showLineNumbers: false,
+  },
+)
 
-const props = withDefaults(defineProps<Props>(), {})
+const delegatedProps = reactiveOmit(props, 'code', 'language', 'showLineNumbers', 'class')
 
-const theme: { light: BuiltinTheme, dark: BuiltinTheme } = {
-  light: 'vitesse-light',
-  dark: 'vitesse-dark',
-}
-</script>
+const html = ref('')
+const darkHtml = ref('')
 
-<template>
-  <CodeBlock
-    :lang="props.lang"
-    :code="props.code"
-    :theme="theme"
-    class="overflow-hidden"
-    :transformers="[
-      transformerCopyButton({
-        duration: 3000,
-        display: 'ready',
-        successIcon: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E`,
-        copyIcon: `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='rgba(128,128,128,1)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' viewBox='0 0 24 24'%3E%3Crect width='8' height='4' x='8' y='2' rx='1' ry='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3C/svg%3E`,
-      }),
-    ]"
-  />
-</template>
+provide(CodeBlockKey, {
+  code: computed(() => props.code),
+})
 
-<style>
-/* Dark Mode */
-@media (prefers-color-scheme: dark) {
-  .shiki,
-  .shiki span {
-    color: var(--shiki-dark) !important;
-    background-color: var(--shiki-dark-bg) !important;
-    /* Optional, if you also want font styles */
-    font-style: var(--shiki-dark-font-style) !important;
-    font-weight: var(--shiki-dark-font-weight) !important;
-    text-decoration: var(--shiki-dark-text-decoration) !important;
-  }
-}
+let requestId = 0
+let isUnmounted = false
 
-html.dark .shiki,
-html.dark .shiki span {
-  color: var(--shiki-dark) !important;
-  background-color: var(--shiki-dark-bg) !important;
-  font-style: var(--shiki-dark-font-style) !important;
-  font-weight: var(--shiki-dark-font-weight) !important;
-  text-decoration: var(--shiki-dark-text-decoration) !important;
-}
+watch(
+  () => [props.code, props.language, props.showLineNumbers] as const,
+  async ([code, language, showLineNumbers]) => {
+    requestId += 1
+    const currentId = requestId
 
-.shiki--code--block {
-  width: 100%;
-}
+    try {
+      const [light, dark] = await highlightCode(code, language, showLineNumbers)
 
-pre {
-  z-index: 1;
-  padding: 24px;
-  border-radius: 10px;
-  overflow-x: auto;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-  position: relative;
-  background-color: #F9F9F9 !important;
-}
+      if (currentId === requestId && !isUnmounted) {
+        html.value = light
+        darkHtml.value = dark
+      }
+    }
+    catch (error) {
+      console.error('[CodeBlock] highlight failed', error)
+    }
+  },
+  { immediate: true },
+)
 
-code {
-  display: block;
-  line-height: 1.7;
-  font-size: 15px;
-}
-</style>
+onBeforeUnmount(() => {
+  isUnmounted = true
+})
+</script>
+
+<template>
+  <div
+    data-slot="code-block"
+    v-bind="delegatedProps"
+    :class="cn('group relative w-full overflow-hidden rounded-md border bg-background text-foreground', props.class)"
+  >
+    <div class="relative">
+      <div
+        class="overflow-hidden dark:hidden [&>pre]:m-0 [&>pre]:bg-background! [&>pre]:p-4 [&>pre]:text-foreground! [&>pre]:text-sm [&_code]:font-mono [&_code]:text-sm"
+        v-html="html"
+      />
+      <div
+        class="hidden overflow-hidden dark:block [&>pre]:m-0 [&>pre]:bg-background! [&>pre]:p-4 [&>pre]:text-foreground! [&>pre]:text-sm [&_code]:font-mono [&_code]:text-sm"
+        v-html="darkHtml"
+      />
+      <div v-if="$slots.default" class="absolute top-2 right-2 flex items-center gap-2">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/elements/src/code-block/CodeBlockCopyButton.vue b/packages/elements/src/code-block/CodeBlockCopyButton.vue
new file mode 100644
index 0000000..0f68727
--- /dev/null
+++ b/packages/elements/src/code-block/CodeBlockCopyButton.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { Button } from '@repo/shadcn-vue/components/ui/button'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { reactiveOmit } from '@vueuse/core'
+import { CheckIcon, CopyIcon } from 'lucide-vue-next'
+import { computed, inject, onBeforeUnmount, ref } from 'vue'
+import { CodeBlockKey } from './context'
+
+const props = withDefaults(
+  defineProps<{
+    timeout?: number
+    class?: HTMLAttributes['class']
+  }>(),
+  {
+    timeout: 2000,
+  },
+)
+
+const emit = defineEmits<{
+  (event: 'copy'): void
+  (event: 'error', error: Error): void
+}>()
+
+const delegatedProps = reactiveOmit(props, 'timeout', 'class')
+
+const context = inject(CodeBlockKey)
+
+if (!context)
+  throw new Error('CodeBlockCopyButton must be used within a <CodeBlock />')
+
+const { code } = context
+
+const isCopied = ref(false)
+let resetTimer: ReturnType<typeof setTimeout> | undefined
+
+const icon = computed(() => (isCopied.value ? CheckIcon : CopyIcon))
+
+async function copyToClipboard() {
+  if (typeof window === 'undefined' || !navigator?.clipboard?.writeText) {
+    const error = new Error('Clipboard API not available')
+    emit('error', error)
+    return
+  }
+
+  try {
+    await navigator.clipboard.writeText(code.value)
+    isCopied.value = true
+    emit('copy')
+
+    if (resetTimer) {
+      clearTimeout(resetTimer)
+    }
+
+    resetTimer = setTimeout(() => {
+      isCopied.value = false
+    }, props.timeout)
+  }
+  catch (error) {
+    emit('error', error instanceof Error ? error : new Error('Copy failed'))
+  }
+}
+
+onBeforeUnmount(() => {
+  if (resetTimer) {
+    clearTimeout(resetTimer)
+  }
+})
+</script>
+
+<template>
+  <Button
+    data-slot="code-block-copy-button"
+    v-bind="delegatedProps"
+    :class="cn('shrink-0', props.class)"
+    size="icon"
+    variant="ghost"
+    @click="copyToClipboard"
+  >
+    <slot>
+      <component :is="icon" :size="14" />
+    </slot>
+  </Button>
+</template>
diff --git a/packages/elements/src/code-block/context.ts b/packages/elements/src/code-block/context.ts
new file mode 100644
index 0000000..b9865ae
--- /dev/null
+++ b/packages/elements/src/code-block/context.ts
@@ -0,0 +1,7 @@
+import type { ComputedRef, InjectionKey } from 'vue'
+
+export interface CodeBlockContext {
+  code: ComputedRef<string>
+}
+
+export const CodeBlockKey: InjectionKey<CodeBlockContext> = Symbol('CodeBlock')
diff --git a/packages/elements/src/code-block/index.ts b/packages/elements/src/code-block/index.ts
index 6ade9b1..b1141c3 100644
--- a/packages/elements/src/code-block/index.ts
+++ b/packages/elements/src/code-block/index.ts
@@ -1 +1,2 @@
 export { default as CodeBlock } from './CodeBlock.vue'
+export { default as CodeBlockCopyButton } from './CodeBlockCopyButton.vue'
diff --git a/packages/elements/src/code-block/utils.ts b/packages/elements/src/code-block/utils.ts
new file mode 100644
index 0000000..366ccff
--- /dev/null
+++ b/packages/elements/src/code-block/utils.ts
@@ -0,0 +1,47 @@
+import type { Element } from 'hast'
+import type { BundledLanguage, ShikiTransformer } from 'shiki'
+import { codeToHtml } from 'shiki'
+
+const lineNumberTransformer: ShikiTransformer = {
+  name: 'line-numbers',
+  line(node: Element, line: number) {
+    node.children.unshift({
+      type: 'element',
+      tagName: 'span',
+      properties: {
+        className: [
+          'inline-block',
+          'min-w-10',
+          'mr-4',
+          'text-right',
+          'select-none',
+          'text-muted-foreground',
+        ],
+      },
+      children: [{ type: 'text', value: String(line) }],
+    })
+  },
+}
+
+export async function highlightCode(
+  code: string,
+  language: BundledLanguage,
+  showLineNumbers = false,
+) {
+  const transformers: ShikiTransformer[] = showLineNumbers
+    ? [lineNumberTransformer]
+    : []
+
+  return await Promise.all([
+    codeToHtml(code, {
+      lang: language,
+      theme: 'one-light',
+      transformers,
+    }),
+    codeToHtml(code, {
+      lang: language,
+      theme: 'one-dark-pro',
+      transformers,
+    }),
+  ])
+}
diff --git a/packages/examples/src/code-block-dark.vue b/packages/examples/src/code-block-dark.vue
new file mode 100644
index 0000000..f3aff3c
--- /dev/null
+++ b/packages/examples/src/code-block-dark.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { CodeBlock, CodeBlockCopyButton } from '@repo/elements/code-block'
+
+const code = `<template>
+  <div>
+    <h1>Hello, {{ name }}!</h1>
+    <p>This is an example Vue component.</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  name: string
+}
+
+defineProps<Props>()
+<\/script>`
+
+function handleCopy() {
+  // eslint-disable-next-line no-console
+  console.log('Copied code to clipboard')
+}
+
+function handleError(error: Error) {
+  console.error('Failed to copy code to clipboard', error)
+}
+</script>
+
+<template>
+  <div class="dark">
+    <CodeBlock :code="code" language="vue">
+      <CodeBlockCopyButton
+        @copy="handleCopy"
+        @error="handleError"
+      />
+    </CodeBlock>
+  </div>
+</template>
diff --git a/packages/examples/src/code-block.vue b/packages/examples/src/code-block.vue
index d0bb17d..e9ff39f 100644
--- a/packages/examples/src/code-block.vue
+++ b/packages/examples/src/code-block.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { CodeBlock } from '@repo/elements/code-block'
+import { CodeBlock, CodeBlockCopyButton } from '@repo/elements/code-block'
 
 const code = `<template>
   <div>
@@ -15,8 +15,22 @@ interface Props {
 
 defineProps<Props>()
 <\/script>`
+
+function handleCopy() {
+  // eslint-disable-next-line no-console
+  console.log('Copied code to clipboard')
+}
+
+function handleError(error: Error) {
+  console.error('Failed to copy code to clipboard', error)
+}
 </script>
 
 <template>
-  <CodeBlock :code="code" lang="vue" />
+  <CodeBlock :code="code" language="vue">
+    <CodeBlockCopyButton
+      @copy="handleCopy"
+      @error="handleError"
+    />
+  </CodeBlock>
 </template>
diff --git a/packages/examples/src/index.ts b/packages/examples/src/index.ts
index a1c1b6c..fd38924 100644
--- a/packages/examples/src/index.ts
+++ b/packages/examples/src/index.ts
@@ -2,6 +2,8 @@ export { default as ActionsHover } from './actions-hover.vue'
 export { default as Actions } from './actions.vue'
 export { default as Branch } from './branch.vue'
 export { default as ChainOfThought } from './chain-of-thought.vue'
+export { default as CodeBlockDark } from './code-block-dark.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'
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bc6edbf..6d32042 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -148,9 +148,6 @@ importers:
       '@repo/shadcn-vue':
         specifier: workspace:*
         version: link:../shadcn-vue
-      '@selemondev/shiki-transformer-copy-button':
-        specifier: ^0.0.2
-        version: 0.0.2
       '@vueuse/core':
         specifier: ^13.9.0
         version: 13.9.0(vue@3.5.22(typescript@5.9.3))
@@ -163,9 +160,9 @@ importers:
       motion-v:
         specifier: ^1.7.3
         version: 1.7.3(@vueuse/core@13.9.0(vue@3.5.22(typescript@5.9.3)))(vue@3.5.22(typescript@5.9.3))
-      shiki-block-vue:
-        specifier: ^1.0.5
-        version: 1.0.5(@vue/tsconfig@0.8.1(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3)))(vite@7.1.9(@types/node@24.6.2)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1))(vue-tsc@3.1.0(typescript@5.9.3))(vue@3.5.22(typescript@5.9.3))
+      shiki:
+        specifier: ^3.14.0
+        version: 3.14.0
       streamdown-vue:
         specifier: ^1.0.21
         version: 1.0.21(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3))
@@ -176,9 +173,9 @@ importers:
         specifier: ^0.1.0
         version: 0.1.0(vue@3.5.22(typescript@5.9.3))
     devDependencies:
-      shiki:
-        specifier: ^3.13.0
-        version: 3.13.0
+      '@types/hast':
+        specifier: ^3.0.4
+        version: 3.0.4
       typescript:
         specifier: ^5.9.3
         version: 5.9.3
@@ -2382,30 +2379,45 @@ packages:
   '@sec-ant/readable-stream@0.4.1':
     resolution: {integrity: sha512-831qok9r2t8AlxLko40y2ebgSDhenenCatLVeW/uBtnHPyhHOvG0C7TvfgecV+wHzIm5KUICgzmVpWS+IMEAeg==}
 
-  '@selemondev/shiki-transformer-copy-button@0.0.2':
-    resolution: {integrity: sha512-tBO3XW5BotqwQJUDMK0lJecjhVTff7dCM644dc509IfEjVzB1EsCmjv7d3Ps9JyF1VatSF3gZ7TCOdY+hTxsgw==}
-
   '@shikijs/core@3.13.0':
     resolution: {integrity: sha512-3P8rGsg2Eh2qIHekwuQjzWhKI4jV97PhvYjYUzGqjvJfqdQPz+nMlfWahU24GZAyW1FxFI1sYjyhfh5CoLmIUA==}
 
+  '@shikijs/core@3.14.0':
+    resolution: {integrity: sha512-qRSeuP5vlYHCNUIrpEBQFO7vSkR7jn7Kv+5X3FO/zBKVDGQbcnlScD3XhkrHi/R8Ltz0kEjvFR9Szp/XMRbFMw==}
+
   '@shikijs/engine-javascript@3.13.0':
     resolution: {integrity: sha512-Ty7xv32XCp8u0eQt8rItpMs6rU9Ki6LJ1dQOW3V/56PKDcpvfHPnYFbsx5FFUP2Yim34m/UkazidamMNVR4vKg==}
 
+  '@shikijs/engine-javascript@3.14.0':
+    resolution: {integrity: sha512-3v1kAXI2TsWQuwv86cREH/+FK9Pjw3dorVEykzQDhwrZj0lwsHYlfyARaKmn6vr5Gasf8aeVpb8JkzeWspxOLQ==}
+
   '@shikijs/engine-oniguruma@3.13.0':
     resolution: {integrity: sha512-O42rBGr4UDSlhT2ZFMxqM7QzIU+IcpoTMzb3W7AlziI1ZF7R8eS2M0yt5Ry35nnnTX/LTLXFPUjRFCIW+Operg==}
 
+  '@shikijs/engine-oniguruma@3.14.0':
+    resolution: {integrity: sha512-TNcYTYMbJyy+ZjzWtt0bG5y4YyMIWC2nyePz+CFMWqm+HnZZyy9SWMgo8Z6KBJVIZnx8XUXS8U2afO6Y0g1Oug==}
+
   '@shikijs/langs@3.13.0':
     resolution: {integrity: sha512-672c3WAETDYHwrRP0yLy3W1QYB89Hbpj+pO4KhxK6FzIrDI2FoEXNiNCut6BQmEApYLfuYfpgOZaqbY+E9b8wQ==}
 
+  '@shikijs/langs@3.14.0':
+    resolution: {integrity: sha512-DIB2EQY7yPX1/ZH7lMcwrK5pl+ZkP/xoSpUzg9YC8R+evRCCiSQ7yyrvEyBsMnfZq4eBzLzBlugMyTAf13+pzg==}
+
   '@shikijs/themes@3.13.0':
     resolution: {integrity: sha512-Vxw1Nm1/Od8jyA7QuAenaV78BG2nSr3/gCGdBkLpfLscddCkzkL36Q5b67SrLLfvAJTOUzW39x4FHVCFriPVgg==}
 
+  '@shikijs/themes@3.14.0':
+    resolution: {integrity: sha512-fAo/OnfWckNmv4uBoUu6dSlkcBc+SA1xzj5oUSaz5z3KqHtEbUypg/9xxgJARtM6+7RVm0Q6Xnty41xA1ma1IA==}
+
   '@shikijs/transformers@3.13.0':
     resolution: {integrity: sha512-833lcuVzcRiG+fXvgslWsM2f4gHpjEgui1ipIknSizRuTgMkNZupiXE5/TVJ6eSYfhNBFhBZKkReKWO2GgYmqA==}
 
   '@shikijs/types@3.13.0':
     resolution: {integrity: sha512-oM9P+NCFri/mmQ8LoFGVfVyemm5Hi27330zuOBp0annwJdKH1kOLndw3zCtAVDehPLg9fKqoEx3Ht/wNZxolfw==}
 
+  '@shikijs/types@3.14.0':
+    resolution: {integrity: sha512-bQGgC6vrY8U/9ObG1Z/vTro+uclbjjD/uG58RvfxKZVD5p9Yc1ka3tVyEFy7BNJLzxuWyHH5NWynP9zZZS59eQ==}
+
   '@shikijs/vscode-textmate@10.0.2':
     resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==}
 
@@ -3033,17 +3045,6 @@ packages:
   '@vue/shared@3.5.22':
     resolution: {integrity: sha512-F4yc6palwq3TT0u+FYf0Ns4Tfl9GRFURDN2gWG7L1ecIaS/4fCIuFOjMTnCyjsu/OK6vaDKLCrGAa+KvvH+h4w==}
 
-  '@vue/tsconfig@0.8.1':
-    resolution: {integrity: sha512-aK7feIWPXFSUhsCP9PFqPyFOcz4ENkb8hZ2pneL6m2UjCkccvaOhC/5KCKluuBufvp2KzkbdA2W2pk20vLzu3g==}
-    peerDependencies:
-      typescript: 5.x
-      vue: ^3.4.0
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-      vue:
-        optional: true
-
   '@vueuse/core@10.11.1':
     resolution: {integrity: sha512-guoy26JQktXPcz+0n3GukWIy/JDNKti9v6VEMu6kV2sYBsWuGiTU8OWdg+ADfUbHg3/3DlqySDe7JmdHrktiww==}
 
@@ -6499,17 +6500,12 @@ packages:
     resolution: {integrity: sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw==}
     engines: {node: '>= 0.4'}
 
-  shiki-block-vue@1.0.5:
-    resolution: {integrity: sha512-Xq1c7eXm6LsKsHufNRvwzNadvELVL5eGonlUGEeTbIFun/9ppRlckyQvbDsShC3cYbMcWHMA5E8zifxjXtXh1g==}
-    peerDependencies:
-      '@vue/tsconfig': ^0.7.0 || ^0.8.1
-      vite: ^4.0.0 || ^5.0.0 || ^7.0.0
-      vue: ^3
-      vue-tsc: ^2.2.0 || ^3.0.6
-
   shiki@3.13.0:
     resolution: {integrity: sha512-aZW4l8Og16CokuCLf8CF8kq+KK2yOygapU5m3+hoGw0Mdosc6fPitjM+ujYarppj5ZIKGyPDPP1vqmQhr+5/0g==}
 
+  shiki@3.14.0:
+    resolution: {integrity: sha512-J0yvpLI7LSig3Z3acIuDLouV5UCKQqu8qOArwMx+/yPVC3WRMgrP67beaG8F+j4xfEWE0eVC4GeBCIXeOPra1g==}
+
   signal-exit@4.1.0:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
@@ -9826,10 +9822,6 @@ snapshots:
 
   '@sec-ant/readable-stream@0.4.1': {}
 
-  '@selemondev/shiki-transformer-copy-button@0.0.2':
-    dependencies:
-      hastscript: 9.0.1
-
   '@shikijs/core@3.13.0':
     dependencies:
       '@shikijs/types': 3.13.0
@@ -9837,25 +9829,51 @@ snapshots:
       '@types/hast': 3.0.4
       hast-util-to-html: 9.0.5
 
+  '@shikijs/core@3.14.0':
+    dependencies:
+      '@shikijs/types': 3.14.0
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+      hast-util-to-html: 9.0.5
+
   '@shikijs/engine-javascript@3.13.0':
     dependencies:
       '@shikijs/types': 3.13.0
       '@shikijs/vscode-textmate': 10.0.2
       oniguruma-to-es: 4.3.3
 
+  '@shikijs/engine-javascript@3.14.0':
+    dependencies:
+      '@shikijs/types': 3.14.0
+      '@shikijs/vscode-textmate': 10.0.2
+      oniguruma-to-es: 4.3.3
+
   '@shikijs/engine-oniguruma@3.13.0':
     dependencies:
       '@shikijs/types': 3.13.0
       '@shikijs/vscode-textmate': 10.0.2
 
+  '@shikijs/engine-oniguruma@3.14.0':
+    dependencies:
+      '@shikijs/types': 3.14.0
+      '@shikijs/vscode-textmate': 10.0.2
+
   '@shikijs/langs@3.13.0':
     dependencies:
       '@shikijs/types': 3.13.0
 
+  '@shikijs/langs@3.14.0':
+    dependencies:
+      '@shikijs/types': 3.14.0
+
   '@shikijs/themes@3.13.0':
     dependencies:
       '@shikijs/types': 3.13.0
 
+  '@shikijs/themes@3.14.0':
+    dependencies:
+      '@shikijs/types': 3.14.0
+
   '@shikijs/transformers@3.13.0':
     dependencies:
       '@shikijs/core': 3.13.0
@@ -9866,6 +9884,11 @@ snapshots:
       '@shikijs/vscode-textmate': 10.0.2
       '@types/hast': 3.0.4
 
+  '@shikijs/types@3.14.0':
+    dependencies:
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+
   '@shikijs/vscode-textmate@10.0.2': {}
 
   '@shuding/opentype.js@1.4.0-beta.0':
@@ -10525,6 +10548,7 @@ snapshots:
       '@volar/language-core': 2.4.23
       path-browserify: 1.0.1
       vscode-uri: 3.1.0
+    optional: true
 
   '@vue-macros/common@1.16.1(vue@3.5.22(typescript@5.9.3))':
     dependencies:
@@ -10698,11 +10722,6 @@ snapshots:
 
   '@vue/shared@3.5.22': {}
 
-  '@vue/tsconfig@0.8.1(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3))':
-    optionalDependencies:
-      typescript: 5.9.3
-      vue: 3.5.22(typescript@5.9.3)
-
   '@vueuse/core@10.11.1(vue@3.5.22(typescript@5.9.3))':
     dependencies:
       '@types/web-bluetooth': 0.0.20
@@ -15340,13 +15359,6 @@ snapshots:
 
   shell-quote@1.8.3: {}
 
-  shiki-block-vue@1.0.5(@vue/tsconfig@0.8.1(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3)))(vite@7.1.9(@types/node@24.6.2)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1))(vue-tsc@3.1.0(typescript@5.9.3))(vue@3.5.22(typescript@5.9.3)):
-    dependencies:
-      '@vue/tsconfig': 0.8.1(typescript@5.9.3)(vue@3.5.22(typescript@5.9.3))
-      vite: 7.1.9(@types/node@24.6.2)(jiti@2.6.1)(lightningcss@1.30.1)(terser@5.44.0)(yaml@2.8.1)
-      vue: 3.5.22(typescript@5.9.3)
-      vue-tsc: 3.1.0(typescript@5.9.3)
-
   shiki@3.13.0:
     dependencies:
       '@shikijs/core': 3.13.0
@@ -15358,6 +15370,17 @@ snapshots:
       '@shikijs/vscode-textmate': 10.0.2
       '@types/hast': 3.0.4
 
+  shiki@3.14.0:
+    dependencies:
+      '@shikijs/core': 3.14.0
+      '@shikijs/engine-javascript': 3.14.0
+      '@shikijs/engine-oniguruma': 3.14.0
+      '@shikijs/langs': 3.14.0
+      '@shikijs/themes': 3.14.0
+      '@shikijs/types': 3.14.0
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+
   signal-exit@4.1.0: {}
 
   simple-concat@1.0.1:
@@ -15479,7 +15502,7 @@ snapshots:
       remark-math: 6.0.0
       remark-parse: 11.0.0
       remark-rehype: 11.1.2
-      shiki: 3.13.0
+      shiki: 3.14.0
       typescript: 5.9.3
       unified: 11.0.5
       vue: 3.5.22(typescript@5.9.3)
@@ -16419,6 +16442,7 @@ snapshots:
       '@volar/typescript': 2.4.23
       '@vue/language-core': 3.1.0(typescript@5.9.3)
       typescript: 5.9.3
+    optional: true
 
   vue@3.5.22(typescript@5.9.3):
     dependencies: