diff --git a/examples/uni/src/pages-navigation/accordion/accordion.vue b/examples/uni/src/pages-navigation/accordion/accordion.vue
new file mode 100644
index 0000000..8fd74c5
--- /dev/null
+++ b/examples/uni/src/pages-navigation/accordion/accordion.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const activeName = ref<string>('1')
+</script>
+
+<template>
+  <SkAccordion v-model="activeName" accordion>
+    <SkAccordionItem name="1" title="功能特性">
+      组件库提供丰富的 UI 组件，满足各种业务场景需求。
+    </SkAccordionItem>
+    <SkAccordionItem name="2" title="设计系统">
+      采用统一的设计语言，提供一致的用户体验。
+    </SkAccordionItem>
+    <SkAccordionItem name="3" title="主题定制">
+      支持深色模式和自定义主题颜色。
+    </SkAccordionItem>
+    <SkAccordionItem name="4" title="性能优化">
+      针对移动端进行优化，提供流畅的交互体验。
+    </SkAccordionItem>
+  </SkAccordion>
+</template>
diff --git a/examples/uni/src/pages-navigation/accordion/base.vue b/examples/uni/src/pages-navigation/accordion/base.vue
new file mode 100644
index 0000000..0fbb509
--- /dev/null
+++ b/examples/uni/src/pages-navigation/accordion/base.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const activeNames = ref<string[]>(['1'])
+</script>
+
+<template>
+  <SkAccordion v-model="activeNames">
+    <SkAccordionItem name="1" title="什么是 Skiyee UI？">
+      Skiyee UI 是一个基于 uni-app 的跨平台 UI 组件库，支持 H5、小程序、APP 等多个平台。
+    </SkAccordionItem>
+    <SkAccordionItem name="2" title="如何安装？">
+      使用 npm 或 pnpm 安装：pnpm add @skiyee/uni-ui
+    </SkAccordionItem>
+    <SkAccordionItem name="3" title="支持哪些平台？">
+      支持 H5、微信小程序、支付宝小程序、APP 等 uni-app 支持的所有平台。
+    </SkAccordionItem>
+  </SkAccordion>
+</template>
diff --git a/examples/uni/src/pages-navigation/accordion/bordered.vue b/examples/uni/src/pages-navigation/accordion/bordered.vue
new file mode 100644
index 0000000..2a6190b
--- /dev/null
+++ b/examples/uni/src/pages-navigation/accordion/bordered.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const activeNames1 = ref<string[]>(['1'])
+const activeNames2 = ref<string[]>(['1'])
+</script>
+
+<template>
+  <view class="text-body-medium text-secondary sk-unit:mb-12">
+    有边框（默认）
+  </view>
+  <SkAccordion v-model="activeNames1" :border="true">
+    <SkAccordionItem name="1" title="标题 1">
+      有边框的手风琴，所有项被包裹在一个带边框的容器中。
+    </SkAccordionItem>
+    <SkAccordionItem name="2" title="标题 2">
+      项与项之间有分隔线。
+    </SkAccordionItem>
+    <SkAccordionItem name="3" title="标题 3">
+      整体更加紧凑和统一。
+    </SkAccordionItem>
+  </SkAccordion>
+
+  <view class="text-body-medium text-secondary sk-unit:(mt-24 mb-12)">
+    无边框
+  </view>
+  <SkAccordion v-model="activeNames2" :border="false">
+    <SkAccordionItem name="1" title="标题 1">
+      无边框的手风琴，每个项独立显示。
+    </SkAccordionItem>
+    <SkAccordionItem name="2" title="标题 2">
+      项与项之间有间距。
+    </SkAccordionItem>
+    <SkAccordionItem name="3" title="标题 3">
+      视觉上更加轻量和分散。
+    </SkAccordionItem>
+  </SkAccordion>
+</template>
diff --git a/examples/uni/src/pages-navigation/accordion/controlled.vue b/examples/uni/src/pages-navigation/accordion/controlled.vue
new file mode 100644
index 0000000..686d5f5
--- /dev/null
+++ b/examples/uni/src/pages-navigation/accordion/controlled.vue
@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const activeNames = ref<string[]>(['1'])
+
+function expandAll() {
+  activeNames.value = ['1', '2', '3', '4']
+}
+
+function collapseAll() {
+  activeNames.value = []
+}
+
+function toggleFirst() {
+  const index = activeNames.value.indexOf('1')
+  if (index > -1) {
+    activeNames.value.splice(index, 1)
+  }
+  else {
+    activeNames.value.push('1')
+  }
+}
+</script>
+
+<template>
+  <view class="flex sk-unit:(gap-12 mb-16)">
+    <SkButton size="small" @click="expandAll">
+      全部展开
+    </SkButton>
+    <SkButton size="small" @click="collapseAll">
+      全部收起
+    </SkButton>
+    <SkButton size="small" @click="toggleFirst">
+      切换第一项
+    </SkButton>
+  </view>
+
+  <SkAccordion v-model="activeNames">
+    <SkAccordionItem name="1" title="React 框架">
+      React 是一个用于构建用户界面的 JavaScript 库。
+    </SkAccordionItem>
+    <SkAccordionItem name="2" title="Vue 框架">
+      Vue 是一套用于构建用户界面的渐进式框架。
+    </SkAccordionItem>
+    <SkAccordionItem name="3" title="Angular 框架">
+      Angular 是一个应用设计框架与开发平台。
+    </SkAccordionItem>
+    <SkAccordionItem name="4" title="Svelte 框架">
+      Svelte 是一种全新的构建用户界面的方法。
+    </SkAccordionItem>
+  </SkAccordion>
+
+  <view class="text-body-small text-tertiary sk-unit:mt-16">
+    当前展开项：{{ activeNames.length > 0 ? activeNames.join(', ') : '无' }}
+  </view>
+</template>
diff --git a/examples/uni/src/pages-navigation/accordion/custom.vue b/examples/uni/src/pages-navigation/accordion/custom.vue
new file mode 100644
index 0000000..b742eb0
--- /dev/null
+++ b/examples/uni/src/pages-navigation/accordion/custom.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const activeNames = ref<string[]>(['1'])
+</script>
+
+<template>
+  <SkAccordion v-model="activeNames">
+    <SkAccordionItem name="1" title="自定义标题插槽">
+      <template #title>
+        <view class="flex items-center sk-unit:gap-8">
+          <SkIcon name="i-lucide:rocket" class="text-brand" />
+          <text class="font-bold text-brand">
+            自定义标题样式
+          </text>
+        </view>
+      </template>
+      使用 title 插槽可以完全自定义标题区域的内容和样式。
+    </SkAccordionItem>
+
+    <SkAccordionItem name="2" title="自定义图标插槽">
+      <template #icon>
+        <SkIcon name="i-lucide:settings" class="text-warning" />
+      </template>
+      使用 icon 插槽可以自定义图标的内容。
+    </SkAccordionItem>
+
+    <SkAccordionItem name="3" title="丰富的内容">
+      <view class="flex flex-col sk-unit:gap-12">
+        <view class="text-body-medium text-primary">
+          内容区域支持任意复杂的布局：
+        </view>
+        <view class="flex flex-col sk-unit:gap-8">
+          <view class="flex items-center sk-unit:gap-8">
+            <SkIcon name="i-lucide:check" class="text-success" />
+            <text>支持文本</text>
+          </view>
+          <view class="flex items-center sk-unit:gap-8">
+            <SkIcon name="i-lucide:check" class="text-success" />
+            <text>支持图标</text>
+          </view>
+          <view class="flex items-center sk-unit:gap-8">
+            <SkIcon name="i-lucide:check" class="text-success" />
+            <text>支持按钮等交互组件</text>
+          </view>
+        </view>
+        <SkButton size="small" class="self-start">
+          了解更多
+        </SkButton>
+      </view>
+    </SkAccordionItem>
+
+    <SkAccordionItem name="4">
+      <template #title>
+        <view class="flex items-center justify-between w-full sk-unit:pr-8">
+          <view class="flex items-center sk-unit:gap-8">
+            <SkBadge content="NEW" color="danger" size="small" />
+            <text>带徽章的标题</text>
+          </view>
+          <text class="text-body-small text-tertiary">
+            2024-01-01
+          </text>
+        </view>
+      </template>
+      完全自定义的标题可以包含任何你想要的内容。
+    </SkAccordionItem>
+  </SkAccordion>
+</template>
diff --git a/examples/uni/src/pages-navigation/accordion/disabled.vue b/examples/uni/src/pages-navigation/accordion/disabled.vue
new file mode 100644
index 0000000..c2888cd
--- /dev/null
+++ b/examples/uni/src/pages-navigation/accordion/disabled.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const activeNames = ref<string[]>(['1'])
+</script>
+
+<template>
+  <SkAccordion v-model="activeNames">
+    <SkAccordionItem name="1" title="正常项目">
+      这是一个正常的手风琴项，可以正常展开和收起。
+    </SkAccordionItem>
+    <SkAccordionItem name="2" title="禁用的项目" disabled>
+      这个项目被禁用了，无法点击展开。
+    </SkAccordionItem>
+    <SkAccordionItem name="3" title="另一个正常项">
+      这也是一个正常的手风琴项。
+    </SkAccordionItem>
+    <SkAccordionItem name="4" title="第二个禁用项" disabled>
+      这也是一个被禁用的项目。
+    </SkAccordionItem>
+  </SkAccordion>
+</template>
diff --git a/examples/uni/src/pages-navigation/accordion/icon.vue b/examples/uni/src/pages-navigation/accordion/icon.vue
new file mode 100644
index 0000000..697c849
--- /dev/null
+++ b/examples/uni/src/pages-navigation/accordion/icon.vue
@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const activeNames = ref<string[]>(['1'])
+</script>
+
+<template>
+  <SkAccordion
+    v-model="activeNames"
+    expand-icon="i-lucide:chevron-up"
+    collapse-icon="i-lucide:chevron-down"
+  >
+    <SkAccordionItem name="1" title="使用默认图标">
+      使用 Accordion 组件的 expand-icon 和 collapse-icon 属性设置图标。
+    </SkAccordionItem>
+    <SkAccordionItem name="2" title="左侧显示图标" icon="i-lucide:star">
+      可以为单个 AccordionItem 设置自定义图标。
+    </SkAccordionItem>
+    <SkAccordionItem name="3" title="右侧显示图标" icon="i-lucide:heart">
+      图标会覆盖默认的展开/收起图标。
+    </SkAccordionItem>
+  </SkAccordion>
+
+  <view class="sk-unit:mt-24" />
+
+  <SkAccordion
+    v-model="activeNames"
+    icon-position="left"
+    expand-icon="i-lucide:minus"
+    collapse-icon="i-lucide:plus"
+  >
+    <SkAccordionItem name="4" title="图标在左侧">
+      通过 icon-position 属性设置图标位置为左侧。
+    </SkAccordionItem>
+    <SkAccordionItem name="5" title="加减号图标">
+      使用加减号作为展开/收起的图标。
+    </SkAccordionItem>
+  </SkAccordion>
+</template>
diff --git a/examples/uni/src/pages-navigation/accordion/multiple.vue b/examples/uni/src/pages-navigation/accordion/multiple.vue
new file mode 100644
index 0000000..792385e
--- /dev/null
+++ b/examples/uni/src/pages-navigation/accordion/multiple.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const activeNames = ref<string[]>(['1', '3'])
+</script>
+
+<template>
+  <SkAccordion v-model="activeNames">
+    <SkAccordionItem name="1" title="基础组件">
+      包括按钮、图标、徽章等基础 UI 组件。
+    </SkAccordionItem>
+    <SkAccordionItem name="2" title="表单组件">
+      包括输入框、复选框、单选框、开关等表单组件。
+    </SkAccordionItem>
+    <SkAccordionItem name="3" title="反馈组件">
+      包括对话框、提示框、加载动画等反馈组件。
+    </SkAccordionItem>
+    <SkAccordionItem name="4" title="导航组件">
+      包括标签页、手风琴、下拉菜单等导航组件。
+    </SkAccordionItem>
+  </SkAccordion>
+</template>
diff --git a/packages/skiyee-uni-ui/src/components/sk-accordion-item.vue b/packages/skiyee-uni-ui/src/components/sk-accordion-item.vue
new file mode 100644
index 0000000..eb1ebb4
--- /dev/null
+++ b/packages/skiyee-uni-ui/src/components/sk-accordion-item.vue
@@ -0,0 +1,141 @@
+<script lang="ts">
+/**
+ * sk-accordion-item 组件 - 手风琴子项组件
+ *
+ * @author sKy(skiyee)
+ * @qq 319619193
+ * @github https://github.com/skiyee
+ *
+ * @example
+ * ```vue
+ * <sk-accordion-item name="1" title="标题">
+ *   内容区域
+ * </sk-accordion-item>
+ * ```
+ *
+ * @see 更多示例请参考文档: https://skiyee-ui.netlify.app/docs/components/navigation/accordion
+ */
+
+import type { SkAccordionItemEmits, SkAccordionItemProps, SkAccordionItemSlots } from '../types/accordion'
+
+export type { SkAccordionItemEmits, SkAccordionItemProps, SkAccordionItemSlots }
+</script>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+import { useParent } from '../composables'
+import { SK_ACCORDION_KEY } from '../constants'
+import { SkAccordionItemUcv } from '../styles'
+import SkIcon from './sk-icon.vue'
+
+defineOptions({
+  name: 'SkAccordionItem',
+  inheritAttrs: false,
+  options: {
+    virtualHost: true,
+  },
+})
+
+const props = withDefaults(defineProps<SkAccordionItemProps>(), {
+  disabled: false,
+})
+
+const emits = defineEmits<SkAccordionItemEmits>()
+
+const slots = defineSlots<SkAccordionItemSlots>()
+
+const { parent } = useParent(SK_ACCORDION_KEY)
+
+const contentRef = ref<HTMLElement>()
+const contentHeight = ref<string>('auto')
+
+// 当前是否处于展开状态
+const isActive = computed(() => {
+  if (!parent || props.name === undefined) {
+    return false
+  }
+  return parent.isActive(props.name)
+})
+
+// 计算图标
+const iconName = computed(() => {
+  if (props.icon) {
+    return props.icon
+  }
+  if (!parent) {
+    return 'i-lucide:chevron-down'
+  }
+  return isActive.value ? (parent.props.expandIcon || 'i-lucide:chevron-up') : (parent.props.collapseIcon || 'i-lucide:chevron-down')
+})
+
+// 计算样式类
+const classes = computed(() => {
+  const computedProps = {
+    ...props,
+    active: isActive.value,
+    border: parent?.props.border ?? true,
+    iconPosition: parent?.props.iconPosition ?? 'right',
+  }
+  return SkAccordionItemUcv(computedProps)
+})
+
+// 点击标题栏
+function handleClick() {
+  if (props.disabled || !parent || props.name === undefined) {
+    return
+  }
+
+  parent.toggle(props.name)
+  emits('click')
+}
+
+// 计算内容区域高度（用于动画）
+const contentStyle = computed(() => {
+  if (isActive.value) {
+    return {
+      maxHeight: contentHeight.value === 'auto' ? 'none' : contentHeight.value,
+    }
+  }
+  return {
+    maxHeight: '0',
+  }
+})
+
+// 监听展开状态变化
+function onTransitionEnd() {
+  if (isActive.value) {
+    contentHeight.value = 'auto'
+  }
+}
+</script>
+
+<template>
+  <div :class="classes.root()">
+    <!-- 标题栏 -->
+    <div :class="classes.header()" @click="handleClick">
+      <div :class="classes.title()">
+        <slot v-if="slots.title" name="title" />
+        <template v-else>
+          {{ title }}
+        </template>
+      </div>
+      <div :class="classes.icon()">
+        <slot v-if="slots.icon" name="icon" />
+        <SkIcon v-else :name="iconName" />
+      </div>
+    </div>
+
+    <!-- 内容区域 -->
+    <div
+      ref="contentRef"
+      :class="classes.content()"
+      :style="contentStyle"
+      @transitionend="onTransitionEnd"
+    >
+      <div :class="classes.contentInner()">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/packages/skiyee-uni-ui/src/components/sk-accordion.vue b/packages/skiyee-uni-ui/src/components/sk-accordion.vue
new file mode 100644
index 0000000..9e11354
--- /dev/null
+++ b/packages/skiyee-uni-ui/src/components/sk-accordion.vue
@@ -0,0 +1,110 @@
+<script lang="ts">
+/**
+ * sk-accordion 组件 - 手风琴组件（父组件）
+ *
+ * @author sKy(skiyee)
+ * @qq 319619193
+ * @github https://github.com/skiyee
+ *
+ * @example
+ * ```vue
+ * <sk-accordion v-model="activeNames">
+ *   <sk-accordion-item name="1" title="标题1">内容1</sk-accordion-item>
+ *   <sk-accordion-item name="2" title="标题2">内容2</sk-accordion-item>
+ * </sk-accordion>
+ * ```
+ *
+ * @see 更多示例请参考文档: https://skiyee-ui.netlify.app/docs/components/navigation/accordion
+ */
+
+import type { SkAccordionEmits, SkAccordionProps, SkAccordionSlots } from '../types/accordion'
+
+export type { SkAccordionEmits, SkAccordionProps, SkAccordionSlots }
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import { useProvide } from '../composables'
+import { SK_ACCORDION_KEY } from '../constants'
+import { SkAccordionUcv } from '../styles'
+
+defineOptions({
+  name: 'SkAccordion',
+  inheritAttrs: false,
+  options: {
+    virtualHost: true,
+  },
+})
+
+const props = withDefaults(defineProps<SkAccordionProps>(), {
+  accordion: false,
+  border: true,
+  iconPosition: 'right',
+  expandIcon: 'i-lucide:chevron-up',
+  collapseIcon: 'i-lucide:chevron-down',
+})
+
+const modelValue = defineModel<string | number | (string | number)[]>({
+  default: () => [],
+})
+
+const emits = defineEmits<SkAccordionEmits>()
+
+defineSlots<SkAccordionSlots>()
+
+const classes = computed(() => {
+  return SkAccordionUcv(props)
+})
+
+// 判断某个面板是否处于展开状态
+function isActive(name: string | number): boolean {
+  if (props.accordion) {
+    return modelValue.value === name
+  }
+  else {
+    return Array.isArray(modelValue.value) && modelValue.value.includes(name)
+  }
+}
+
+// 切换面板的展开状态
+function toggle(name: string | number) {
+  let newValue: string | number | (string | number)[]
+
+  if (props.accordion) {
+    // 手风琴模式：每次只能展开一个
+    newValue = isActive(name) ? '' : name
+  }
+  else {
+    // 多选模式：可以同时展开多个
+    const currentValues = Array.isArray(modelValue.value) ? [...modelValue.value] : []
+    const index = currentValues.indexOf(name)
+
+    if (index > -1) {
+      // 已展开，则收起
+      currentValues.splice(index, 1)
+    }
+    else {
+      // 未展开，则展开
+      currentValues.push(name)
+    }
+
+    newValue = currentValues
+  }
+
+  modelValue.value = newValue
+  emits('change', newValue)
+}
+
+useProvide(SK_ACCORDION_KEY)({
+  props,
+  isActive,
+  toggle,
+})
+</script>
+
+<template>
+  <div :class="classes">
+    <slot />
+  </div>
+</template>
diff --git a/packages/skiyee-uni-ui/src/constants/accordion.ts b/packages/skiyee-uni-ui/src/constants/accordion.ts
new file mode 100644
index 0000000..e3862b0
--- /dev/null
+++ b/packages/skiyee-uni-ui/src/constants/accordion.ts
@@ -0,0 +1,34 @@
+/**
+ * Accordion 手风琴常量
+ *
+ * @author sKy(skiyee)
+ * @qq 319619193
+ * @github https://github.com/skiyee
+ */
+
+import type { InjectionKey } from 'vue'
+
+import type { SkAccordionItemUcvProps, SkAccordionUcvProps } from '../styles'
+
+/**
+ * Accordion 父组件注入键
+ */
+export const SK_ACCORDION_KEY: InjectionKey<{
+  props: {
+    modelValue?: string | number | (string | number)[];
+    accordion?: boolean;
+    border?: boolean;
+    iconPosition?: SkAccordionUcvProps['iconPosition'];
+    expandIcon?: string;
+    collapseIcon?: string;
+    disabled?: boolean;
+  };
+  /**
+   * 判断某个面板是否处于展开状态
+   */
+  isActive: (name: string | number) => boolean;
+  /**
+   * 切换面板的展开状态
+   */
+  toggle: (name: string | number) => void;
+}> = Symbol('sk-accordion')
diff --git a/packages/skiyee-uni-ui/src/constants/index.ts b/packages/skiyee-uni-ui/src/constants/index.ts
index b747770..1f97ff4 100644
--- a/packages/skiyee-uni-ui/src/constants/index.ts
+++ b/packages/skiyee-uni-ui/src/constants/index.ts
@@ -5,6 +5,7 @@
  * @qq 319619193
  * @github https://github.com/skiyee
  */
+export * from './accordion'
 
 export * from './checkbox'
 export * from './field'
diff --git a/packages/skiyee-uni-ui/src/styles/index.ts b/packages/skiyee-uni-ui/src/styles/index.ts
index cd3dee8..4b4ebf4 100644
--- a/packages/skiyee-uni-ui/src/styles/index.ts
+++ b/packages/skiyee-uni-ui/src/styles/index.ts
@@ -5,6 +5,11 @@
  * @qq 319619193
  * @github https://github.com/skiyee
  */
+export type { SkAccordionUcvProps } from './sk-accordion'
+export { SkAccordionUcv } from './sk-accordion'
+
+export type { SkAccordionItemUcvProps } from './sk-accordion-item'
+export { SkAccordionItemUcv } from './sk-accordion-item'
 
 export type { SkBadgeUcvProps } from './sk-badge'
 export { SkBadgeUcv } from './sk-badge'
diff --git a/packages/skiyee-uni-ui/src/styles/sk-accordion-item.ts b/packages/skiyee-uni-ui/src/styles/sk-accordion-item.ts
new file mode 100644
index 0000000..d1495a2
--- /dev/null
+++ b/packages/skiyee-uni-ui/src/styles/sk-accordion-item.ts
@@ -0,0 +1,72 @@
+// @unocss-include
+/**
+ * sk-accordion-item 由 @skiyee/ucv 生成的样式组件
+ *
+ * @author sKy(skiyee)
+ * @qq 319619193
+ * @github https://github.com/skiyee
+ *
+ * @example
+ * ```ts
+ * const classes = SkAccordionItemUcv(props)
+ * ```
+ *
+ * @see 更多示例请参考文档: https://skiyee-ui.netlify.app/docs/components/navigation/accordion
+ */
+import type { InferProps } from '@skiyee/ucv'
+
+import { ucv } from '@skiyee/ucv'
+
+export const SkAccordionItemUcv = ucv({
+  element: {
+    root: 'w-full',
+    header: 'flex items-center justify-between sk-unit:(px-16 py-12) cursor-pointer select-none bg-subtle transition-colors duration-200',
+    title: 'flex-1 text-primary text-body-medium font-medium',
+    icon: 'sk-unit:size-20 text-secondary transition-transform duration-200',
+    content: 'overflow-hidden transition-all duration-300 ease-in-out',
+    contentInner: 'sk-unit:(px-16 py-12) text-secondary text-body-medium',
+  },
+  variants: {
+    active: {
+      true: {
+        header: 'sk-variant:bg-muted',
+        icon: 'sk-variant:rotate-180',
+      },
+      false: {
+        content: 'sk-variant:max-h-0',
+      },
+    },
+    disabled: {
+      true: {
+        header: 'sk-variant:(opacity-60 cursor-not-allowed pointer-events-none)',
+      },
+      false: {},
+    },
+    border: {
+      true: {
+        root: 'sk-variant:border-b-(~ solid base) last:border-b-0',
+      },
+      false: {
+        root: 'sk-variant:sk-unit:mb-8 last:mb-0',
+        header: 'sk-variant:rounded-medium',
+      },
+    },
+    iconPosition: {
+      left: {
+        header: 'sk-variant:flex-row-reverse',
+        title: 'sk-variant:sk-unit:ml-12',
+      },
+      right: {
+        title: 'sk-variant:sk-unit:mr-12',
+      },
+    },
+  },
+  defaults: {
+    active: false,
+    disabled: false,
+    border: true,
+    iconPosition: 'right',
+  },
+})
+
+export type SkAccordionItemUcvProps = InferProps<typeof SkAccordionItemUcv>
diff --git a/packages/skiyee-uni-ui/src/styles/sk-accordion.ts b/packages/skiyee-uni-ui/src/styles/sk-accordion.ts
new file mode 100644
index 0000000..cd47ac7
--- /dev/null
+++ b/packages/skiyee-uni-ui/src/styles/sk-accordion.ts
@@ -0,0 +1,38 @@
+// @unocss-include
+/**
+ * sk-accordion 由 @skiyee/ucv 生成的样式组件
+ *
+ * @author sKy(skiyee)
+ * @qq 319619193
+ * @github https://github.com/skiyee
+ *
+ * @example
+ * ```ts
+ * const classes = SkAccordionUcv(props)
+ * ```
+ *
+ * @see 更多示例请参考文档: https://skiyee-ui.netlify.app/docs/components/navigation/accordion
+ */
+import type { InferProps } from '@skiyee/ucv'
+
+import { ucv } from '@skiyee/ucv'
+
+export const SkAccordionUcv = ucv({
+  element: 'w-full',
+  variants: {
+    border: {
+      true: 'border-(~ solid base) rounded-medium overflow-hidden',
+      false: '',
+    },
+    iconPosition: {
+      left: '',
+      right: '',
+    },
+  },
+  defaults: {
+    border: true,
+    iconPosition: 'right',
+  },
+})
+
+export type SkAccordionUcvProps = InferProps<typeof SkAccordionUcv>
diff --git a/packages/skiyee-uni-ui/src/types/accordion.ts b/packages/skiyee-uni-ui/src/types/accordion.ts
new file mode 100644
index 0000000..97bbb8d
--- /dev/null
+++ b/packages/skiyee-uni-ui/src/types/accordion.ts
@@ -0,0 +1,131 @@
+/**
+ * Accordion 手风琴类型定义
+ *
+ * @author sKy(skiyee)
+ * @qq 319619193
+ * @github https://github.com/skiyee
+ */
+
+import type { SkAccordionItemUcvProps, SkAccordionUcvProps } from '../styles'
+
+/**
+ * Accordion 父组件属性
+ */
+export interface SkAccordionProps {
+  /**
+   * 当前展开的面板
+   * - 手风琴模式：string | number
+   * - 多选模式：(string | number)[]
+   */
+  modelValue?: string | number | (string | number)[];
+  /**
+   * 是否开启手风琴模式（每次只能展开一个）
+   * @default false
+   */
+  accordion?: boolean;
+  /**
+   * 是否显示边框
+   * @default true
+   */
+  border?: boolean;
+  /**
+   * 图标位置
+   * @default 'right'
+   */
+  iconPosition?: SkAccordionUcvProps['iconPosition'];
+  /**
+   * 展开时的图标
+   * @default 'i-lucide:chevron-up'
+   */
+  expandIcon?: string;
+  /**
+   * 收起时的图标
+   * @default 'i-lucide:chevron-down'
+   */
+  collapseIcon?: string;
+  /**
+   * 用于拓展当前基础样式
+   */
+  clax?: SkAccordionUcvProps['clax'];
+}
+
+/**
+ * Accordion 父组件事件
+ */
+export interface SkAccordionEmits {
+  /**
+   * 当展开的面板改变时触发
+   * @param value 当前展开的面板
+   */
+  (name: 'update:modelValue', value: string | number | (string | number)[]): void;
+  /**
+   * 当展开的面板改变时触发
+   * @param value 当前展开的面板
+   */
+  (name: 'change', value: string | number | (string | number)[]): void;
+}
+
+/**
+ * Accordion 父组件插槽
+ */
+export interface SkAccordionSlots {
+  /**
+   * AccordionItem 列表
+   */
+  default?: () => any;
+}
+
+/**
+ * AccordionItem 子组件属性
+ */
+export interface SkAccordionItemProps {
+  /**
+   * 唯一标识符
+   */
+  name?: string | number;
+  /**
+   * 标题
+   */
+  title?: string;
+  /**
+   * 是否禁用
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * 自定义图标
+   */
+  icon?: string;
+  /**
+   * 用于拓展当前基础样式
+   */
+  clax?: SkAccordionItemUcvProps['clax'];
+}
+
+/**
+ * AccordionItem 子组件事件
+ */
+export interface SkAccordionItemEmits {
+  /**
+   * 点击标题时触发
+   */
+  (name: 'click'): void;
+}
+
+/**
+ * AccordionItem 子组件插槽
+ */
+export interface SkAccordionItemSlots {
+  /**
+   * 内容区域
+   */
+  default?: () => any;
+  /**
+   * 标题区域
+   */
+  title?: () => any;
+  /**
+   * 图标区域
+   */
+  icon?: () => any;
+}