diff --git a/packages/varlet-eslint-config/index.js b/packages/varlet-eslint-config/index.js
index 34343e3590d..9e82f8d00a7 100644
--- a/packages/varlet-eslint-config/index.js
+++ b/packages/varlet-eslint-config/index.js
@@ -1,64 +1,65 @@
 module.exports = {
-  extends: [
-    'airbnb-base',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:vue/vue3-recommended',
-    'prettier',
-    'prettier/vue',
-  ],
-  parserOptions: {
-    parser: '@typescript-eslint/parser',
-    ecmaVersion: 2020,
-    sourceType: 'module',
-    extraFileExtensions: ['.vue'],
-  },
-  plugins: ['@typescript-eslint'],
-  env: {
-    es6: true,
-    node: true,
-    browser: true,
-  },
-  rules: {
-    'no-new': 'off',
-    'no-shadow': 'off',
-    'no-bitwise': 'off',
-    'func-names': 'off',
-    'no-console': 'off',
-    'no-plusplus': 'off',
-    'default-case': 'off',
-    'prefer-template': 'off',
-    'consistent-return': 'off',
-    'no-param-reassign': 'off',
-    'no-nested-ternary': 'off',
-    'no-underscore-dangle': 'off',
-    'no-unused-expressions': 'off',
-    'no-restricted-globals': 'off',
-    'no-use-before-define': 'off',
-    'class-methods-use-this': 'off',
-    'global-require': 'off',
-    'prefer-destructuring': ['error', { object: true, array: false }],
-    // eslint-plugin-import
-    'import/order': 'off',
-    'import/extensions': 'off',
-    'import/no-unresolved': 'off',
-    'import/prefer-default-export': 'off',
-    'import/no-extraneous-dependencies': 'off',
-    'import/no-dynamic-require': 'off',
-    // eslint-plugin-vue
-    'vue/comment-directive': 'off',
-    'vue/no-v-html': 'off',
-    'vue/attributes-order': 'off',
-    'vue/require-default-prop': 'off',
-    'vue/no-unused-components': 'off',
-    'vue/require-explicit-emits': 'off',
-    // typescript-eslint
-    '@typescript-eslint/camelcase': 'off',
-    '@typescript-eslint/ban-ts-ignore': 'off',
-    '@typescript-eslint/no-var-requires': 'off',
-    '@typescript-eslint/no-explicit-any': 'off',
-    '@typescript-eslint/no-empty-function': 'off',
-    '@typescript-eslint/no-non-null-assertion': 'off',
-    '@typescript-eslint/explicit-function-return-type': 'off',
-    '@typescript-eslint/explicit-module-boundary-types': 'off'
-  },
-};
+	extends: [
+		'airbnb-base',
+		'plugin:@typescript-eslint/recommended',
+		'plugin:vue/vue3-recommended',
+		'prettier',
+		'prettier/vue',
+	],
+	parserOptions: {
+		parser: '@typescript-eslint/parser',
+		ecmaVersion: 2020,
+		sourceType: 'module',
+		extraFileExtensions: ['.vue'],
+	},
+	plugins: ['@typescript-eslint'],
+	env: {
+		es6: true,
+		node: true,
+		browser: true,
+	},
+	rules: {
+		'no-new': 'off',
+		'no-shadow': 'off',
+		'no-bitwise': 'off',
+		'func-names': 'off',
+		'no-console': 'off',
+		'no-plusplus': 'off',
+		'default-case': 'off',
+		'prefer-template': 'off',
+		'consistent-return': 'off',
+		'no-param-reassign': 'off',
+		'no-nested-ternary': 'off',
+		'no-underscore-dangle': 'off',
+		'no-unused-expressions': 'off',
+		'no-restricted-globals': 'off',
+		'no-use-before-define': 'off',
+		'class-methods-use-this': 'off',
+		'global-require': 'off',
+		'prefer-destructuring': ['error', { object: true, array: false }],
+		// eslint-plugin-import
+		'import/order': 'off',
+		'import/extensions': 'off',
+		'import/no-unresolved': 'off',
+		'import/prefer-default-export': 'off',
+		'import/no-extraneous-dependencies': 'off',
+		'import/no-dynamic-require': 'off',
+		// eslint-plugin-vue
+		'vue/comment-directive': 'off',
+		'vue/no-v-html': 'off',
+		'vue/attributes-order': 'off',
+		'vue/require-default-prop': 'off',
+		'vue/no-unused-components': 'off',
+		'vue/require-explicit-emits': 'off',
+		// typescript-eslint
+		'@typescript-eslint/camelcase': 'off',
+		'@typescript-eslint/ban-ts-ignore': 'off',
+		'@typescript-eslint/no-var-requires': 'off',
+		'@typescript-eslint/no-extra-semi': 'off',
+		'@typescript-eslint/no-explicit-any': 'off',
+		'@typescript-eslint/no-empty-function': 'off',
+		'@typescript-eslint/no-non-null-assertion': 'off',
+		'@typescript-eslint/explicit-function-return-type': 'off',
+		'@typescript-eslint/explicit-module-boundary-types': 'off',
+	},
+}
diff --git a/packages/varlet-icons/svg/uF007-chevron-down.svg b/packages/varlet-icons/svg/uF007-chevron-down.svg
new file mode 100644
index 00000000000..fc32cf83eec
--- /dev/null
+++ b/packages/varlet-icons/svg/uF007-chevron-down.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg>
\ No newline at end of file
diff --git a/packages/varlet-ui/src/expansion-panel/ExpansionPanel.vue b/packages/varlet-ui/src/expansion-panel/ExpansionPanel.vue
new file mode 100644
index 00000000000..55b63c0ac1a
--- /dev/null
+++ b/packages/varlet-ui/src/expansion-panel/ExpansionPanel.vue
@@ -0,0 +1,139 @@
+<template>
+	<div
+		:class="{
+			'var-expansion-panel': true,
+			'var-expansion-panel__active': isOpen,
+			'var-expansion-panel__disable': disabled,
+		}"
+	>
+		<div class="var-expansion-panel-header" @click="toggle()">
+			<div class="var-expansion-panel-header__title">
+				<slot name="title">{{ title }}</slot>
+			</div>
+			<div class="var-expansion-panel-header__icon">
+				<slot name="icon">
+					<var-icon
+						:name="icon"
+						:transition="400"
+						:class="{
+							'var-expansion-panel-header__icon': true,
+							'var-expansion-panel-header__open': isOpen && icon === 'chevron-down',
+							'var-expansion-panel-header__disable': disabled,
+						}"
+					/>
+				</slot>
+			</div>
+		</div>
+		<div class="var-expansion-panel-content" v-show="show" ref="contentEl" @transitionend="transitionend">
+			<div class="var-expansion-panel__wrap">
+				<slot></slot>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, Ref, nextTick, watch, ComputedRef, computed } from 'vue'
+import { requestAnimationFrame } from '../utils/elements'
+import { isArray } from '../utils/shared'
+import { useParent, useAtParentIndex } from '../utils/components'
+import {
+	EXPANSION_PANELS_BIND_EXPANSION_PANEL_KEY,
+	EXPANSION_PANELS_COUNT_EXPANSION_PANEL_KEY,
+	ExpansionPanelsProvider,
+} from '../expansion-panels/provide'
+import { ExpansionPanelProvider } from './provide'
+import { props } from './props'
+import Icon from '../icon'
+
+export default defineComponent({
+	name: 'VarExpansionPanel',
+	components: {
+		[Icon.name]: Icon,
+	},
+	props,
+	setup(props) {
+		const { parentProvider: ExpansionPanelsProvider, bindParent } = useParent<
+			ExpansionPanelsProvider,
+			ExpansionPanelProvider
+		>(EXPANSION_PANELS_BIND_EXPANSION_PANEL_KEY)
+		const { index } = useAtParentIndex(EXPANSION_PANELS_COUNT_EXPANSION_PANEL_KEY)
+
+		const contentEl: Ref<HTMLDivElement | null> = ref(null)
+		const show: Ref<boolean> = ref(false)
+		const isOpen: Ref<boolean> = ref(false)
+		const isLock: Ref<boolean> = ref(false)
+		const { active, updateItem } = ExpansionPanelsProvider
+
+		const name: ComputedRef<number | string | undefined> = computed(() => props.name)
+
+		const init = (accordion: boolean) => {
+			Array.prototype.slice()
+			if (!active.value || (accordion && isArray(active.value))) return
+			const isShow = isArray(active.value)
+				? (active.value as Array<number | string | undefined>).includes(props.name)
+				: active.value === props.name
+			toggle(isShow, true)
+		}
+
+		const toggle = (isShow?: boolean, initOrAccordion?: boolean) => {
+			if (isLock.value || props.disabled || isOpen.value === isShow) return
+			isLock.value = true
+			isOpen.value = isShow === undefined ? !isOpen.value : isShow
+			if (!initOrAccordion) updateItem(props.name, isOpen.value)
+		}
+
+		const openPanel = () => {
+			if (!contentEl.value) return
+			show.value = true
+			nextTick(() => {
+				const { offsetHeight } = contentEl.value as HTMLDivElement
+				;(contentEl.value as HTMLDivElement).style.height = 0 + 'px'
+				requestAnimationFrame(() => {
+					;(contentEl.value as HTMLDivElement).style.height = offsetHeight + 'px'
+				})
+			})
+		}
+
+		const closePanel = () => {
+			if (!contentEl.value) return
+			;(contentEl.value as HTMLDivElement).style.height = 0 + 'px'
+		}
+
+		const transitionend = () => {
+			if (!isOpen.value) {
+				show.value = false
+				;(contentEl.value as HTMLDivElement).style.height = ''
+			}
+			isLock.value = false
+		}
+
+		const expansionPanelProvider: ExpansionPanelProvider = {
+			index,
+			name,
+			init,
+			toggle,
+		}
+
+		bindParent(expansionPanelProvider)
+
+		watch(isOpen, (value) => {
+			if (value) openPanel()
+			else closePanel()
+		})
+
+		return {
+			show,
+			isOpen,
+			toggle,
+			contentEl,
+			closePanel,
+			transitionend,
+		}
+	},
+})
+</script>
+
+<style lang="less">
+@import './expansionPanel';
+</style>
diff --git a/packages/varlet-ui/src/expansion-panel/__tests__/index.spec.js b/packages/varlet-ui/src/expansion-panel/__tests__/index.spec.js
new file mode 100644
index 00000000000..d6da60b479c
--- /dev/null
+++ b/packages/varlet-ui/src/expansion-panel/__tests__/index.spec.js
@@ -0,0 +1,7 @@
+const ExpansionPanel = require('../../../cjs/expansion-panel').default
+const { render } = require('@testing-library/vue')
+
+test('test expansionPanel', async () => {
+	const wrapper = render(ExpansionPanel)
+	console.log(wrapper)
+})
diff --git a/packages/varlet-ui/src/expansion-panel/docs/en_US.md b/packages/varlet-ui/src/expansion-panel/docs/en_US.md
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/packages/varlet-ui/src/expansion-panel/docs/zh_CN.md b/packages/varlet-ui/src/expansion-panel/docs/zh_CN.md
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/packages/varlet-ui/src/expansion-panel/example/index.vue b/packages/varlet-ui/src/expansion-panel/example/index.vue
new file mode 100644
index 00000000000..90eb4fa08a4
--- /dev/null
+++ b/packages/varlet-ui/src/expansion-panel/example/index.vue
@@ -0,0 +1,21 @@
+<template>
+	<var-expansion-panel />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import ExpansionPanel from '..'
+
+export default defineComponent({
+	name: 'ExpansionPanelExample',
+	components: {
+		[ExpansionPanel.name]: ExpansionPanel,
+	},
+})
+</script>
+
+<style scoped>
+.example {
+	background: antiquewhite;
+}
+</style>
diff --git a/packages/varlet-ui/src/expansion-panel/expansionPanel.less b/packages/varlet-ui/src/expansion-panel/expansionPanel.less
new file mode 100644
index 00000000000..35e947764f9
--- /dev/null
+++ b/packages/varlet-ui/src/expansion-panel/expansionPanel.less
@@ -0,0 +1,75 @@
+@import '../styles/var';
+
+.var-expansion-panel {
+	box-sizing: border-box;
+	position: relative;
+	margin-top: 0;
+	background: #fff;
+	color: rgba(0, 0, 0, 0.87);
+	transition: margin-top 0.4s, color 0.4s;
+
+	&:before {
+		bottom: 0;
+		content: '';
+		left: 0;
+		position: absolute;
+		right: 0;
+		top: 0;
+		z-index: -1;
+		box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+	}
+
+	&:not(:first-child):after {
+		border-top: thin solid rgba(0, 0, 0, 0.12);
+		content: '';
+		left: 0;
+		position: absolute;
+		right: 0;
+		top: 0;
+	}
+
+	&-header {
+		align-items: center;
+		display: flex;
+		font-size: @font-size-md;
+		outline: none;
+		padding: 10px 16px;
+		justify-content: space-between;
+		position: relative;
+		width: 100%;
+
+		&__icon {
+			transform: rotate(0deg);
+			opacity: 1;
+		}
+
+		&__disable {
+			opacity: 0;
+		}
+
+		&__open {
+			transform: rotate(-180deg);
+		}
+	}
+
+	&-content {
+		transition: height 0.4s;
+		display: flex;
+		overflow: hidden;
+	}
+
+	&__wrap {
+		padding: 0 16px 10px;
+		word-break: break-all;
+		flex: 1;
+	}
+
+	&__active + &,
+	&__active:not(:first-child) {
+		margin-top: 16px;
+	}
+
+	&__disable {
+		color: rgba(0, 0, 0, 0.38);
+	}
+}
diff --git a/packages/varlet-ui/src/expansion-panel/index.ts b/packages/varlet-ui/src/expansion-panel/index.ts
new file mode 100644
index 00000000000..4a3f42c59c8
--- /dev/null
+++ b/packages/varlet-ui/src/expansion-panel/index.ts
@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import ExpansionPanel from './ExpansionPanel.vue'
+
+ExpansionPanel.install = function (app: App) {
+	app.component(ExpansionPanel.name, ExpansionPanel)
+}
+
+export default ExpansionPanel
diff --git a/packages/varlet-ui/src/expansion-panel/props.ts b/packages/varlet-ui/src/expansion-panel/props.ts
new file mode 100644
index 00000000000..f089ccf4294
--- /dev/null
+++ b/packages/varlet-ui/src/expansion-panel/props.ts
@@ -0,0 +1,16 @@
+export const props = {
+	name: {
+		type: [String, Number],
+	},
+	title: {
+		type: String,
+	},
+	icon: {
+		type: String,
+		default: 'chevron-down',
+	},
+	disabled: {
+		type: Boolean,
+		default: false,
+	},
+}
diff --git a/packages/varlet-ui/src/expansion-panel/provide.ts b/packages/varlet-ui/src/expansion-panel/provide.ts
new file mode 100644
index 00000000000..9c1efe3b766
--- /dev/null
+++ b/packages/varlet-ui/src/expansion-panel/provide.ts
@@ -0,0 +1,8 @@
+import { ComputedRef } from 'vue'
+
+export interface ExpansionPanelProvider {
+	index: ComputedRef<number>
+	name: ComputedRef<string | number | undefined>
+	init(accordion: boolean): void
+	toggle(isShow?: boolean, initOrAccordion?: boolean): void
+}
diff --git a/packages/varlet-ui/src/expansion-panels/ExpansionPanels.vue b/packages/varlet-ui/src/expansion-panels/ExpansionPanels.vue
new file mode 100644
index 00000000000..495b1524764
--- /dev/null
+++ b/packages/varlet-ui/src/expansion-panels/ExpansionPanels.vue
@@ -0,0 +1,74 @@
+<template>
+	<div class="var-expansion-panels">
+		<slot></slot>
+	</div>
+</template>
+
+<script lang="ts">
+import { computed, ComputedRef, defineComponent, nextTick, watch } from 'vue'
+import { useChildren, useAtChildrenCounter } from '../utils/components'
+import {
+	EXPANSION_PANELS_BIND_EXPANSION_PANEL_KEY,
+	EXPANSION_PANELS_COUNT_EXPANSION_PANEL_KEY,
+	ExpansionPanelsProvider,
+} from './provide'
+import { ExpansionPanelProvider } from '../expansion-panel/provide'
+import { props } from './props'
+import { isArray } from '../utils/shared'
+
+export default defineComponent({
+	name: 'VarExpansionPanels',
+	props,
+	setup(props) {
+		const active: ComputedRef<number | string | Array<number | string> | undefined> = computed(() => props.modelValue)
+		const { bindChildren, childProviders: ExpansionPanelProvider } = useChildren<
+			ExpansionPanelsProvider,
+			ExpansionPanelProvider
+		>(EXPANSION_PANELS_BIND_EXPANSION_PANEL_KEY)
+		const { length } = useAtChildrenCounter(EXPANSION_PANELS_COUNT_EXPANSION_PANEL_KEY)
+
+		const checkValue = () => {
+			if (!props.modelValue) return false
+			if (!props.accordion && isArray(props.modelValue)) return false
+			return !(props.accordion && isArray(props.modelValue))
+		}
+
+		const getValue = (value: number | string | undefined, isExpand: boolean) => {
+			if (!checkValue()) console.warn('[Varlet] ExpansionPanels: type of prop "modelValue" should be Array')
+			if (isExpand) return props.accordion ? value : [...(props.modelValue as Array<string | number>), value]
+			return props.accordion
+				? undefined
+				: (props.modelValue as Array<string | number>).filter((name: string | number) => name !== value)
+		}
+
+		const updateItem = (value: number | string | undefined, isExpand: boolean) => {
+			if (props.accordion) {
+				ExpansionPanelProvider.forEach(({ name, toggle }: ExpansionPanelProvider) => {
+					if (value !== name.value) toggle(false, true)
+				})
+			}
+			const modelValue = getValue(value, isExpand)
+			props['onUpdate:modelValue']?.(modelValue)
+			props.onChange?.(modelValue)
+		}
+		const expansionPanelsProvider: ExpansionPanelsProvider = {
+			active,
+			updateItem,
+		}
+
+		bindChildren(expansionPanelsProvider)
+
+		watch(
+			() => length.value,
+			() =>
+				nextTick(() => {
+					ExpansionPanelProvider.forEach(({ init }) => init(props.accordion))
+				})
+		)
+	},
+})
+</script>
+
+<style lang="less">
+@import 'expansionPanels';
+</style>
diff --git a/packages/varlet-ui/src/expansion-panels/__tests__/index.spec.js b/packages/varlet-ui/src/expansion-panels/__tests__/index.spec.js
new file mode 100644
index 00000000000..6bfd743ddc8
--- /dev/null
+++ b/packages/varlet-ui/src/expansion-panels/__tests__/index.spec.js
@@ -0,0 +1,7 @@
+const ExpansionPanels = require('../../../cjs/expansion-panels').default
+const { render } = require('@testing-library/vue')
+
+test('test expansionPanels', async () => {
+	const wrapper = render(ExpansionPanels)
+	console.log(wrapper)
+})
diff --git a/packages/varlet-ui/src/expansion-panels/docs/en_US.md b/packages/varlet-ui/src/expansion-panels/docs/en_US.md
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/packages/varlet-ui/src/expansion-panels/docs/zh_CN.md b/packages/varlet-ui/src/expansion-panels/docs/zh_CN.md
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/packages/varlet-ui/src/expansion-panels/example/index.vue b/packages/varlet-ui/src/expansion-panels/example/index.vue
new file mode 100644
index 00000000000..105b1147d12
--- /dev/null
+++ b/packages/varlet-ui/src/expansion-panels/example/index.vue
@@ -0,0 +1,57 @@
+<template>
+	<div style="margin-top: 15px">
+		<button @click="disabled = !disabled">check</button>
+		<var-expansion-panels v-model="value" @change="changeHandle" :accordion="false">
+			<var-expansion-panel title="Item2121" name="1">
+				<template #icon> fsd</template>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+				magna aliqua.
+			</var-expansion-panel>
+			<var-expansion-panel :disabled="disabled" name="2">
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+				magna aliqua.
+			</var-expansion-panel>
+			<var-expansion-panel name="3">
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+				magna aliqua.
+			</var-expansion-panel>
+			<var-expansion-panel name="4">
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+				magna aliqua.
+			</var-expansion-panel>
+		</var-expansion-panels>
+	</div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import ExpansionPanels from '..'
+import ExpansionPanel from '../../expansion-panel'
+
+export default defineComponent({
+	name: 'ExpansionPanelsExample',
+	components: {
+		[ExpansionPanels.name]: ExpansionPanels,
+		[ExpansionPanel.name]: ExpansionPanel,
+	},
+	setup() {
+		const disabled = ref(false)
+		const value = ref(['2', '3'])
+		const changeHandle = (val: any) => {
+			console.log({ val })
+			console.log(value.value)
+		}
+		return {
+			disabled,
+			value,
+			changeHandle,
+		}
+	},
+})
+</script>
+
+<style scoped>
+.example {
+	background: antiquewhite;
+}
+</style>
diff --git a/packages/varlet-ui/src/expansion-panels/expansionPanels.less b/packages/varlet-ui/src/expansion-panels/expansionPanels.less
new file mode 100644
index 00000000000..63a48bb7819
--- /dev/null
+++ b/packages/varlet-ui/src/expansion-panels/expansionPanels.less
@@ -0,0 +1,5 @@
+@import '../styles/elevation';
+
+.var-expansion-panels {
+	position: relative;
+}
diff --git a/packages/varlet-ui/src/expansion-panels/index.ts b/packages/varlet-ui/src/expansion-panels/index.ts
new file mode 100644
index 00000000000..e5f19e550e0
--- /dev/null
+++ b/packages/varlet-ui/src/expansion-panels/index.ts
@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import ExpansionPanels from './ExpansionPanels.vue'
+
+ExpansionPanels.install = function (app: App) {
+	app.component(ExpansionPanels.name, ExpansionPanels)
+}
+
+export default ExpansionPanels
diff --git a/packages/varlet-ui/src/expansion-panels/props.ts b/packages/varlet-ui/src/expansion-panels/props.ts
new file mode 100644
index 00000000000..ea98202ef3c
--- /dev/null
+++ b/packages/varlet-ui/src/expansion-panels/props.ts
@@ -0,0 +1,17 @@
+import { PropType } from 'vue'
+
+export const props = {
+	modelValue: {
+		type: [Array, String, Number] as PropType<string | number | Array<string | number>>,
+	},
+	accordion: {
+		type: Boolean,
+		default: false,
+	},
+	onChange: {
+		type: Function,
+	},
+	'onUpdate:modelValue': {
+		type: Function,
+	},
+}
diff --git a/packages/varlet-ui/src/expansion-panels/provide.ts b/packages/varlet-ui/src/expansion-panels/provide.ts
new file mode 100644
index 00000000000..d7132e4f7d1
--- /dev/null
+++ b/packages/varlet-ui/src/expansion-panels/provide.ts
@@ -0,0 +1,9 @@
+import { ComputedRef } from 'vue'
+
+export interface ExpansionPanelsProvider {
+	active: ComputedRef<number | string | Array<number | string> | undefined>
+	updateItem: (value: number | string | undefined, isExpand: boolean) => void
+}
+
+export const EXPANSION_PANELS_BIND_EXPANSION_PANEL_KEY = Symbol('EXPANSION_PANELS_BIND_EXPANSION_PANEL_KEY')
+export const EXPANSION_PANELS_COUNT_EXPANSION_PANEL_KEY = Symbol('EXPANSION_PANELS_COUNT_EXPANSION_PANEL_KEY')
diff --git a/packages/varlet-ui/src/icon/Icon.vue b/packages/varlet-ui/src/icon/Icon.vue
index 05ac7e90de7..22058d1c405 100644
--- a/packages/varlet-ui/src/icon/Icon.vue
+++ b/packages/varlet-ui/src/icon/Icon.vue
@@ -3,7 +3,7 @@
 		class="var-icon"
 		:class="[`${namespace}--set`, `${namespace}-${nextName}`, tickTransition ? 'var-icon--hidden' : null]"
 		:style="{
-			transition: `transform ${transition}ms`,
+			transition: `all ${transition}ms`,
 		}"
 		v-bind="$attrs"
 	/>
diff --git a/packages/varlet-ui/src/icon/icon.less b/packages/varlet-ui/src/icon/icon.less
index 10ef6955705..b48df41d367 100644
--- a/packages/varlet-ui/src/icon/icon.less
+++ b/packages/varlet-ui/src/icon/icon.less
@@ -1,11 +1,11 @@
-@import "~@varlet/icons/dist/css/varlet-icons.less";
-@import "../styles/var";
+@import '~@varlet/icons/dist/css/varlet-icons.less';
+@import '../styles/var';
 
 .var-icon {
-  //font-size: @icon-size-md;
-  color: inherit;
+	font-size: @icon-size-md;
+	color: inherit;
 
-  &--hidden {
-    transform: scale(0);
-  }
+	&--hidden {
+		transform: scale(0);
+	}
 }
diff --git a/packages/varlet-ui/src/utils/elements.ts b/packages/varlet-ui/src/utils/elements.ts
index ee2bb57e743..3be338f79fd 100644
--- a/packages/varlet-ui/src/utils/elements.ts
+++ b/packages/varlet-ui/src/utils/elements.ts
@@ -1,3 +1,7 @@
+import { inBrowser } from './shared'
+
+const root = (inBrowser ? window : global) as Window
+
 export function getTop(element: HTMLElement): number {
 	const { top } = element.getBoundingClientRect()
 
@@ -82,3 +86,7 @@ export function remToPx(rem: string | number): number {
 
 	return value * parseFloat(rootFontSize)
 }
+
+export function requestAnimationFrame(fn: FrameRequestCallback): number {
+	return root.requestAnimationFrame ? root.requestAnimationFrame(fn) : root.setTimeout(fn, 16)
+}
diff --git a/packages/varlet-ui/src/utils/shared.ts b/packages/varlet-ui/src/utils/shared.ts
index e0767153198..4db0881275f 100644
--- a/packages/varlet-ui/src/utils/shared.ts
+++ b/packages/varlet-ui/src/utils/shared.ts
@@ -8,12 +8,16 @@ export interface CacheInstance<T> {
 	remove(key: T): void
 }
 
+export const inBrowser = typeof window !== 'undefined'
+
 export const isString = (val: unknown): val is string => typeof val === 'string'
 
 export const isNumber = (val: unknown): val is number => typeof val === 'number'
 
 export const isBaseObject = (val: unknown) => Object.prototype.toString.call(val) === '[object Object]'
 
+export const isArray = (val: unknown): val is Array<any> => Array.isArray(val)
+
 export const removeItem = (arr: Array<unknown>, item: unknown) => {
 	if (arr.length) {
 		const index: number = arr.indexOf(item)