diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
index 2c85b44b..4797e92c 100644
--- a/docs/.vitepress/config.js
+++ b/docs/.vitepress/config.js
@@ -260,7 +260,8 @@ export default {
                         {text: '日期选取器 (Date Picker)', link: 'form/date-picker', icon: '/components/form/date-picker.svg', version: '2024.5.3'},
                         {text: '计划任务 (Cron)', link: 'form/cron', icon: '/components/form/cron.svg', version: '2024.5.3'},
                         {text: '提及 (Mention)', link: 'form/mention', icon: '/components/form/mention.svg', version: '2025.1.0'},
-                        {text: 'IP输入框 (IP Input)', link: 'form/ip-input', icon: '/components/form/ip-input.svg', version: '2025.1.3'}
+                        {text: 'IP输入框 (IP Input)', link: 'form/ip-input', icon: '/components/form/ip-input.svg', version: '2025.1.3'},
+                        {text: '穿梭框 (Transfer)', link: 'form/transfer', icon: '/components/form/transfer.svg', version: '2026.0.0'}
                     ]
 
                     return {
diff --git a/docs/components/form/transfer.md b/docs/components/form/transfer.md
new file mode 100644
index 00000000..843bd688
--- /dev/null
+++ b/docs/components/form/transfer.md
@@ -0,0 +1,811 @@
+---
+title: 穿梭框 (Transfer)
+---
+
+# 介绍
+
+<br />
+
+本文档主要用于描述 `ShadcnTransfer` 组件的一些特性和用法。
+
+## 用法
+
+<CodeRunner title="用法">
+    <ShadcnTransfer
+        v-model="selected1"
+        :data="data1"
+        :dark="darkMode"
+        @on-change="handleChange" />
+</CodeRunner>
+
+::: details 查看代码
+
+```vue
+<template>
+<ShadcnTransfer
+    v-model="selected"
+    :data="data"
+    :dark="darkMode"
+    @on-change="handleChange" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useData } from 'vitepress'
+import { computed } from 'vue'
+
+const { isDark } = useData()
+const darkMode = computed(() => isDark.value)
+
+const selected = ref([2, 3])
+
+const data = ref([
+    { key: 1, label: '选项 1' },
+    { key: 2, label: '选项 2' },
+    { key: 3, label: '选项 3' },
+    { key: 4, label: '选项 4' },
+    { key: 5, label: '选项 5' },
+])
+
+const handleChange = (value, direction, movedKeys) => {
+    console.log('value:', value)
+    console.log('direction:', direction)
+    console.log('movedKeys:', movedKeys)
+}
+</script>
+```
+
+:::
+
+## 自定义列表标题
+
+<CodeRunner title="自定义列表标题">
+    <ShadcnTransfer
+        v-model="selected2"
+        :data="data2"
+        :dark="darkMode"
+        left-title="待选择"
+        right-title="已选择" />
+</CodeRunner>
+
+::: details 查看代码
+
+```vue
+<template>
+<ShadcnTransfer
+    v-model="selected"
+    :data="data"
+    :dark="darkMode"
+    left-title="待选择"
+    right-title="已选择" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const selected = ref([2])
+
+const data = ref([
+    { key: 1, label: 'Angular' },
+    { key: 2, label: 'React' },
+    { key: 3, label: 'Vue' },
+    { key: 4, label: 'Svelte' },
+])
+</script>
+```
+
+:::
+
+## 自定义高度
+
+<CodeRunner title="自定义高度">
+    <ShadcnTransfer
+        v-model="selected13"
+        :data="data13"
+        :dark="darkMode"
+        height="400px" />
+</CodeRunner>
+
+::: details 查看代码
+
+```vue
+<template>
+<ShadcnTransfer
+    v-model="selected"
+    :data="data"
+    :dark="darkMode"
+    height="400px" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useData } from 'vitepress'
+import { computed } from 'vue'
+
+const { isDark } = useData()
+const darkMode = computed(() => isDark.value)
+
+const selected = ref([1, 2])
+
+const data = ref([
+    { key: 1, label: '选项 1' },
+    { key: 2, label: '选项 2' },
+    { key: 3, label: '选项 3' },
+    { key: 4, label: '选项 4' },
+    { key: 5, label: '选项 5' },
+    { key: 6, label: '选项 6' },
+    { key: 7, label: '选项 7' },
+    { key: 8, label: '选项 8' },
+])
+</script>
+```
+
+:::
+
+## 可搜索 (filterable)
+
+<CodeRunner title="可搜索 (filterable)">
+    <ShadcnTransfer
+        v-model="selected14"
+        :data="data14"
+        :dark="darkMode"
+        :filterable="true" />
+</CodeRunner>
+
+::: details 查看代码
+
+```vue
+<template>
+<ShadcnTransfer
+    v-model="selected"
+    :data="data"
+    :dark="darkMode"
+    :filterable="true" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useData } from 'vitepress'
+import { computed } from 'vue'
+
+const { isDark } = useData()
+const darkMode = computed(() => isDark.value)
+
+const selected = ref([1, 2])
+
+const data = ref([
+    { key: 1, label: 'JavaScript' },
+    { key: 2, label: 'TypeScript' },
+    { key: 3, label: 'Python' },
+    { key: 4, label: 'Java' },
+    { key: 5, label: 'C++' },
+    { key: 6, label: 'Go' },
+    { key: 7, label: 'Rust' },
+    { key: 8, label: 'Ruby' },
+    { key: 9, label: 'PHP' },
+    { key: 10, label: 'Swift' },
+])
+</script>
+```
+
+:::
+
+## 自定义搜索方法
+
+<CodeRunner title="自定义搜索方法">
+    <ShadcnTransfer
+        v-model="selected15"
+        :data="data15"
+        :dark="darkMode"
+        :filterable="true"
+        :filter-method="customFilterMethod"
+        filter-placeholder="按拼音首字母搜索" />
+</CodeRunner>
+
+::: details 查看代码
+
+```vue
+<template>
+<ShadcnTransfer
+    v-model="selected"
+    :data="data"
+    :dark="darkMode"
+    :filterable="true"
+    :filter-method="customFilterMethod"
+    filter-placeholder="按拼音首字母搜索" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useData } from 'vitepress'
+import { computed } from 'vue'
+
+const { isDark } = useData()
+const darkMode = computed(() => isDark.value)
+
+const selected = ref([1])
+
+const data = ref([
+    { key: 1, label: '北京', pinyin: 'beijing' },
+    { key: 2, label: '上海', pinyin: 'shanghai' },
+    { key: 3, label: '广州', pinyin: 'guangzhou' },
+    { key: 4, label: '深圳', pinyin: 'shenzhen' },
+    { key: 5, label: '杭州', pinyin: 'hangzhou' },
+    { key: 6, label: '成都', pinyin: 'chengdu' },
+])
+
+const customFilterMethod = (query: string, item: any) => {
+    return item.label.includes(query) || item.pinyin.includes(query.toLowerCase())
+}
+</script>
+```
+
+:::
+
+## 禁用 (disabled)
+
+<CodeRunner title="禁用 (disabled)">
+    <ShadcnTransfer
+        v-model="selected3"
+        :data="data3"
+        :dark="darkMode" />
+</CodeRunner>
+
+::: details 查看代码
+
+```vue
+<template>
+<ShadcnTransfer
+    v-model="selected"
+    :data="data"
+    :dark="darkMode" />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const selected = ref([])
+
+const data = ref([
+    { key: 1, label: '可选项 1' },
+    { key: 2, label: '禁用项 1', disabled: true },
+    { key: 3, label: '可选项 2' },
+    { key: 4, label: '禁用项 2', disabled: true },
+    { key: 5, label: '可选项 3' },
+])
+</script>
+```
+
+:::
+
+## 尺寸 (size)
+
+<CodeRunner title="尺寸 (size)">
+    <div class="space-y-4">
+        <ShadcnTransfer
+            v-model="selected5"
+            :data="data5"
+            size="small"
+            :dark="darkMode" />
+        <ShadcnTransfer
+            v-model="selected6"
+            :data="data6"
+            size="default"
+            :dark="darkMode" />
+        <ShadcnTransfer
+            v-model="selected7"
+            :data="data7"
+            size="large"
+            :dark="darkMode" />
+    </div>
+</CodeRunner>
+
+::: details 查看代码
+
+```vue
+<template>
+<div class="space-y-4">
+    <ShadcnTransfer
+        v-model="selected"
+        :data="data"
+        size="small"
+        :dark="darkMode" />
+
+    <ShadcnTransfer
+        v-model="selected"
+        :data="data"
+        size="default"
+        :dark="darkMode" />
+
+    <ShadcnTransfer
+        v-model="selected"
+        :data="data"
+        size="large"
+        :dark="darkMode" />
+</div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useData } from 'vitepress'
+import { computed } from 'vue'
+
+const { isDark } = useData()
+const darkMode = computed(() => isDark.value)
+
+const selected = ref([1])
+
+const data = ref([
+    { key: 1, label: '选项 1' },
+    { key: 2, label: '选项 2' },
+    { key: 3, label: '选项 3' },
+])
+</script>
+```
+
+:::
+
+## 类型 (type)
+
+<CodeRunner title="类型 (type)">
+    <div class="space-y-4">
+        <ShadcnTransfer
+            v-model="selected8"
+            :data="data8"
+            type="primary"
+            :dark="darkMode" />
+        <ShadcnTransfer
+            v-model="selected9"
+            :data="data9"
+            type="success"
+            :dark="darkMode" />
+        <ShadcnTransfer
+            v-model="selected10"
+            :data="data10"
+            type="warning"
+            :dark="darkMode" />
+        <ShadcnTransfer
+            v-model="selected11"
+            :data="data11"
+            type="danger"
+            :dark="darkMode" />
+    </div>
+</CodeRunner>
+
+::: details 查看代码
+
+```vue
+<template>
+<div class="space-y-4">
+    <ShadcnTransfer
+        v-model="selected"
+        :data="data"
+        type="primary"
+        :dark="darkMode" />
+    <ShadcnTransfer
+        v-model="selected"
+        :data="data"
+        type="success"
+        :dark="darkMode" />
+    <ShadcnTransfer
+        v-model="selected"
+        :data="data"
+        type="warning"
+        :dark="darkMode" />
+    <ShadcnTransfer
+        v-model="selected"
+        :data="data"
+        type="danger"
+        :dark="darkMode" />
+</div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useData } from 'vitepress'
+import { computed } from 'vue'
+
+const { isDark } = useData()
+const darkMode = computed(() => isDark.value)
+
+const selected = ref([1])
+
+const data = ref([
+    { key: 1, label: '选项 1' },
+    { key: 2, label: '选项 2' },
+    { key: 3, label: '选项 3' },
+])
+</script>
+```
+
+:::
+
+## 液态玻璃效果 (glass)
+
+::: raw
+
+<CodeRunner title="液态玻璃效果 (glass)">
+    <div :class="['p-8 rounded-lg', darkMode ? 'bg-gradient-to-br from-purple-900 via-pink-900 to-red-900' : 'bg-gradient-to-br from-purple-400 via-pink-500 to-red-500']">
+        <ShadcnTransfer
+            v-model="selected12"
+            :data="data12"
+            :glass="true"
+            :dark="darkMode" />
+    </div>
+</CodeRunner>
+
+:::
+
+::: details 查看代码
+
+```vue
+<template>
+<div :class="['p-8 rounded-lg', darkMode ? 'bg-gradient-to-br from-purple-900 via-pink-900 to-red-900' : 'bg-gradient-to-br from-purple-400 via-pink-500 to-red-500']">
+    <ShadcnTransfer
+        v-model="selected"
+        :data="data"
+        :glass="true"
+        :dark="darkMode" />
+</div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useData } from 'vitepress'
+import { computed } from 'vue'
+
+const { isDark } = useData()
+const darkMode = computed(() => isDark.value)
+
+const selected = ref([2])
+
+const data = ref([
+    { key: 1, label: '选项 1' },
+    { key: 2, label: '选项 2' },
+    { key: 3, label: '选项 3' },
+    { key: 4, label: '选项 4' },
+])
+</script>
+```
+
+:::
+
+## 自定义渲染
+
+<CodeRunner title="自定义渲染">
+    <ShadcnTransfer
+        v-model="selected4"
+        :data="data4"
+        :dark="darkMode">
+        <template #item="{ item }">
+            <div class="flex items-center gap-2">
+                <ShadcnIcon :icon="item.icon" class="w-4 h-4" />
+                <span>{{ item.label }}</span>
+            </div>
+        </template>
+    </ShadcnTransfer>
+</CodeRunner>
+
+::: details 查看代码
+
+```vue
+<template>
+<ShadcnTransfer
+    v-model="selected"
+    :data="data"
+    :dark="darkMode">
+    <template #item="{ item }">
+        <div class="flex items-center gap-2">
+            <ShadcnIcon :icon="item.icon" class="w-4 h-4" />
+            <span>{{ item.label }}</span>
+        </div>
+    </template>
+</ShadcnTransfer>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const selected = ref([1])
+
+const data = ref([
+    { key: 1, label: '首页', icon: 'Home' },
+    { key: 2, label: '用户', icon: 'User' },
+    { key: 3, label: '设置', icon: 'Settings' },
+    { key: 4, label: '文件', icon: 'File' },
+])
+</script>
+```
+
+:::
+
+## 在表单中使用
+
+<CodeRunner title="在表单中使用">
+    <ShadcnForm ref="formRef" v-model="formData" @on-submit="onSubmit">
+        <ShadcnFormItem name="skills" label="技能选择" :rules="[{ required: true, message: '请选择技能' }]">
+            <ShadcnTransfer
+                v-model="formData.skills"
+                :data="skillsData"
+                :dark="darkMode"
+                left-title="可选技能"
+                right-title="已选技能" />
+        </ShadcnFormItem>
+        <div class="flex justify-end space-x-2 mt-6">
+            <ShadcnButton reset @click="resetForm">
+                重置
+            </ShadcnButton>
+            <ShadcnButton submit>
+                提交
+            </ShadcnButton>
+        </div>
+    </ShadcnForm>
+</CodeRunner>
+
+::: details 查看代码
+
+```vue
+<template>
+<ShadcnForm ref="formRef" v-model="formData" @on-submit="onSubmit">
+    <ShadcnFormItem name="skills" label="技能选择" :rules="[{ required: true, message: '请选择技能' }]">
+        <ShadcnTransfer
+            v-model="formData.skills"
+            :data="skillsData"
+            :dark="darkMode"
+            left-title="可选技能"
+            right-title="已选技能" />
+    </ShadcnFormItem>
+    <div class="flex justify-end space-x-2 mt-6">
+        <ShadcnButton reset @click="resetForm">
+            重置
+        </ShadcnButton>
+        <ShadcnButton submit>
+            提交
+        </ShadcnButton>
+    </div>
+</ShadcnForm>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useData } from 'vitepress'
+import { computed } from 'vue'
+
+const { isDark } = useData()
+const darkMode = computed(() => isDark.value)
+
+const formRef = ref()
+
+const formData = ref({
+    skills: [1, 2]
+})
+
+const skillsData = ref([
+    { key: 1, label: 'JavaScript' },
+    { key: 2, label: 'TypeScript' },
+    { key: 3, label: 'Vue.js' },
+    { key: 4, label: 'React' },
+    { key: 5, label: 'Angular' },
+    { key: 6, label: 'Node.js' },
+])
+
+const onSubmit = (data: any) => {
+    console.log('Form submitted:', data)
+}
+
+const resetForm = () => {
+    formRef.value.reset()
+}
+</script>
+```
+
+:::
+
+## 穿梭框 (Transfer) 属性
+
+<ApiTable title="穿梭框 (Transfer) 属性"
+    :headers="['属性', '描述', '类型', '默认值', '支持列表']"
+    :columns="[
+        ['data', '数据源', 'TransferItem[]', '[]', '-'],
+        ['modelValue', '已选择的数据', '(string | number)[]', '[]', '-'],
+        ['key', '数据项的唯一标识属性名', 'string', '\'key\'', '-'],
+        ['label', '数据项的显示文本属性名', 'string', '\'label\'', '-'],
+        ['leftTitle', '左侧列表标题（支持国际化）', 'string', 'transfer.text.leftTitle', '-'],
+        ['rightTitle', '右侧列表标题（支持国际化）', 'string', 'transfer.text.rightTitle', '-'],
+        ['height', '列表高度', 'string', '\'256px\'', '-'],
+        ['filterable', '是否可搜索', 'boolean', 'false', '-'],
+        ['filterPlaceholder', '搜索框占位符（支持国际化）', 'string', 'transfer.text.filterPlaceholder', '-'],
+        ['filterMethod', '自定义搜索方法', '(query: string, item: TransferItem) => boolean', '-', '-'],
+        ['dark', '暗黑模式', 'boolean', 'false', '-'],
+        ['glass', '液态玻璃效果', 'boolean', 'false', '-'],
+        ['type', '按钮和复选框类型', 'enum', 'primary', 'primary | success | warning | danger | info'],
+        ['size', '组件尺寸', 'enum', 'default', 'small | default | large'],
+    ]">
+</ApiTable>
+
+## 穿梭框 (Transfer) 事件
+
+<ApiTable title="穿梭框 (Transfer) 事件"
+    :headers="['事件', '描述', '回调参数']"
+    :columns="[
+        ['update:modelValue', '选中值改变时触发', 'value: (string | number)[]'],
+        ['on-change', '选中值改变时触发', 'value: (string | number)[], direction: \'left\' | \'right\', movedKeys: (string | number)[]'],
+    ]">
+</ApiTable>
+
+## 穿梭框 (Transfer) 插槽
+
+<ApiTable title="穿梭框 (Transfer) 插槽"
+    :headers="['插槽', '描述', '参数']"
+    :columns="[
+        ['item', '自定义列表项内容', '{ item: TransferItem }'],
+    ]">
+</ApiTable>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useData } from 'vitepress'
+import { computed } from 'vue'
+
+const { isDark } = useData()
+const darkMode = computed(() => isDark.value)
+
+const selected1 = ref([2, 3])
+const data1 = ref([
+    { key: 1, label: '选项 1' },
+    { key: 2, label: '选项 2' },
+    { key: 3, label: '选项 3' },
+    { key: 4, label: '选项 4' },
+    { key: 5, label: '选项 5' },
+])
+
+const selected2 = ref([2])
+const data2 = ref([
+    { key: 1, label: 'Angular' },
+    { key: 2, label: 'React' },
+    { key: 3, label: 'Vue' },
+    { key: 4, label: 'Svelte' },
+])
+
+const selected3 = ref([])
+const data3 = ref([
+    { key: 1, label: '可选项 1' },
+    { key: 2, label: '禁用项 1', disabled: true },
+    { key: 3, label: '可选项 2' },
+    { key: 4, label: '禁用项 2', disabled: true },
+    { key: 5, label: '可选项 3' },
+])
+
+const selected4 = ref([1])
+const data4 = ref([
+    { key: 1, label: '首页', icon: 'Home' },
+    { key: 2, label: '用户', icon: 'User' },
+    { key: 3, label: '设置', icon: 'Settings' },
+    { key: 4, label: '文件', icon: 'File' },
+])
+
+const selected5 = ref([1])
+const data5 = ref([
+    { key: 1, label: '选项 1' },
+    { key: 2, label: '选项 2' },
+    { key: 3, label: '选项 3' },
+])
+
+const selected6 = ref([1])
+const data6 = ref([
+    { key: 1, label: '选项 1' },
+    { key: 2, label: '选项 2' },
+    { key: 3, label: '选项 3' },
+])
+
+const selected7 = ref([1])
+const data7 = ref([
+    { key: 1, label: '选项 1' },
+    { key: 2, label: '选项 2' },
+    { key: 3, label: '选项 3' },
+])
+
+const selected8 = ref([1])
+const data8 = ref([
+    { key: 1, label: '选项 1' },
+    { key: 2, label: '选项 2' },
+    { key: 3, label: '选项 3' },
+])
+
+const selected9 = ref([1])
+const data9 = ref([
+    { key: 1, label: '选项 1' },
+    { key: 2, label: '选项 2' },
+    { key: 3, label: '选项 3' },
+])
+
+const selected10 = ref([1])
+const data10 = ref([
+    { key: 1, label: '选项 1' },
+    { key: 2, label: '选项 2' },
+    { key: 3, label: '选项 3' },
+])
+
+const selected11 = ref([1])
+const data11 = ref([
+    { key: 1, label: '选项 1' },
+    { key: 2, label: '选项 2' },
+    { key: 3, label: '选项 3' },
+])
+
+const selected12 = ref([2])
+const data12 = ref([
+    { key: 1, label: '选项 1' },
+    { key: 2, label: '选项 2' },
+    { key: 3, label: '选项 3' },
+    { key: 4, label: '选项 4' },
+])
+
+const selected13 = ref([1, 2])
+const data13 = ref([
+    { key: 1, label: '选项 1' },
+    { key: 2, label: '选项 2' },
+    { key: 3, label: '选项 3' },
+    { key: 4, label: '选项 4' },
+    { key: 5, label: '选项 5' },
+    { key: 6, label: '选项 6' },
+    { key: 7, label: '选项 7' },
+    { key: 8, label: '选项 8' },
+])
+
+const selected14 = ref([1, 2])
+const data14 = ref([
+    { key: 1, label: 'JavaScript' },
+    { key: 2, label: 'TypeScript' },
+    { key: 3, label: 'Python' },
+    { key: 4, label: 'Java' },
+    { key: 5, label: 'C++' },
+    { key: 6, label: 'Go' },
+    { key: 7, label: 'Rust' },
+    { key: 8, label: 'Ruby' },
+    { key: 9, label: 'PHP' },
+    { key: 10, label: 'Swift' },
+])
+
+const selected15 = ref([1])
+const data15 = ref([
+    { key: 1, label: '北京', pinyin: 'beijing' },
+    { key: 2, label: '上海', pinyin: 'shanghai' },
+    { key: 3, label: '广州', pinyin: 'guangzhou' },
+    { key: 4, label: '深圳', pinyin: 'shenzhen' },
+    { key: 5, label: '杭州', pinyin: 'hangzhou' },
+    { key: 6, label: '成都', pinyin: 'chengdu' },
+])
+
+const customFilterMethod = (query: string, item: any) => {
+    return item.label.includes(query) || item.pinyin.includes(query.toLowerCase())
+}
+
+const formRef = ref()
+const formData = ref({
+    skills: [1, 2]
+})
+
+const skillsData = ref([
+    { key: 1, label: 'JavaScript' },
+    { key: 2, label: 'TypeScript' },
+    { key: 3, label: 'Vue.js' },
+    { key: 4, label: 'React' },
+    { key: 5, label: 'Angular' },
+    { key: 6, label: 'Node.js' },
+])
+
+const onSubmit = (data: any) => {
+    console.log('Form submitted:', data)
+}
+
+const resetForm = () => {
+    formRef.value.reset()
+}
+
+const handleChange = (value, direction, movedKeys) => {
+    console.log('value:', value)
+    console.log('direction:', direction)
+    console.log('movedKeys:', movedKeys)
+}
+</script>
diff --git a/packages/index.ts b/packages/index.ts
index 43e6d116..a684ff48 100644
--- a/packages/index.ts
+++ b/packages/index.ts
@@ -83,6 +83,7 @@ import { ShadcnNotification, ShadcnNotificationItem } from '@/ui/notification'
 import { ShadcnTime } from '@/ui/time'
 import { ShadcnIPInput } from '@/ui/ip-input'
 import { ShadcnMarkdown } from '@/ui/markdown'
+import { ShadcnTransfer } from '@/ui/transfer'
 
 let components = [
     ShadcnButton, ShadcnButtonGroup,
@@ -163,7 +164,8 @@ let components = [
     ShadcnNotification, ShadcnNotificationItem,
     ShadcnTime,
     ShadcnIPInput,
-    ShadcnMarkdown
+    ShadcnMarkdown,
+    ShadcnTransfer
 ]
 
 interface InstallOptions
@@ -279,6 +281,7 @@ export { ShadcnNotification, ShadcnNotificationItem } from '@/ui/notification'
 export { ShadcnTime } from '@/ui/time'
 export { ShadcnIPInput } from '@/ui/ip-input'
 export { ShadcnMarkdown } from '@/ui/markdown'
+export { ShadcnTransfer } from '@/ui/transfer'
 
 // Export functions
 export { fnToString, fnToFunction } from '@/utils/formatter'
diff --git a/playground/src/example/transfer/custom.vue b/playground/src/example/transfer/custom.vue
new file mode 100644
index 00000000..3af7e72c
--- /dev/null
+++ b/playground/src/example/transfer/custom.vue
@@ -0,0 +1,44 @@
+<template>
+  <div class="space-y-6">
+    <div>
+      <p class="text-sm mb-2 font-semibold">自定义渲染</p>
+      <ShadcnTransfer
+        v-model="selected"
+        :data="data">
+        <template #item="{ item }">
+          <div class="flex items-center gap-2">
+            <ShadcnIcon :icon="item.icon" class="w-4 h-4" />
+            <span>{{ item.label }}</span>
+          </div>
+        </template>
+      </ShadcnTransfer>
+    </div>
+
+    <div>
+      <p class="text-sm mb-2 font-semibold">禁用状态</p>
+      <ShadcnTransfer
+        v-model="selected2"
+        :data="data2" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const selected = ref([1])
+const data = ref([
+  { key: 1, label: '首页', icon: 'Home' },
+  { key: 2, label: '用户', icon: 'User' },
+  { key: 3, label: '设置', icon: 'Settings' },
+  { key: 4, label: '文件', icon: 'File' },
+])
+
+const selected2 = ref([2])
+const data2 = ref([
+  { key: 1, label: '选项 1' },
+  { key: 2, label: '选项 2 (禁用)', disabled: true },
+  { key: 3, label: '选项 3' },
+  { key: 4, label: '选项 4 (禁用)', disabled: true },
+])
+</script>
diff --git a/playground/src/example/transfer/glass.vue b/playground/src/example/transfer/glass.vue
new file mode 100644
index 00000000..2d047476
--- /dev/null
+++ b/playground/src/example/transfer/glass.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="p-6 rounded-lg bg-gradient-to-br from-purple-400 via-pink-500 to-red-500 space-y-6">
+    <div>
+      <p class="text-sm mb-2 font-semibold text-white">液态玻璃效果</p>
+      <ShadcnTransfer
+        v-model="selected1"
+        :data="data1"
+        :glass="true" />
+    </div>
+
+    <div>
+      <p class="text-sm mb-2 font-semibold text-white">液态玻璃效果 + 不同类型</p>
+      <div class="space-y-4">
+        <div>
+          <p class="text-xs mb-1 text-white">Success Type</p>
+          <ShadcnTransfer
+            v-model="selected2"
+            :data="data2"
+            :glass="true"
+            type="success" />
+        </div>
+        <div>
+          <p class="text-xs mb-1 text-white">Warning Type</p>
+          <ShadcnTransfer
+            v-model="selected3"
+            :data="data3"
+            :glass="true"
+            type="warning" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const selected1 = ref([2])
+const data1 = ref([
+  { key: 1, label: '选项 1' },
+  { key: 2, label: '选项 2' },
+  { key: 3, label: '选项 3' },
+  { key: 4, label: '选项 4' },
+])
+
+const selected2 = ref([1])
+const data2 = ref([
+  { key: 1, label: 'Item 1' },
+  { key: 2, label: 'Item 2' },
+  { key: 3, label: 'Item 3' },
+])
+
+const selected3 = ref([1])
+const data3 = ref([
+  { key: 1, label: 'Option 1' },
+  { key: 2, label: 'Option 2' },
+  { key: 3, label: 'Option 3' },
+])
+</script>
diff --git a/playground/src/example/transfer/usage.vue b/playground/src/example/transfer/usage.vue
new file mode 100644
index 00000000..c46f6d04
--- /dev/null
+++ b/playground/src/example/transfer/usage.vue
@@ -0,0 +1,115 @@
+<template>
+  <div class="space-y-6">
+    <div>
+      <p class="text-sm mb-2 font-semibold">基础用法</p>
+      <ShadcnTransfer
+        v-model="selected1"
+        :data="data1"
+        @on-change="handleChange" />
+    </div>
+
+    <div>
+      <p class="text-sm mb-2 font-semibold">自定义列表标题</p>
+      <ShadcnTransfer
+        v-model="selected2"
+        :data="data2"
+        left-title="待选择"
+        right-title="已选择" />
+    </div>
+
+    <div>
+      <p class="text-sm mb-2 font-semibold">自定义高度</p>
+      <ShadcnTransfer
+        v-model="selected6"
+        :data="data6"
+        height="400px" />
+    </div>
+
+    <div>
+      <p class="text-sm mb-2 font-semibold">不同尺寸</p>
+      <div class="space-y-4">
+        <div>
+          <p class="text-xs mb-1 text-gray-600">Small</p>
+          <ShadcnTransfer
+            v-model="selected3"
+            :data="data3"
+            size="small" />
+        </div>
+        <div>
+          <p class="text-xs mb-1 text-gray-600">Default</p>
+          <ShadcnTransfer
+            v-model="selected4"
+            :data="data4"
+            size="default" />
+        </div>
+        <div>
+          <p class="text-xs mb-1 text-gray-600">Large</p>
+          <ShadcnTransfer
+            v-model="selected5"
+            :data="data5"
+            size="large" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const selected1 = ref([2, 3])
+const data1 = ref([
+  { key: 1, label: '选项 1' },
+  { key: 2, label: '选项 2' },
+  { key: 3, label: '选项 3' },
+  { key: 4, label: '选项 4' },
+  { key: 5, label: '选项 5' },
+])
+
+const selected2 = ref([2])
+const data2 = ref([
+  { key: 1, label: 'Angular' },
+  { key: 2, label: 'React' },
+  { key: 3, label: 'Vue' },
+  { key: 4, label: 'Svelte' },
+])
+
+const selected3 = ref([1])
+const data3 = ref([
+  { key: 1, label: '选项 1' },
+  { key: 2, label: '选项 2' },
+  { key: 3, label: '选项 3' },
+])
+
+const selected4 = ref([1])
+const data4 = ref([
+  { key: 1, label: '选项 1' },
+  { key: 2, label: '选项 2' },
+  { key: 3, label: '选项 3' },
+])
+
+const selected5 = ref([1])
+const data5 = ref([
+  { key: 1, label: '选项 1' },
+  { key: 2, label: '选项 2' },
+  { key: 3, label: '选项 3' },
+])
+
+const selected6 = ref([1, 2])
+const data6 = ref([
+  { key: 1, label: '选项 1' },
+  { key: 2, label: '选项 2' },
+  { key: 3, label: '选项 3' },
+  { key: 4, label: '选项 4' },
+  { key: 5, label: '选项 5' },
+  { key: 6, label: '选项 6' },
+  { key: 7, label: '选项 7' },
+  { key: 8, label: '选项 8' },
+])
+
+const handleChange = (value: (string | number)[], direction: 'left' | 'right', movedKeys: (string | number)[]) => {
+  console.log('value:', value)
+  console.log('direction:', direction)
+  console.log('movedKeys:', movedKeys)
+}
+</script>
diff --git a/src/App.vue b/src/App.vue
index fbe67bee..7dc1ef85 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,98 +1,180 @@
 <template>
-  <div class="border border-gray-300 bg-gray-50 relative rounded overflow-hidden p-5 text-white text-center space-y-5">
-    <ShadcnLayout>
-      <ShadcnLayoutHeader class="bg-sky-300 text-white">Header</ShadcnLayoutHeader>
-      <ShadcnLayoutContent class="bg-sky-600 min-h-[120px] leading-[120px]">Content</ShadcnLayoutContent>
-      <ShadcnLayoutFooter class="bg-sky-300 text-white">Footer</ShadcnLayoutFooter>
-    </ShadcnLayout>
-
-    <ShadcnLayout>
-      <ShadcnLayoutHeader class="bg-sky-300 text-white">Header</ShadcnLayoutHeader>
-      <ShadcnLayout>
-        <ShadcnLayoutSider class="bg-sky-400 min-h-[120px] leading-[120px]" :collapsible="false">Sider</ShadcnLayoutSider>
-        <ShadcnLayoutContent class="bg-sky-600 min-h-[120px] leading-[120px]">Content</ShadcnLayoutContent>
-      </ShadcnLayout>
-      <ShadcnLayoutFooter class="bg-sky-300 text-white">Footer</ShadcnLayoutFooter>
-    </ShadcnLayout>
-
-    <ShadcnLayout>
-      <ShadcnLayoutHeader class="bg-sky-300 text-white">Header</ShadcnLayoutHeader>
-      <ShadcnLayout>
-        <ShadcnLayoutContent class="bg-sky-600 min-h-[120px] leading-[120px]">Content</ShadcnLayoutContent>
-        <ShadcnLayoutSider class="bg-sky-400 min-h-[120px] leading-[120px]" :collapsible="false">Sider</ShadcnLayoutSider>
-      </ShadcnLayout>
-      <ShadcnLayoutFooter class="bg-sky-300 text-white">Footer</ShadcnLayoutFooter>
-    </ShadcnLayout>
-
-    <ShadcnLayout>
-      <ShadcnLayoutSider class="bg-sky-400 min-h-[120px] leading-[120px]" :collapsible="false">Sider</ShadcnLayoutSider>
-      <ShadcnLayout>
-        <ShadcnLayoutHeader class="bg-sky-300 text-white">Header</ShadcnLayoutHeader>
-        <ShadcnLayoutContent class="bg-sky-600 min-h-[120px] leading-[120px]">Content</ShadcnLayoutContent>
-        <ShadcnLayoutFooter class="bg-sky-300 text-white">Footer</ShadcnLayoutFooter>
-      </ShadcnLayout>
-    </ShadcnLayout>
-
-    <div class="text-gray-800 text-left font-semibold mb-2">可折叠侧边栏示例（带触发器）</div>
-    <ShadcnLayout>
-      <ShadcnLayoutSider
-        class="bg-sky-400 min-h-[120px] flex items-center justify-center"
-        :collapsible="true"
-        :trigger="true"
-        @on-collapse="handleCollapse">
-        <div>Sider</div>
-      </ShadcnLayoutSider>
-      <ShadcnLayout>
-        <ShadcnLayoutHeader class="bg-sky-300 text-white">Header</ShadcnLayoutHeader>
-        <ShadcnLayoutContent class="bg-sky-600 min-h-[120px] leading-[120px]">Content</ShadcnLayoutContent>
-        <ShadcnLayoutFooter class="bg-sky-300 text-white">Footer</ShadcnLayoutFooter>
-      </ShadcnLayout>
-    </ShadcnLayout>
-
-    <div class="text-gray-800 text-left font-semibold mb-2">可折叠侧边栏示例（自定义触发器）</div>
-    <ShadcnLayout>
-      <ShadcnLayoutSider
-        ref="siderRef"
-        class="bg-sky-400 min-h-[120px]"
-        :collapsible="true"
-        :trigger="false"
-        @on-collapse="handleCollapse">
-        <template #default>
-          <div class="flex items-center justify-center h-full">Sider Content</div>
-        </template>
-        <template #collapsed>
-          <div class="flex items-center justify-center h-full">S</div>
-        </template>
-      </ShadcnLayoutSider>
-      <ShadcnLayout>
-        <ShadcnLayoutHeader class="bg-sky-300 text-white flex items-center justify-between px-4">
-          <span>Header</span>
-          <button
-            @click="toggleSider"
-            class="px-3 py-1 bg-sky-500 hover:bg-sky-600 rounded text-white text-sm">
-            Toggle Sider
-          </button>
-        </ShadcnLayoutHeader>
-        <ShadcnLayoutContent class="bg-sky-600 min-h-[120px] leading-[120px]">Content</ShadcnLayoutContent>
-        <ShadcnLayoutFooter class="bg-sky-300 text-white">Footer</ShadcnLayoutFooter>
-      </ShadcnLayout>
-    </ShadcnLayout>
+  <div class="border border-gray-300 bg-gray-200 relative rounded overflow-hidden p-5 text-white text-center space-y-5">
+    <div class="text-gray-800 text-left font-semibold mb-2 mt-8">Transfer 组件示例</div>
+
+    <div class="text-gray-800 text-left text-sm mb-2">基础用法</div>
+    <ShadcnTransfer v-model="transferSelected1"
+                    :data="transferData1"
+                    type="success"
+                    @on-change="handleTransferChange"/>
+
+    <div class="text-gray-800 text-left text-sm mb-2 mt-4">自定义列表标题</div>
+    <ShadcnTransfer v-model="transferSelected2"
+                    :data="transferData2"
+                    left-title="待选择"
+                    right-title="已选择"/>
+
+    <div class="text-gray-800 text-left text-sm mb-2 mt-4">自定义高度</div>
+    <ShadcnTransfer v-model="transferSelected8"
+                    :data="transferData8"
+                    height="100px"/>
+
+    <div class="text-gray-800 text-left text-sm mb-2 mt-4">液态玻璃效果</div>
+    <div class="bg-gradient-to-br from-purple-400 via-pink-500 to-red-500 p-6 rounded-lg">
+      <ShadcnTransfer v-model="transferSelected3"
+                      :data="transferData3"
+                      :glass="true"/>
+    </div>
+
+    <div class="text-gray-800 text-left text-sm mb-2 mt-4">不同尺寸</div>
+    <div class="space-y-4">
+      <div>
+        <div class="text-gray-600 text-xs mb-1">Small</div>
+        <ShadcnTransfer v-model="transferSelected4"
+                        :data="transferData4"
+                        size="small"/>
+      </div>
+      <div>
+        <div class="text-gray-600 text-xs mb-1">Default (默认)</div>
+        <ShadcnTransfer v-model="transferSelected5"
+                        :data="transferData5"
+                        size="default"/>
+      </div>
+      <div>
+        <div class="text-gray-600 text-xs mb-1">Large</div>
+        <ShadcnTransfer v-model="transferSelected6"
+                        :data="transferData6"
+                        size="large"/>
+      </div>
+    </div>
+
+    <div class="text-gray-800 text-left text-sm mb-2 mt-4">自定义渲染</div>
+    <ShadcnTransfer v-model="transferSelected7" :data="transferData7">
+      <template #item="{ item }">
+        <div class="flex items-center gap-2">
+          <ShadcnIcon :icon="item.icon" class="w-4 h-4"/>
+          <span>{{ item.label }}</span>
+        </div>
+      </template>
+    </ShadcnTransfer>
+
+    <div class="text-gray-800 text-left text-sm mb-2 mt-4">可搜索</div>
+    <ShadcnTransfer v-model="transferSelected9"
+                    :data="transferData9"
+                    :filterable="true"/>
+
+    <div class="text-gray-800 text-left text-sm mb-2 mt-4">自定义搜索方法</div>
+    <ShadcnTransfer v-model="transferSelected10"
+                    :data="transferData10"
+                    :filterable="true"
+                    :filter-method="customFilterMethod"
+                    filter-placeholder="按拼音首字母搜索"/>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import { ShadcnLayout, ShadcnLayoutContent, ShadcnLayoutFooter, ShadcnLayoutHeader, ShadcnLayoutSider } from "@/ui/layout";
+import { ShadcnTransfer } from "@/ui/transfer";
+import { ShadcnIcon } from "@/ui/icon";
+
+// Transfer 示例数据
+const transferSelected1 = ref([2, 3]);
+const transferData1 = ref([
+  { key: 1, label: '选项 1' },
+  { key: 2, label: '选项 2' },
+  { key: 3, label: '选项 3', disabled: true },
+  { key: 4, label: '选项 4' },
+  { key: 5, label: '选项 5' },
+]);
+
+const transferSelected2 = ref([2]);
+const transferData2 = ref([
+  { key: 1, label: 'Angular' },
+  { key: 2, label: 'React' },
+  { key: 3, label: 'Vue' },
+  { key: 4, label: 'Svelte' },
+]);
+
+const transferSelected3 = ref([2]);
+const transferData3 = ref([
+  { key: 1, label: '选项 1' },
+  { key: 2, label: '选项 2' },
+  { key: 3, label: '选项 3' },
+  { key: 4, label: '选项 4' },
+]);
+
+const transferSelected4 = ref([1]);
+const transferData4 = ref([
+  { key: 1, label: '选项 1' },
+  { key: 2, label: '选项 2' },
+  { key: 3, label: '选项 3' },
+]);
+
+const transferSelected5 = ref([1]);
+const transferData5 = ref([
+  { key: 1, label: '选项 1' },
+  { key: 2, label: '选项 2' },
+  { key: 3, label: '选项 3' },
+]);
+
+const transferSelected6 = ref([1]);
+const transferData6 = ref([
+  { key: 1, label: '选项 1' },
+  { key: 2, label: '选项 2' },
+  { key: 3, label: '选项 3' },
+]);
+
+const transferSelected7 = ref([1]);
+const transferData7 = ref([
+  { key: 1, label: '首页', icon: 'Home' },
+  { key: 2, label: '用户', icon: 'User' },
+  { key: 3, label: '设置', icon: 'Settings' },
+  { key: 4, label: '文件', icon: 'File' },
+]);
+
+const transferSelected8 = ref([1, 2]);
+const transferData8 = ref([
+  { key: 1, label: '选项 1' },
+  { key: 2, label: '选项 2' },
+  { key: 3, label: '选项 3' },
+  { key: 4, label: '选项 4' },
+  { key: 5, label: '选项 5' },
+  { key: 6, label: '选项 6' },
+  { key: 7, label: '选项 7' },
+  { key: 8, label: '选项 8' },
+]);
+
+const transferSelected9 = ref([1, 2]);
+const transferData9 = ref([
+  { key: 1, label: 'JavaScript' },
+  { key: 2, label: 'TypeScript' },
+  { key: 3, label: 'Python' },
+  { key: 4, label: 'Java' },
+  { key: 5, label: 'C++' },
+  { key: 6, label: 'Go' },
+  { key: 7, label: 'Rust' },
+  { key: 8, label: 'Ruby' },
+  { key: 9, label: 'PHP' },
+  { key: 10, label: 'Swift' },
+]);
 
-const siderRef = ref<InstanceType<typeof ShadcnLayoutSider> | null>(null);
+const transferSelected10 = ref([1]);
+const transferData10 = ref([
+  { key: 1, label: '北京', pinyin: 'beijing' },
+  { key: 2, label: '上海', pinyin: 'shanghai' },
+  { key: 3, label: '广州', pinyin: 'guangzhou' },
+  { key: 4, label: '深圳', pinyin: 'shenzhen' },
+  { key: 5, label: '杭州', pinyin: 'hangzhou' },
+  { key: 6, label: '成都', pinyin: 'chengdu' },
+]);
 
-const handleCollapse = (collapsed: boolean) => {
-  console.log('Sider collapsed:', collapsed);
+const customFilterMethod = (query: string, item: any) => {
+  return item.label.includes(query) || item.pinyin.includes(query.toLowerCase());
 };
 
-const toggleSider = () => {
-  if (siderRef.value) {
-    siderRef.value.toggle();
-  }
+const handleTransferChange = (value: (string | number)[], direction: 'left' | 'right', movedKeys: (string | number)[]) => {
+  console.log('value:', value);
+  console.log('direction:', direction);
+  console.log('movedKeys:', movedKeys);
 };
 </script>
diff --git a/src/locales/en-US.ts b/src/locales/en-US.ts
index fb3c8be0..223f1fee 100644
--- a/src/locales/en-US.ts
+++ b/src/locales/en-US.ts
@@ -333,5 +333,12 @@ export default {
             clearAll: 'Clear All',
             noData: 'No data'
         }
+    },
+    transfer: {
+        text: {
+            leftTitle: 'Source',
+            rightTitle: 'Target',
+            filterPlaceholder: 'Search'
+        }
     }
 }
\ No newline at end of file
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index 3dba708d..a84e6e03 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -333,5 +333,12 @@ export default {
             clearAll: '全部清除',
             noData: '暂无数据'
         }
+    },
+    transfer: {
+        text: {
+            leftTitle: '源列表',
+            rightTitle: '目标列表',
+            filterPlaceholder: '请输入搜索内容'
+        }
     }
 }
\ No newline at end of file
diff --git a/src/ui/transfer/ShadcnTransfer.vue b/src/ui/transfer/ShadcnTransfer.vue
new file mode 100644
index 00000000..2d5f79ce
--- /dev/null
+++ b/src/ui/transfer/ShadcnTransfer.vue
@@ -0,0 +1,413 @@
+<template>
+  <div class="shadcn-transfer flex gap-4" :class="sizeClass">
+    <!-- 左侧列表 -->
+    <div class="flex-1 rounded-lg overflow-hidden" :class="[
+      containerClass,
+      glass && 'backdrop-blur-md'
+    ]">
+      <div class="border-b flex items-center justify-between" :class="[
+        headerClass,
+        sizeHeaderClass
+      ]">
+        <ShadcnCheckbox :modelValue="leftAllChecked ? true : null"
+                        :value="true"
+                        :indeterminate="leftIndeterminate"
+                        @update:modelValue="toggleLeftAll"
+                        :dark="dark"
+                        :glass="glass"
+                        :type="checkboxType"
+                        :size="size">
+          {{ computedLeftTitle }}
+        </ShadcnCheckbox>
+        <span :class="countClass">
+          {{ leftCheckedCount }}/{{ leftData.length }}
+        </span>
+      </div>
+      <div v-if="filterable" :class="['border-b', headerClass, sizeHeaderClass]">
+        <ShadcnInput v-model="leftFilterQuery"
+                     :placeholder="filterPlaceholder || String(t('transfer.text.filterPlaceholder'))"
+                     :dark="dark"
+                     :glass="glass"
+                     :size="size"
+                     clearable>
+          <template #prefix>
+            <ShadcnIcon icon="Search" :dark="dark" :glass="glass"/>
+          </template>
+        </ShadcnInput>
+      </div>
+      <div :class="['space-y-1 overflow-y-auto', contentClass]" :style="heightStyle">
+        <div v-for="item in leftData"
+             :key="item[props.keyProp]"
+             class="rounded cursor-pointer transition-all"
+             :class="[
+              itemClass,
+              sizeItemClass,
+              leftChecked.includes(item[props.keyProp]) && selectedItemClass,
+              item.disabled && '!cursor-not-allowed'
+            ]"
+             @click="!item.disabled && toggleLeftItem(item[props.keyProp])">
+          <ShadcnCheckbox :modelValue="leftChecked.includes(item[props.keyProp]) ? item[props.keyProp] : null"
+                          :value="item[props.keyProp]"
+                          :dark="dark"
+                          :size="size"
+                          :glass="glass"
+                          :type="checkboxType"
+                          :disabled="item.disabled">
+            <slot name="item" :item="item">
+              {{ item[props.labelProp] }}
+            </slot>
+          </ShadcnCheckbox>
+        </div>
+      </div>
+    </div>
+
+    <!-- 中间操作按钮 -->
+    <div class="flex flex-col justify-center gap-2">
+      <ShadcnButton :type="type"
+                    :dark="dark"
+                    :glass="glass"
+                    :size="size"
+                    :disabled="leftCheckedCount === 0"
+                    @click="moveToRight"
+                    class="!p-1.5">
+        <ShadcnIcon icon="ChevronRight" :dark="dark" :glass="glass" :class="iconSizeClass"/>
+      </ShadcnButton>
+      <ShadcnButton :type="type"
+                    :dark="dark"
+                    :glass="glass"
+                    :size="size"
+                    :disabled="rightCheckedCount === 0"
+                    @click="moveToLeft"
+                    class="!p-1.5">
+        <ShadcnIcon icon="ChevronLeft" :dark="dark" :glass="glass" :class="iconSizeClass"/>
+      </ShadcnButton>
+    </div>
+
+    <!-- 右侧列表 -->
+    <div class="flex-1 rounded-lg overflow-hidden" :class="[
+      containerClass,
+      glass && 'backdrop-blur-md'
+    ]">
+      <div class="border-b flex items-center justify-between" :class="[
+        headerClass,
+        sizeHeaderClass
+      ]">
+        <ShadcnCheckbox :modelValue="rightAllChecked ? true : null"
+                        :value="true"
+                        :indeterminate="rightIndeterminate"
+                        @update:modelValue="toggleRightAll"
+                        :type="checkboxType"
+                        :glass="glass"
+                        :dark="dark"
+                        :size="size">
+          {{ computedRightTitle }}
+        </ShadcnCheckbox>
+        <span :class="countClass">
+          {{ rightCheckedCount }}/{{ rightData.length }}
+        </span>
+      </div>
+      <div v-if="filterable" :class="['border-b', headerClass, sizeHeaderClass]">
+        <ShadcnInput v-model="rightFilterQuery"
+                     :placeholder="filterPlaceholder || String(t('transfer.text.filterPlaceholder'))"
+                     :dark="dark"
+                     :glass="glass"
+                     :size="size"
+                     clearable>
+          <template #prefix>
+            <ShadcnIcon icon="Search" :dark="dark" :glass="glass"/>
+          </template>
+        </ShadcnInput>
+      </div>
+      <div :class="['space-y-1 overflow-y-auto', contentClass]" :style="heightStyle">
+        <div v-for="item in rightData"
+             :key="item[props.keyProp]"
+             class="rounded cursor-pointer transition-all"
+             :class="[
+                itemClass,
+                sizeItemClass,
+                rightChecked.includes(item[props.keyProp]) && selectedItemClass,
+                item.disabled && '!cursor-not-allowed'
+              ]"
+             @click="!item.disabled && toggleRightItem(item[props.keyProp])">
+          <ShadcnCheckbox :modelValue="rightChecked.includes(item[props.keyProp]) ? item[props.keyProp] : null"
+                          :value="item[props.keyProp]"
+                          :dark="dark"
+                          :type="checkboxType"
+                          :glass="glass"
+                          :size="size"
+                          :disabled="item.disabled">
+            <slot name="item" :item="item">
+              {{ item[props.labelProp] }}
+            </slot>
+          </ShadcnCheckbox>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, ref, watch } from 'vue'
+import { ShadcnCheckbox } from '@/ui/checkbox'
+import { ShadcnButton } from '@/ui/button'
+import { ShadcnIcon } from '@/ui/icon'
+import { ShadcnInput } from '@/ui/input'
+import { t } from '@/utils/locale'
+import type { TransferEmits, TransferProps } from './types'
+import { calcSize } from "@/utils/common.ts";
+
+enum HeaderSize
+{
+  small = 'px-3 py-2',
+  default = 'px-4 py-2.5',
+  large = 'px-5 py-3'
+}
+
+enum ItemSize
+{
+  small = 'px-2 py-1',
+  default = 'px-3 py-2',
+  large = 'px-4 py-2.5'
+}
+
+enum IconSize
+{
+  small = 'w-4 h-4',
+  default = 'w-5 h-5',
+  large = 'w-6 h-6'
+}
+
+enum TextSize
+{
+  small = 'text-sm',
+  default = 'text-base',
+  large = 'text-lg'
+}
+
+const props = withDefaults(defineProps<TransferProps>(), {
+  keyProp: 'key',
+  labelProp: 'label',
+  dark: false,
+  type: 'primary',
+  size: 'default',
+  height: 256,
+  filterable: false
+})
+
+// Form context support
+const formContext = inject<any>('formContext', null)
+
+const emit = defineEmits<TransferEmits>()
+
+// Update form context when value changes
+watch(() => props.modelValue, (newValue) => {
+  if (formContext) {
+    formContext.updateModel(props.keyProp, newValue)
+  }
+}, { deep: true })
+
+const leftChecked = ref<(string | number)[]>([])
+const rightChecked = ref<(string | number)[]>([])
+const leftFilterQuery = ref('')
+const rightFilterQuery = ref('')
+
+const defaultFilterMethod = (query: string, item: any) => {
+  return String(item[props.labelProp]).toLowerCase().includes(query.toLowerCase())
+}
+
+const filterMethod = computed(() => props.filterMethod || defaultFilterMethod)
+
+const leftData = computed(() => {
+  const data = props.data.filter(item => !props.modelValue.includes(item[props.keyProp]))
+  if (!props.filterable || !leftFilterQuery.value) {
+    return data
+  }
+  return data.filter(item => filterMethod.value(leftFilterQuery.value, item))
+})
+
+const rightData = computed(() => {
+  const data = props.data.filter(item => props.modelValue.includes(item[props.keyProp]))
+  if (!props.filterable || !rightFilterQuery.value) {
+    return data
+  }
+  return data.filter(item => filterMethod.value(rightFilterQuery.value, item))
+})
+
+const leftCheckedCount = computed(() => leftChecked.value.length)
+const rightCheckedCount = computed(() => rightChecked.value.length)
+
+const leftAllChecked = computed(() => {
+  return leftData.value.length > 0 && leftCheckedCount.value === leftData.value.filter(item => !item.disabled).length
+})
+
+const rightAllChecked = computed(() => {
+  return rightData.value.length > 0 && rightCheckedCount.value === rightData.value.filter(item => !item.disabled).length
+})
+
+const leftIndeterminate = computed(() => {
+  return leftCheckedCount.value > 0 && !leftAllChecked.value
+})
+
+const rightIndeterminate = computed(() => {
+  return rightCheckedCount.value > 0 && !rightAllChecked.value
+})
+
+const toggleLeftItem = (key: string | number) => {
+  const item = leftData.value.find(item => item[props.keyProp] === key)
+  if (item?.disabled) {
+    return
+  }
+
+  const index = leftChecked.value.indexOf(key)
+  if (index > -1) {
+    leftChecked.value.splice(index, 1)
+  }
+  else {
+    leftChecked.value.push(key)
+  }
+}
+
+const toggleRightItem = (key: string | number) => {
+  const item = rightData.value.find(item => item[props.keyProp] === key)
+  if (item?.disabled) {
+    return
+  }
+
+  const index = rightChecked.value.indexOf(key)
+  if (index > -1) {
+    rightChecked.value.splice(index, 1)
+  }
+  else {
+    rightChecked.value.push(key)
+  }
+}
+
+const toggleLeftAll = (checked: boolean) => {
+  if (checked) {
+    leftChecked.value = leftData.value.filter(item => !item.disabled).map(item => item[props.keyProp])
+  }
+  else {
+    leftChecked.value = []
+  }
+}
+
+const toggleRightAll = (checked: boolean) => {
+  if (checked) {
+    rightChecked.value = rightData.value.filter(item => !item.disabled).map(item => item[props.keyProp])
+  }
+  else {
+    rightChecked.value = []
+  }
+}
+
+const moveToRight = () => {
+  const newValue = [...props.modelValue, ...leftChecked.value]
+  emit('update:modelValue', newValue)
+  emit('on-change', newValue, 'right', [...leftChecked.value])
+  leftChecked.value = []
+}
+
+const moveToLeft = () => {
+  const newValue = props.modelValue.filter(key => !rightChecked.value.includes(key))
+  emit('update:modelValue', newValue)
+  emit('on-change', newValue, 'left', [...rightChecked.value])
+  rightChecked.value = []
+}
+
+watch(() => props.modelValue, () => {
+  leftChecked.value = leftChecked.value.filter(key => leftData.value.some(item => item[props.keyProp] === key))
+  rightChecked.value = rightChecked.value.filter(key => rightData.value.some(item => item[props.keyProp] === key))
+})
+
+// 容器类名
+const containerClass = computed(() => {
+  const baseClass = 'border'
+  const darkClass = props.dark ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200'
+  const glassClass = props.glass
+      ? (props.dark ? 'bg-gray-800/30 border-gray-700/50' : 'bg-white/30 border-gray-200/50')
+      : darkClass
+  return [baseClass, glassClass]
+})
+
+// 头部类名
+const headerClass = computed(() => {
+  if (props.glass) {
+    return props.dark ? 'bg-gray-700/30 text-gray-100' : 'bg-gray-50/50 text-gray-900'
+  }
+  return props.dark ? 'bg-gray-700/50 text-gray-100' : 'bg-gray-50 text-gray-900'
+})
+
+// 内容区域类名
+const contentClass = computed(() => {
+  return props.dark ? 'text-gray-100' : 'text-gray-900'
+})
+
+// 列表项类名
+const itemClass = computed(() => {
+  let baseClass = 'flex items-center px-4 py-2'
+  let hoverClass = ''
+
+  if (props.glass) {
+    hoverClass = props.dark ? 'hover:bg-white/10' : 'hover:bg-black/10'
+  }
+  else {
+    hoverClass = props.dark ? 'hover:bg-gray-700/50' : 'hover:bg-gray-100'
+  }
+
+  if (props.size === 'small') {
+    baseClass = 'flex items-center px-3 py-1'
+  }
+  else if (props.size === 'large') {
+    baseClass = 'flex items-center px-5 py-3'
+  }
+
+  return [baseClass, hoverClass]
+})
+
+// 选中项类名
+const selectedItemClass = computed(() => {
+  if (props.glass) {
+    return props.dark ? 'bg-white/15' : 'bg-black/15'
+  }
+  return props.dark ? 'bg-gray-700/70' : 'bg-gray-100'
+})
+
+// 计数文本类名
+const countClass = computed(() => {
+  return props.dark ? 'text-gray-400 text-sm' : 'text-gray-500 text-sm'
+})
+
+// 尺寸类名
+const sizeClass = computed(() => TextSize[props.size])
+const sizeHeaderClass = computed(() => HeaderSize[props.size])
+const sizeItemClass = computed(() => ItemSize[props.size])
+const iconSizeClass = computed(() => IconSize[props.size])
+
+// 高度样式
+const heightStyle = computed(() => {
+  return props.height ? { maxHeight: calcSize(props.height), minHeight: calcSize(props.height) } : {}
+})
+
+// 国际化标题
+const computedLeftTitle = computed(() => {
+  return props.leftTitle || String(t('transfer.text.leftTitle'))
+})
+
+const computedRightTitle = computed(() => {
+  return props.rightTitle || String(t('transfer.text.rightTitle'))
+})
+
+// Checkbox type mapping
+const checkboxType = computed(() => {
+  const typeMap: Record<string, 'primary' | 'success' | 'warning' | 'error'> = {
+    primary: 'primary',
+    success: 'success',
+    warning: 'warning',
+    danger: 'error',
+    error: 'error',
+    info: 'primary',
+    text: 'primary'
+  }
+  return typeMap[props.type] || 'primary'
+})
+</script>
diff --git a/src/ui/transfer/index.ts b/src/ui/transfer/index.ts
new file mode 100644
index 00000000..fd187233
--- /dev/null
+++ b/src/ui/transfer/index.ts
@@ -0,0 +1,2 @@
+export { default as ShadcnTransfer } from './ShadcnTransfer.vue'
+export type { TransferProps, TransferEmits, TransferItem } from './types'
diff --git a/src/ui/transfer/types.ts b/src/ui/transfer/types.ts
new file mode 100644
index 00000000..352b3cfe
--- /dev/null
+++ b/src/ui/transfer/types.ts
@@ -0,0 +1,29 @@
+import { Size } from '@/ui/enum/Size'
+import { Type } from '@/ui/enum/Type'
+
+export interface TransferItem {
+  [key: string]: any
+  disabled?: boolean
+}
+
+export interface TransferProps {
+  data: TransferItem[]
+  modelValue: (string | number)[]
+  keyProp?: string
+  labelProp?: string
+  leftTitle?: string
+  rightTitle?: string
+  dark?: boolean
+  glass?: boolean
+  type?: keyof typeof Type
+  size?: keyof typeof Size
+  height?: any
+  filterable?: boolean
+  filterPlaceholder?: string
+  filterMethod?: (query: string, item: TransferItem) => boolean
+}
+
+export type TransferEmits = {
+  'update:modelValue': [value: (string | number)[]]
+  'on-change': [value: (string | number)[], direction: 'left' | 'right', movedKeys: (string | number)[]]
+}
diff --git a/types/view-shadcn.d.ts b/types/view-shadcn.d.ts
index be7f3099..57e6b65e 100644
--- a/types/view-shadcn.d.ts
+++ b/types/view-shadcn.d.ts
@@ -9,7 +9,7 @@ declare module 'view-shadcn-ui'
     export const ShadcnCopy: typeof import('@/ui/copy').default
     export const ShadcnCode: typeof import('@/ui/code').default
     export const ShadcnInput: typeof import('@/ui/input').default
-    export const Icon: typeof import('@/ui/icon').default
+    export const ShadcnIcon: typeof import('@/ui/icon').default
     export const ShadcnModal: typeof import('@/ui/modal').default
     export const ShadcnTooltip: typeof import('@/ui/tooltip').default
     export const ShadcnRow: typeof import('@/ui/row').default
@@ -49,4 +49,7 @@ declare module 'view-shadcn-ui'
     export const ShadcnBreadcrumb: typeof import('@/ui/breadcrumb').default
     export const ShadcnBreadcrumbItem: typeof import('@/ui/breadcrumb/item').default
     export const ShadcnSlider: typeof import('@/ui/slider').default
+    export const ShadcnTransfer: typeof import('@/ui/transfer').ShadcnTransfer
+
+    export type { TransferProps, TransferEmits, TransferItem } from '@/ui/transfer'
 }