+
+
+
+
+ {{ message.content }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ message.content }}
+
+
+
+
+
+
+
+
+
+
+
diff --git a/apps/test/app/pages/index.vue b/apps/test/app/pages/index.vue
index 6eb7502..f8101c4 100644
--- a/apps/test/app/pages/index.vue
+++ b/apps/test/app/pages/index.vue
@@ -2,6 +2,7 @@
import { Card, CardContent, CardHeader, CardTitle } from '@repo/shadcn-vue/components/ui/card'
import ActionsHover from '~/examples/actions-hover.vue'
import Actions from '~/examples/actions.vue'
+import Branch from '~/examples/branch.vue'
import Conversation from '~/examples/conversation.vue'
import MessageMarkdown from '~/examples/message-markdown.vue'
import Message from '~/examples/message.vue'
@@ -11,6 +12,7 @@ import Response from '~/examples/response.vue'
const components = [
{ name: 'Message', Component: Message },
{ name: 'Actions', Component: Actions },
+ { name: 'Branch', Component: Branch },
{ name: 'ActionsHover', Component: ActionsHover },
{ name: 'PromptInput', Component: PromptInput },
{ name: 'Conversation', Component: Conversation },
diff --git a/apps/www/content/1.overview/1.Introduction.md b/apps/www/content/1.overview/1.Introduction.md
index 71b36f0..aa02f2a 100644
--- a/apps/www/content/1.overview/1.Introduction.md
+++ b/apps/www/content/1.overview/1.Introduction.md
@@ -27,4 +27,7 @@ You can install it with:
:::ComponentLoader{label="Actions" componentName="Actions"}
:::
+:::ComponentLoader{label="Branch" componentName="Branch"}
+:::
+
View the [source code](https://github.com/cwandev/ai-elements-vue) for all components on GitHub.
diff --git a/apps/www/content/2.components/6.branch.md b/apps/www/content/2.components/6.branch.md
new file mode 100644
index 0000000..41e9a87
--- /dev/null
+++ b/apps/www/content/2.components/6.branch.md
@@ -0,0 +1,443 @@
+---
+title: Branch
+description:
+icon: lucide:git-branch
+---
+
+The `Branch` component manages multiple versions of AI messages, allowing users to navigate between different response branches. It provides a clean, modern interface with customizable themes and keyboard-accessible navigation buttons.
+
+::::ComponentLoader{label="Branch" componentName="Branch"}
+::::
+
+## Install using CLI
+
+:::tabs{variant="card"}
+ ::div{label="ai-elements-vue"}
+ ```sh
+ npx ai-elements-vue@latest add branch
+ ```
+ ::
+ ::div{label="shadcn-vue"}
+
+ ```sh
+ npx shadcn-vue@latest add https://registry.ai-elements-vue.com/branch.json
+ ```
+ ::
+:::
+
+## Install Manually
+
+Copy and paste the following files into the same folder.
+
+:::code-group
+ ```vue [Branch.vue]
+
+
+