diff --git a/components.d.ts b/components.d.ts
index 01a06d2..c739cb3 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -18,6 +18,7 @@ declare module '@vue/runtime-core' {
     'Carousel.story': typeof import('./src/components/Data/Carousel/carousel.story.vue')['default']
     'Cascader.story': typeof import('./src/components/Form/cascader.story.vue')['default']
     'Checkbox.story': typeof import('./src/components/Form/checkbox.story.vue')['default']
+    'Collapse.story': typeof import('./src/components/Data/Collapse/collapse.story.vue')['default']
     'Color.story': typeof import('./src/components/Basic/Color/color.story.vue')['default']
     'ColorPicker.story': typeof import('./src/components/Form/colorPicker.story.vue')['default']
     'Container.story': typeof import('./src/components/Basic/Container/container.story.vue')['default']
@@ -43,6 +44,8 @@ declare module '@vue/runtime-core' {
     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElCheckTag: typeof import('element-plus/es')['ElCheckTag']
     ElCol: typeof import('element-plus/es')['ElCol']
+    ElCollapse: typeof import('element-plus/es')['ElCollapse']
+    ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
diff --git a/src/components/Data/Collapse/collapse.story.md b/src/components/Data/Collapse/collapse.story.md
new file mode 100644
index 0000000..6bfe785
--- /dev/null
+++ b/src/components/Data/Collapse/collapse.story.md
@@ -0,0 +1,33 @@
+## Collapse Attributes
+
+| Name                  | Description                        | Type                                                 | Accepted Values | Default |
+| --------------------- | ---------------------------------- | ---------------------------------------------------- | --------------- | ------- |
+| model-value / v-model | currently active panel             | string (accordion mode) / array (non-accordion mode) | —               | —       |
+| accordion             | whether to activate accordion mode | boolean                                              | —               | false   |
+
+## Collapse Events
+
+| Name   | Description                        | Parameters                                                          |
+| ------ | ---------------------------------- | ------------------------------------------------------------------- |
+| change | triggers when active panels change | (activeNames: array (non-accordion mode) / string (accordion mode)) |
+
+## Collapse Slots
+
+| Name | Description               | Subtags       |
+| ---- | ------------------------- | ------------- |
+| -    | customize default content | Collapse Item |
+
+## Collapse Item Attributes
+
+| Name     | Description                        | Type          | Accepted Values | Default |
+| -------- | ---------------------------------- | ------------- | --------------- | ------- |
+| name     | unique identification of the panel | string/number | —               | —       |
+| title    | title of the panel                 | string        | —               | —       |
+| disabled | disable the collapse item          | boolean       | —               | —       |
+
+## Collapse Item Slot
+
+| Name  | Description                    |
+| ----- | ------------------------------ |
+| —     | content of Collapse Item       |
+| title | content of Collapse Item title |
diff --git a/src/components/Data/Collapse/collapse.story.vue b/src/components/Data/Collapse/collapse.story.vue
new file mode 100644
index 0000000..a23e389
--- /dev/null
+++ b/src/components/Data/Collapse/collapse.story.vue
@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { isAttribute } from '@/utils'
+
+const activeNames = ref(['1'])
+const accordion = ref(false)
+const firstCollapseItem = reactive({
+  title: 'Consistency',
+  disabled: false,
+})
+const secondCollapseItem = reactive({
+  title: 'Feedback',
+  disabled: false,
+})
+const source = computed(() => {
+  return `<script setup lang="ts">
+const activeNames = ref(['1'])
+<\/script>
+
+<template>
+    <el-collapse v-model="activeNames">
+      <el-collapse-item
+        title="${firstCollapseItem.title}"
+        name="1"${
+        isAttribute(
+    firstCollapseItem.disabled,
+    '      disabled',
+)}
+      >
+        Consistent with real life: in line with the process and logic of real
+        life, and comply with languages and habits that the users are used to;
+      </el-collapse-item>
+      <el-collapse-item
+        title="${firstCollapseItem.title}"
+        name="2"${
+        isAttribute(
+    firstCollapseItem.disabled,
+    '      disabled',
+)}
+      >
+        Operation feedback: enable the users to clearly perceive their
+        operations by style updates and interactive effects;
+      </el-collapse-item>
+    </el-collapse>
+</template>
+`
+})
+</script>
+
+<template>
+  <Story title="Data/Collapse" icon="mdi:collapse-all">
+    <Variant
+      title="Basic Usage"
+      :source="source"
+    >
+      <el-collapse
+        v-model="activeNames"
+        :accordion="accordion"
+      >
+        <el-collapse-item
+          :title="firstCollapseItem.title"
+          :disabled="firstCollapseItem.disabled"
+          name="1"
+        >
+          Consistent with real life: in line with the process and logic of real
+          life, and comply with languages and habits that the users are used to;
+        </el-collapse-item>
+        <el-collapse-item
+          :title="secondCollapseItem.title"
+          :disabled="secondCollapseItem.disabled"
+          name="2"
+        >
+          Operation feedback: enable the users to clearly perceive their
+          operations by style updates and interactive effects;
+        </el-collapse-item>
+      </el-collapse>
+      <template #controls>
+        <HstCheckbox v-model="accordion" title="Accordion" />
+        <el-divider border-style="dotted" content-position="left">
+          <span>First Collapse Item</span>
+        </el-divider>
+        <HstText v-model="firstCollapseItem.title" title="Title" />
+        <HstCheckbox v-model="firstCollapseItem.disabled" title="Disable" />
+        <el-divider border-style="dotted" content-position="left">
+          <span>Second Collapse Item</span>
+        </el-divider>
+        <HstText v-model="secondCollapseItem.title" title="Title" />
+        <HstCheckbox v-model="secondCollapseItem.disabled" title="Disable" />
+      </template>
+    </Variant>
+  </Story>
+</template>