diff --git a/apps/www/content/2.components/artifact.md b/apps/www/content/2.components/artifact.md
new file mode 100644
index 0000000..13d505e
--- /dev/null
+++ b/apps/www/content/2.components/artifact.md
@@ -0,0 +1,402 @@
+---
+title: Artifact
+description: A container component for displaying generated content like code, documents, or other outputs with built-in actions.
+icon: lucide:file-text
+---
+
+The `Artifact` component provides a structured container for displaying generated content like code, documents, or other outputs with built-in header actions.
+
+## Install using CLI
+
+:::tabs{variant="card"}
+  ::div{label="ai-elements-vue"}
+  ```sh
+  npx ai-elements-vue@latest add artifact
+  ```
+  ::
+  ::div{label="shadcn-vue"}
+
+  ```sh
+  npx shadcn-vue@latest add https://registry.ai-elements-vue.com/artifact.json
+  ```
+  ::
+:::
+
+## Install Manually
+
+Copy and paste the following code in the same folder.
+
+:::code-group
+  ```vue [Artifact.vue]
+  <script setup lang="ts">
+  import type { HTMLAttributes } from 'vue'
+  import { cn } from '@repo/shadcn-vue/lib/utils'
+  import { computed, useAttrs } from 'vue'
+
+  const props = defineProps<{
+    class?: HTMLAttributes['class']
+  }>()
+
+  const classes = computed(() => cn(
+    'flex flex-col overflow-hidden rounded-lg border bg-background shadow-sm',
+    props.class,
+  ))
+  const attrs = useAttrs()
+  </script>
+
+  <template>
+    <div
+      :class="classes"
+      v-bind="attrs"
+    >
+      <slot />
+    </div>
+  </template>
+  ```
+
+  ```vue [ArtifactAction.vue]
+  <script setup lang="ts">
+  import type { ButtonVariants } from '@repo/shadcn-vue/components/ui/button'
+  import type { LucideIcon } from 'lucide-vue-next'
+  import { Button } from '@repo/shadcn-vue/components/ui/button'
+  import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@repo/shadcn-vue/components/ui/tooltip'
+  import { cn } from '@repo/shadcn-vue/lib/utils'
+  import { computed } from 'vue'
+
+  interface ArtifactActionProps {
+    class?: string
+    tooltip?: string
+    label?: string
+    variant?: ButtonVariants['variant']
+    size?: ButtonVariants['size']
+    icon?: LucideIcon
+  }
+
+  const props = withDefaults(defineProps<ArtifactActionProps>(), {
+    variant: 'ghost',
+    size: 'sm',
+  })
+
+  const classes = computed(() => cn(
+    'size-8 p-0 text-muted-foreground hover:text-foreground',
+    props.class,
+  ))
+  </script>
+
+  <template>
+    <TooltipProvider v-if="props.tooltip">
+      <Tooltip>
+        <TooltipTrigger as-child>
+          <Button
+            type="button"
+            v-bind="{
+              ...props,
+              class: classes,
+            }"
+          >
+            <component
+              :is="props.icon"
+              v-if="props.icon"
+              class="size-4"
+            />
+            <slot v-else />
+            <span class="sr-only">{{ props.label || props.tooltip }}</span>
+          </Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>{{ props.tooltip }}</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+
+    <Button
+      v-else
+      type="button"
+      v-bind="{
+        ...props,
+        class: classes,
+      }"
+    >
+      <component
+        :is="props.icon"
+        v-if="props.icon"
+        class="size-4"
+      />
+      <slot v-else />
+      <span class="sr-only">{{ props.label || props.tooltip }}</span>
+    </Button>
+  </template>
+  ```
+
+  ```vue [ArtifactActions.vue]
+  <script setup lang="ts">
+  import type { HTMLAttributes } from 'vue'
+  import { cn } from '@repo/shadcn-vue/lib/utils'
+  import { computed, useAttrs } from 'vue'
+
+  const props = defineProps<{
+    class?: HTMLAttributes['class']
+  }>()
+  const attrs = useAttrs()
+  const classes = computed(() => cn('flex items-center gap-1', props.class))
+  </script>
+
+  <template>
+    <div
+      :class="classes"
+      v-bind="attrs"
+    >
+      <slot />
+    </div>
+  </template>
+  ```
+
+  ```vue [ArtifactClose.vue]
+  <script setup lang="ts">
+  import type { ButtonVariants } from '@repo/shadcn-vue/components/ui/button'
+  import { Button } from '@repo/shadcn-vue/components/ui/button'
+  import { cn } from '@repo/shadcn-vue/lib/utils'
+  import { X } from 'lucide-vue-next'
+  import { computed } from 'vue'
+
+  interface ArtifactCloseProps {
+    class?: string
+    variant?: ButtonVariants['variant']
+    size?: ButtonVariants['size']
+  }
+
+  const props = withDefaults(defineProps<ArtifactCloseProps>(), {
+    variant: 'ghost',
+    size: 'sm',
+  })
+
+  const classes = computed(() => cn(
+    'size-8 p-0 text-muted-foreground hover:text-foreground',
+    props.class,
+  ))
+  </script>
+
+  <template>
+    <Button
+      type="button"
+      v-bind="{
+        ...props,
+        class: classes,
+      }"
+    >
+      <slot>
+        <X class="size-4" />
+      </slot>
+      <span class="sr-only">Close</span>
+    </Button>
+  </template>
+  ```
+
+  ```vue [ArtifactContent.vue]
+  <script setup lang="ts">
+  import type { HTMLAttributes } from 'vue'
+  import { cn } from '@repo/shadcn-vue/lib/utils'
+  import { computed, useAttrs } from 'vue'
+
+  const props = defineProps<{
+    class?: HTMLAttributes['class']
+  }>()
+  const attrs = useAttrs()
+
+  const classes = computed(() => cn('flex-1 overflow-auto p-4', props.class))
+  </script>
+
+  <template>
+    <div
+      :class="classes"
+      v-bind="attrs"
+    >
+      <slot />
+    </div>
+  </template>
+  ```
+
+  ```vue [ArtifactDescription.vue]
+  <script setup lang="ts">
+  import type { HTMLAttributes } from 'vue'
+  import { cn } from '@repo/shadcn-vue/lib/utils'
+  import { computed, useAttrs } from 'vue'
+
+  const props = defineProps<{
+    class?: HTMLAttributes['class']
+  }>()
+  const attrs = useAttrs()
+
+  const classes = computed(() => cn('text-muted-foreground text-sm', props.class))
+  </script>
+
+  <template>
+    <p
+      :class="classes"
+      v-bind="attrs"
+    >
+      <slot />
+    </p>
+  </template>
+  ```
+
+  ```vue [ArtifactHeader.vue]
+  <script setup lang="ts">
+  import type { HTMLAttributes } from 'vue'
+  import { cn } from '@repo/shadcn-vue/lib/utils'
+  import { computed, useAttrs } from 'vue'
+
+  const props = defineProps<{
+    class?: HTMLAttributes['class']
+  }>()
+
+  const classes = computed(() => cn(
+    'flex items-center justify-between border-b bg-muted/50 px-4 py-3',
+    props.class,
+  ))
+  const attrs = useAttrs()
+  </script>
+
+  <template>
+    <div
+      :class="classes"
+      v-bind="attrs"
+    >
+      <slot />
+    </div>
+  </template>
+  ```
+
+  ```vue [ArtifactTitle.vue]
+  <script setup lang="ts">
+  import type { HTMLAttributes } from 'vue'
+  import { cn } from '@repo/shadcn-vue/lib/utils'
+  import { computed, useAttrs } from 'vue'
+
+  const props = defineProps<{
+    class?: HTMLAttributes['class']
+  }>()
+
+  const classes = computed(() => cn('font-medium text-foreground text-sm', props.class))
+  const attrs = useAttrs()
+  </script>
+
+  <template>
+    <p
+      v-bind="attrs"
+      :class="classes"
+    >
+      <slot />
+    </p>
+  </template>
+  ```
+
+  ```ts [index.ts]
+  export { default as Artifact } from './Artifact.vue'
+  export { default as ArtifactAction } from './ArtifactAction.vue'
+  export { default as ArtifactActions } from './ArtifactActions.vue'
+  export { default as ArtifactClose } from './ArtifactClose.vue'
+  export { default as ArtifactContent } from './ArtifactContent.vue'
+  export { default as ArtifactDescription } from './ArtifactDescription.vue'
+  export { default as ArtifactHeader } from './ArtifactHeader.vue'
+  export { default as ArtifactTitle } from './ArtifactTitle.vue'
+  ```
+
+:::
+
+## Features
+
+- Structured container with header and content areas
+- Built-in header with title and description support
+- Flexible action buttons with tooltips
+- Customizable styling for all subcomponents
+- Support for close buttons and action groups
+- Clean, modern design with border and shadow
+- Responsive layout that adapts to content
+- TypeScript support with proper type definitions
+- Composable architecture for maximum flexibility
+
+## Examples
+
+### With Code Display
+
+:::ComponentLoader{label="Artifact" componentName="Artifact"}
+:::
+
+## Props
+
+### `<Artifact />`
+
+:::field-group
+  ::field{name="[...props]" type="HTMLAttributes"}
+  Additional props forwarded to the root `<div>` element.
+  ::
+:::
+
+### `<ArtifactHeader />`
+
+:::field-group
+  ::field{name="[...props]" type="HTMLAttributes"}
+  Additional props forwarded to the header `<div>` element.
+  ::
+:::
+
+### `<ArtifactTitle />`
+
+:::field-group
+  ::field{name="[...props]" type="HTMLAttributes"}
+  Additional props forwarded to the title `<p>` element.
+  ::
+:::
+
+### `<ArtifactDescription />`
+
+:::field-group
+  ::field{name="[...props]" type="HTMLAttributes"}
+  Additional props forwarded to the description `<p>` element.
+  ::
+:::
+
+### `<ArtifactActions />`
+
+:::field-group
+  ::field{name="[...props]" type="HTMLAttributes"}
+  Additional props forwarded to the actions `<div>` element.
+  ::
+:::
+
+### `<ArtifactAction />`
+
+:::field-group
+  ::field{name="tooltip" type="string"}
+  Tooltip text shown when hovering the action button.
+  ::
+
+  ::field{name="label" type="string"}
+  Screen reader label used for accessible button text.
+  ::
+
+  ::field{name="icon" type="LucideIcon"}
+  Lucide icon component rendered inside the action button.
+  ::
+
+  ::field{name="[...props]" type="ButtonProps"}
+  Additional props forwarded to the underlying shadcn-vue `Button`.
+  ::
+:::
+
+### `<ArtifactClose />`
+
+:::field-group
+  ::field{name="[...props]" type="ButtonProps"}
+  Additional props forwarded to the underlying shadcn-vue `Button`.
+  ::
+:::
+
+### `<ArtifactContent />`
+
+:::field-group
+  ::field{name="[...props]" type="HTMLAttributes"}
+  Additional props forwarded to the content `<div>` element.
+  ::
+:::
diff --git a/apps/www/plugins/ai-elements.ts b/apps/www/plugins/ai-elements.ts
index afe782c..82f4990 100644
--- a/apps/www/plugins/ai-elements.ts
+++ b/apps/www/plugins/ai-elements.ts
@@ -1,6 +1,7 @@
 import {
   Actions,
   ActionsHover,
+  Artifact,
   Branch,
   ChainOfThought,
   CodeBlock,
@@ -39,6 +40,7 @@ export default defineNuxtPlugin((nuxtApp) => {
   vueApp.component('ComponentLoader', ComponentLoader)
   vueApp.component('ComponentViewer', ComponentViewer)
 
+  vueApp.component('Artifact', Artifact)
   vueApp.component('Actions', Actions)
   vueApp.component('ActionsHover', ActionsHover)
   vueApp.component('Branch', Branch)
diff --git a/packages/elements/src/artifact/Artifact.vue b/packages/elements/src/artifact/Artifact.vue
new file mode 100644
index 0000000..6375401
--- /dev/null
+++ b/packages/elements/src/artifact/Artifact.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { computed, useAttrs } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const classes = computed(() => cn(
+  'flex flex-col overflow-hidden rounded-lg border bg-background shadow-sm',
+  props.class,
+))
+const attrs = useAttrs()
+</script>
+
+<template>
+  <div
+    :class="classes"
+    v-bind="attrs"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/packages/elements/src/artifact/ArtifactAction.vue b/packages/elements/src/artifact/ArtifactAction.vue
new file mode 100644
index 0000000..a5ce01e
--- /dev/null
+++ b/packages/elements/src/artifact/ArtifactAction.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import type { ButtonVariants } from '@repo/shadcn-vue/components/ui/button'
+import type { LucideIcon } from 'lucide-vue-next'
+import { Button } from '@repo/shadcn-vue/components/ui/button'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@repo/shadcn-vue/components/ui/tooltip'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { computed } from 'vue'
+
+interface ArtifactActionProps {
+  class?: string
+  tooltip?: string
+  label?: string
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
+  icon?: LucideIcon
+}
+
+const props = withDefaults(defineProps<ArtifactActionProps>(), {
+  variant: 'ghost',
+  size: 'sm',
+})
+
+const classes = computed(() => cn(
+  'size-8 p-0 text-muted-foreground hover:text-foreground',
+  props.class,
+))
+</script>
+
+<template>
+  <TooltipProvider v-if="props.tooltip">
+    <Tooltip>
+      <TooltipTrigger as-child>
+        <Button
+          type="button"
+          v-bind="{
+            ...props,
+            class: classes,
+          }"
+        >
+          <component
+            :is="props.icon"
+            v-if="props.icon"
+            class="size-4"
+          />
+          <slot v-else />
+          <span class="sr-only">{{ props.label || props.tooltip }}</span>
+        </Button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>{{ props.tooltip }}</p>
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+
+  <Button
+    v-else
+    type="button"
+    v-bind="{
+      ...props,
+      class: classes,
+    }"
+  >
+    <component
+      :is="props.icon"
+      v-if="props.icon"
+      class="size-4"
+    />
+    <slot v-else />
+    <span class="sr-only">{{ props.label || props.tooltip }}</span>
+  </Button>
+</template>
diff --git a/packages/elements/src/artifact/ArtifactActions.vue b/packages/elements/src/artifact/ArtifactActions.vue
new file mode 100644
index 0000000..693b617
--- /dev/null
+++ b/packages/elements/src/artifact/ArtifactActions.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { computed, useAttrs } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+const attrs = useAttrs()
+const classes = computed(() => cn('flex items-center gap-1', props.class))
+</script>
+
+<template>
+  <div
+    :class="classes"
+    v-bind="attrs"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/packages/elements/src/artifact/ArtifactClose.vue b/packages/elements/src/artifact/ArtifactClose.vue
new file mode 100644
index 0000000..53f6d2a
--- /dev/null
+++ b/packages/elements/src/artifact/ArtifactClose.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { ButtonVariants } from '@repo/shadcn-vue/components/ui/button'
+import { Button } from '@repo/shadcn-vue/components/ui/button'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { X } from 'lucide-vue-next'
+import { computed } from 'vue'
+
+interface ArtifactCloseProps {
+  class?: string
+  variant?: ButtonVariants['variant']
+  size?: ButtonVariants['size']
+}
+
+const props = withDefaults(defineProps<ArtifactCloseProps>(), {
+  variant: 'ghost',
+  size: 'sm',
+})
+
+const classes = computed(() => cn(
+  'size-8 p-0 text-muted-foreground hover:text-foreground',
+  props.class,
+))
+</script>
+
+<template>
+  <Button
+    type="button"
+    v-bind="{
+      ...props,
+      class: classes,
+    }"
+  >
+    <slot>
+      <X class="size-4" />
+    </slot>
+    <span class="sr-only">Close</span>
+  </Button>
+</template>
diff --git a/packages/elements/src/artifact/ArtifactContent.vue b/packages/elements/src/artifact/ArtifactContent.vue
new file mode 100644
index 0000000..9003798
--- /dev/null
+++ b/packages/elements/src/artifact/ArtifactContent.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { computed, useAttrs } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+const attrs = useAttrs()
+
+const classes = computed(() => cn('flex-1 overflow-auto p-4', props.class))
+</script>
+
+<template>
+  <div
+    :class="classes"
+    v-bind="attrs"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/packages/elements/src/artifact/ArtifactDescription.vue b/packages/elements/src/artifact/ArtifactDescription.vue
new file mode 100644
index 0000000..9efded6
--- /dev/null
+++ b/packages/elements/src/artifact/ArtifactDescription.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { computed, useAttrs } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+const attrs = useAttrs()
+
+const classes = computed(() => cn('text-muted-foreground text-sm', props.class))
+</script>
+
+<template>
+  <p
+    :class="classes"
+    v-bind="attrs"
+  >
+    <slot />
+  </p>
+</template>
diff --git a/packages/elements/src/artifact/ArtifactHeader.vue b/packages/elements/src/artifact/ArtifactHeader.vue
new file mode 100644
index 0000000..e669d8a
--- /dev/null
+++ b/packages/elements/src/artifact/ArtifactHeader.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { computed, useAttrs } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const classes = computed(() => cn(
+  'flex items-center justify-between border-b bg-muted/50 px-4 py-3',
+  props.class,
+))
+const attrs = useAttrs()
+</script>
+
+<template>
+  <div
+    :class="classes"
+    v-bind="attrs"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/packages/elements/src/artifact/ArtifactTitle.vue b/packages/elements/src/artifact/ArtifactTitle.vue
new file mode 100644
index 0000000..7cecf4d
--- /dev/null
+++ b/packages/elements/src/artifact/ArtifactTitle.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@repo/shadcn-vue/lib/utils'
+import { computed, useAttrs } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+
+const classes = computed(() => cn('font-medium text-foreground text-sm', props.class))
+const attrs = useAttrs()
+</script>
+
+<template>
+  <p
+    v-bind="attrs"
+    :class="classes"
+  >
+    <slot />
+  </p>
+</template>
diff --git a/packages/elements/src/artifact/index.ts b/packages/elements/src/artifact/index.ts
new file mode 100644
index 0000000..c921739
--- /dev/null
+++ b/packages/elements/src/artifact/index.ts
@@ -0,0 +1,8 @@
+export { default as Artifact } from './Artifact.vue'
+export { default as ArtifactAction } from './ArtifactAction.vue'
+export { default as ArtifactActions } from './ArtifactActions.vue'
+export { default as ArtifactClose } from './ArtifactClose.vue'
+export { default as ArtifactContent } from './ArtifactContent.vue'
+export { default as ArtifactDescription } from './ArtifactDescription.vue'
+export { default as ArtifactHeader } from './ArtifactHeader.vue'
+export { default as ArtifactTitle } from './ArtifactTitle.vue'
diff --git a/packages/elements/src/index.ts b/packages/elements/src/index.ts
index 2e9e507..f5d4f34 100644
--- a/packages/elements/src/index.ts
+++ b/packages/elements/src/index.ts
@@ -1,4 +1,5 @@
 export * from './actions'
+export * from './artifact'
 export * from './branch'
 export * from './chain-of-thought'
 export * from './code-block'
diff --git a/packages/examples/src/artifact.vue b/packages/examples/src/artifact.vue
new file mode 100644
index 0000000..f5899da
--- /dev/null
+++ b/packages/examples/src/artifact.vue
@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import {
+  Artifact,
+  ArtifactAction,
+  ArtifactActions,
+  ArtifactContent,
+  ArtifactDescription,
+  ArtifactHeader,
+  ArtifactTitle,
+} from '@repo/elements/artifact'
+import { CodeBlock } from '@repo/elements/code-block'
+import { Copy, Download, Play, RefreshCw, Share } from 'lucide-vue-next'
+
+const code = `# Dijkstra's Algorithm implementation
+import heapq
+
+def dijkstra(graph, start):
+    distances = {node: float('inf') for node in graph}
+    distances[start] = 0
+    heap = [(0, start)]
+    visited = set()
+    
+    while heap:
+        current_distance, current_node = heapq.heappop(heap)
+        if current_node in visited:
+            continue
+        visited.add(current_node)
+        
+        for neighbor, weight in graph[current_node].items():
+            distance = current_distance + weight
+            if distance < distances[neighbor]:
+                distances[neighbor] = distance
+                heapq.heappush(heap, (distance, neighbor))
+    
+    return distances
+
+# Example graph
+ graph = {
+    'A': {'B': 1, 'C': 4},
+    'B': {'A': 1, 'C': 2, 'D': 5},
+    'C': {'A': 4, 'B': 2, 'D': 1},
+    'D': {'B': 5, 'C': 1}
+}
+
+print(dijkstra(graph, 'A'))`
+
+function handleRun() {
+  // eslint-disable-next-line no-console
+  console.log('Run')
+}
+
+function handleCopy() {
+  // eslint-disable-next-line no-console
+  console.log('Copy')
+}
+
+function handleRegenerate() {
+  // eslint-disable-next-line no-console
+  console.log('Regenerate')
+}
+
+function handleDownload() {
+  // eslint-disable-next-line no-console
+  console.log('Download')
+}
+
+function handleShare() {
+  // eslint-disable-next-line no-console
+  console.log('Share')
+}
+</script>
+
+<template>
+  <Artifact>
+    <ArtifactHeader>
+      <div>
+        <ArtifactTitle>Dijkstra's Algorithm Implementation</ArtifactTitle>
+        <ArtifactDescription>Updated 1 minute ago</ArtifactDescription>
+      </div>
+      <div class="flex items-center gap-2">
+        <ArtifactActions>
+          <ArtifactAction
+            :icon="Play"
+            label="Run"
+            tooltip="Run code"
+            @click="handleRun"
+          />
+          <ArtifactAction
+            :icon="Copy"
+            label="Copy"
+            tooltip="Copy to clipboard"
+            @click="handleCopy"
+          />
+          <ArtifactAction
+            :icon="RefreshCw"
+            label="Regenerate"
+            tooltip="Regenerate content"
+            @click="handleRegenerate"
+          />
+          <ArtifactAction
+            :icon="Download"
+            label="Download"
+            tooltip="Download file"
+            @click="handleDownload"
+          />
+          <ArtifactAction
+            :icon="Share"
+            label="Share"
+            tooltip="Share artifact"
+            @click="handleShare"
+          />
+        </ArtifactActions>
+      </div>
+    </ArtifactHeader>
+    <ArtifactContent class="p-0">
+      <CodeBlock
+        class="border-none"
+        :code="code"
+        language="python"
+        show-line-numbers
+      />
+    </ArtifactContent>
+  </Artifact>
+</template>
diff --git a/packages/examples/src/index.ts b/packages/examples/src/index.ts
index fd38924..104d2a7 100644
--- a/packages/examples/src/index.ts
+++ b/packages/examples/src/index.ts
@@ -1,5 +1,6 @@
 export { default as ActionsHover } from './actions-hover.vue'
 export { default as Actions } from './actions.vue'
+export { default as Artifact } from './artifact.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'