diff --git a/snowy-admin-web/src/components/XnFormContainer/demo.vue b/snowy-admin-web/src/components/XnFormContainer/demo.vue
new file mode 100644
index 00000000..60293bd9
--- /dev/null
+++ b/snowy-admin-web/src/components/XnFormContainer/demo.vue
@@ -0,0 +1,84 @@
+<template>
+	<div>
+		<button @click="showDrawer">Show Drawer</button>
+		<button @click="showModal">Show Modal</button>
+		<xn-form-container
+			v-model:visible="drawerVisible"
+			:type="drawerType"
+			title="Drawer Title"
+			placement="right"
+			width="300px"
+			:destroyOnClose="false"
+			@ok="onOkDrawer"
+			@close="onCloseDrawer"
+		>
+			<p>Drawer Content</p>
+			<template #footer>
+				<div>Drawer footer</div>
+			</template>
+			<template #title>
+				<div>Drawer title</div>
+			</template>
+		</xn-form-container>
+		<xn-form-container
+			v-model:visible="modalVisible"
+			:type="modalType"
+			title="Modal Title"
+			:width="800"
+			:destroyOnClose="false"
+			@ok="onOkModal"
+			@close="onCloseModal"
+		>
+			<p>Modal Content</p>
+			<template #footer>
+				<div>Modal footer</div>
+			</template>
+			<template #title>
+				<div>Modal title</div>
+			</template>
+		</xn-form-container>
+	</div>
+</template>
+
+<script>
+	import XnFormContainer from './XnFormContainer'
+
+	export default {
+		name: 'Example',
+		components: {
+			XnFormContainer
+		},
+		data() {
+			return {
+				drawerVisible: false,
+				drawerType: 'drawer',
+				modalVisible: false,
+				modalType: 'modal'
+			}
+		},
+		methods: {
+			showDrawer() {
+				this.drawerVisible = true
+			},
+			showModal() {
+				this.modalVisible = true
+			},
+			onOkDrawer() {
+				this.$message.success('onOkDrawer')
+				this.drawerVisible = false
+			},
+			onCloseModal() {
+				this.$message.success('onCloseModal')
+				this.modalVisible = false
+			},
+			onCloseDrawer() {
+				this.$message.success('onCloseDrawer')
+				this.drawerVisible = false
+			},
+			onOkModal() {
+				this.$message.success('onOkModal')
+				this.modalVisible = false
+			}
+		}
+	}
+</script>
diff --git a/snowy-admin-web/src/components/XnFormContainer/index.vue b/snowy-admin-web/src/components/XnFormContainer/index.vue
new file mode 100644
index 00000000..2ee63841
--- /dev/null
+++ b/snowy-admin-web/src/components/XnFormContainer/index.vue
@@ -0,0 +1,57 @@
+<template>
+	<Modal v-if="isModal" :visible="visible" @cancel="cancel" v-bind="$attrs">
+		<template v-for="slotKey in slotKeys" #[slotKey]>
+			<slot :name="slotKey" />
+		</template>
+	</Modal>
+	<Drawer v-else :visible="visible" v-bind="$attrs">
+		<template v-for="slotKey in slotKeys" #[slotKey]>
+			<slot :name="slotKey" />
+		</template>
+	</Drawer>
+</template>
+
+<script>
+	import { Drawer, Modal } from 'ant-design-vue'
+	import { modalProps } from 'ant-design-vue/es/modal/Modal'
+	import { drawerProps } from 'ant-design-vue/es/drawer'
+
+	const FormContainerTypeEnum = {
+		DRAWER: 'drawer',
+		MODAL: 'modal'
+	}
+	export default {
+		name: 'XnFormContainer',
+		components: {
+			Drawer,
+			Modal
+		},
+		inheritAttrs: false,
+		props: {
+			type: {
+				type: String,
+				default: FormContainerTypeEnum.MODAL
+			},
+			visible: {
+				type: Boolean,
+				default: false,
+				required: true
+			},
+			...modalProps,
+			...drawerProps
+		},
+		computed: {
+			slotKeys() {
+				return Object.keys(this.$slots)
+			},
+			isModal() {
+				return this.type === FormContainerTypeEnum.MODAL
+			}
+		},
+		methods: {
+			cancel() {
+				this.$emit('close')
+			}
+		}
+	}
+</script>