diff --git a/packages/design/.npmignore b/packages/design/.npmignore
new file mode 100644
index 00000000..595cc166
--- /dev/null
+++ b/packages/design/.npmignore
@@ -0,0 +1,30 @@
+.babelrc
+.eslintrc
+.editorconfig
+node_modules
+.DS_Store
+examples
+tests
+.code.yml
+reports
+tsconfig.json
+vite.config.ts
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+pnpm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/packages/design/package.json b/packages/design/package.json
new file mode 100644
index 00000000..68a6e925
--- /dev/null
+++ b/packages/design/package.json
@@ -0,0 +1,53 @@
+{
+  "version": "1.2.0-beta.2",
+  "name": "@tmagic/design",
+  "sideEffects": [
+    "dist/*"
+  ],
+  "main": "dist/tmagic-design.umd.js",
+  "module": "dist/tmagic-design.mjs",
+  "types": "types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/tmagic-design.mjs",
+      "require": "./dist/tmagic-design.umd.js"
+    },
+    "./*": "./*"
+  },
+  "license": "Apache-2.0",
+  "scripts": {
+    "build": "npm run build:type && vite build",
+    "build:type": "npm run clear:type && vue-tsc --declaration --emitDeclarationOnly --project tsconfig.build.json",
+    "clear:type": "rimraf ./types"
+  },
+  "engines": {
+    "node": ">=14"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Tencent/tmagic-editor.git"
+  },
+  "homepage": "https://tencent.github.io/tmagic-editor/docs/",
+  "keywords": [
+    "design",
+    "vue",
+    "vue3",
+    "typescript"
+  ],
+  "dependencies": {
+    "vue": "^3.2.37"
+  },
+  "peerDependencies": {
+    "vue": "^3.2.37"
+  },
+  "devDependencies": {
+    "@types/node": "^15.12.4",
+    "@vitejs/plugin-vue": "^3.1.0",
+    "@vue/compiler-sfc": "^3.2.37",
+    "@vue/test-utils": "^2.0.0",
+    "rimraf": "^3.0.2",
+    "typescript": "^4.7.4",
+    "vite": "^3.1.3",
+    "vue-tsc": "^0.39.4"
+  }
+}
diff --git a/packages/design/src/Button.vue b/packages/design/src/Button.vue
new file mode 100644
index 00000000..3afa6680
--- /dev/null
+++ b/packages/design/src/Button.vue
@@ -0,0 +1,28 @@
+<template>
+  <component :is="uiComponent.component" v-bind="uiProps" @click="clickHandler">
+    <slot></slot>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { getConfig } from './config';
+
+const props = defineProps<{
+  type?: string;
+  size?: string;
+  text?: boolean;
+  icon?: any;
+}>();
+
+const uiComponent = getConfig('components').button;
+
+const uiProps = computed(() => uiComponent.props(props));
+
+const emit = defineEmits(['click']);
+
+const clickHandler = (...args: any[]) => {
+  emit('click', ...args);
+};
+</script>
diff --git a/packages/design/src/Card.vue b/packages/design/src/Card.vue
new file mode 100644
index 00000000..59cf0d59
--- /dev/null
+++ b/packages/design/src/Card.vue
@@ -0,0 +1,23 @@
+<template>
+  <component :is="uiComponent.component" v-bind="uiProps">
+    <template #header>
+      <slot name="header"></slot>
+    </template>
+
+    <slot></slot>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { getConfig } from './config';
+
+const props = defineProps<{
+  bodyStyle?: Record<string, any>;
+}>();
+
+const uiComponent = getConfig('components').card;
+
+const uiProps = computed(() => uiComponent.props(props));
+</script>
diff --git a/packages/design/src/Cascader.vue b/packages/design/src/Cascader.vue
new file mode 100644
index 00000000..a76d0d15
--- /dev/null
+++ b/packages/design/src/Cascader.vue
@@ -0,0 +1,61 @@
+<template>
+  <component
+    ref="cascader"
+    :is="uiComponent.component"
+    v-bind="uiProps"
+    @update:modelValue="updateModelValue"
+    @change="changeHandler"
+  ></component>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { getConfig } from './config';
+import { CascaderOption } from './type';
+
+const props = defineProps<{
+  modelValue?: any;
+  placeholder?: string;
+  disabled?: boolean;
+  clearable?: boolean;
+  filterable?: boolean;
+  options?: CascaderOption[];
+  size?: 'mini' | 'small' | 'medium';
+  props: {
+    expandTrigger?: 'click' | 'hover';
+    multiple?: boolean;
+    checkStrictly?: boolean;
+    emitPath?: boolean;
+    lazy?: boolean;
+  };
+}>();
+
+const uiComponent = getConfig('components').cascader;
+
+const uiProps = computed(() => uiComponent.props(props));
+
+const cascader = ref<any>();
+
+const emit = defineEmits(['change', 'update:modelValue']);
+
+const changeHandler = (v: any) => {
+  emit('change', v);
+};
+
+const updateModelValue = (v: any) => {
+  emit('update:modelValue', v);
+};
+
+defineExpose({
+  setQuery(v: any) {
+    if (!cascader.value) return;
+    cascader.value.query = v;
+  },
+
+  setPreviousQuery(v: any) {
+    if (!cascader.value) return;
+    cascader.value.previousQuery = v;
+  },
+});
+</script>
diff --git a/packages/design/src/Checkbox.vue b/packages/design/src/Checkbox.vue
new file mode 100644
index 00000000..19044d4d
--- /dev/null
+++ b/packages/design/src/Checkbox.vue
@@ -0,0 +1,42 @@
+<template>
+  <component :is="uiComponent.component" v-bind="uiProps" @update:modelValue="updateModelValue" @change="changeHandler">
+    <template #default>
+      <slot></slot>
+    </template>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { getConfig } from './config';
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | number | boolean;
+    label?: any;
+    trueLabel?: string | number | boolean;
+    falseLabel?: string | number | boolean;
+    disabled?: boolean;
+    size?: 'mini' | 'small' | 'medium';
+  }>(),
+  {
+    trueLabel: undefined,
+    falseLabel: undefined,
+  },
+);
+
+const uiComponent = getConfig('components').checkbox;
+
+const uiProps = computed(() => uiComponent.props(props));
+
+const emit = defineEmits(['change', 'update:modelValue']);
+
+const changeHandler = (v: any) => {
+  emit('change', v);
+};
+
+const updateModelValue = (v: any) => {
+  emit('update:modelValue', v);
+};
+</script>
diff --git a/packages/design/src/CheckboxGroup.vue b/packages/design/src/CheckboxGroup.vue
new file mode 100644
index 00000000..4a1a7818
--- /dev/null
+++ b/packages/design/src/CheckboxGroup.vue
@@ -0,0 +1,32 @@
+<template>
+  <component :is="uiComponent.component" v-bind="uiProps" @change="changeHandler" @update:modelValue="updateModelValue">
+    <slot></slot>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { getConfig } from './config';
+
+const props = defineProps<{
+  modelValue?: any[];
+  label?: string;
+  disabled?: boolean;
+  size?: 'mini' | 'small' | 'medium';
+}>();
+
+const uiComponent = getConfig('components').checkboxGroup;
+
+const uiProps = computed(() => uiComponent.props(props));
+
+const emit = defineEmits(['change', 'update:modelValue']);
+
+const changeHandler = (v: any) => {
+  emit('change', v);
+};
+
+const updateModelValue = (v: any) => {
+  emit('update:modelValue', v);
+};
+</script>
diff --git a/packages/design/src/Col.vue b/packages/design/src/Col.vue
new file mode 100644
index 00000000..b13c605c
--- /dev/null
+++ b/packages/design/src/Col.vue
@@ -0,0 +1,19 @@
+<template>
+  <component :is="uiComponent.component" v-bind="uiProps">
+    <slot></slot>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { getConfig } from './config';
+
+const props = defineProps<{
+  span?: number;
+}>();
+
+const uiComponent = getConfig('components').col;
+
+const uiProps = computed(() => uiComponent.props(props));
+</script>
diff --git a/packages/design/src/ColorPicker.vue b/packages/design/src/ColorPicker.vue
new file mode 100644
index 00000000..e0cea6a7
--- /dev/null
+++ b/packages/design/src/ColorPicker.vue
@@ -0,0 +1,37 @@
+<template>
+  <component :is="uiComponent.component" v-bind="uiProps" @change="changeHandler" @update:modelValue="updateModelValue">
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { getConfig } from './config';
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string;
+    disabled?: boolean;
+    showAlpha?: boolean;
+    size?: 'mini' | 'small' | 'medium';
+  }>(),
+  {
+    showAlpha: false,
+    disabled: false,
+  },
+);
+
+const uiComponent = getConfig('components').colorPicker;
+
+const uiProps = computed(() => uiComponent.props(props));
+
+const emit = defineEmits(['change', 'update:modelValue']);
+
+const changeHandler = (v: any) => {
+  emit('change', v);
+};
+
+const updateModelValue = (v: any) => {
+  emit('update:modelValue', v);
+};
+</script>
diff --git a/packages/design/src/DatePicker.vue b/packages/design/src/DatePicker.vue
new file mode 100644
index 00000000..4ed4cb04
--- /dev/null
+++ b/packages/design/src/DatePicker.vue
@@ -0,0 +1,46 @@
+<template>
+  <component :is="uiComponent.component" v-bind="uiProps" @change="changeHandler" @update:modelValue="updateModelValue">
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { getConfig } from './config';
+
+const props = withDefaults(
+  defineProps<{
+    type?: string;
+    modelValue?: any;
+    disabled?: boolean;
+    placeholder?: string;
+    rangeSeparator?: string;
+    startPlaceholder?: string;
+    endPlaceholder?: string;
+    format?: string;
+    /** 可选，绑定值的格式。 不指定则绑定值为 Date 对象 */
+    valueFormat?: string;
+    /** 在范围选择器里取消两个日期面板之间的联动 */
+    unlinkPanels?: boolean;
+    defaultTime?: any;
+    size?: 'mini' | 'small' | 'medium';
+  }>(),
+  {
+    type: 'date',
+  },
+);
+
+const uiComponent = getConfig('components').datePicker;
+
+const uiProps = computed(() => uiComponent.props(props));
+
+const emit = defineEmits(['change', 'update:modelValue']);
+
+const changeHandler = (v: any) => {
+  emit('change', v);
+};
+
+const updateModelValue = (v: any) => {
+  emit('update:modelValue', v);
+};
+</script>
diff --git a/packages/design/src/Dialog.vue b/packages/design/src/Dialog.vue
new file mode 100644
index 00000000..67a82efe
--- /dev/null
+++ b/packages/design/src/Dialog.vue
@@ -0,0 +1,39 @@
+<template>
+  <component :is="uiComponent.component" v-bind="uiProps" @close="closeHandler" @update:modelValue="updateModelValue">
+    <slot></slot>
+
+    <template #footer>
+      <slot name="footer"></slot>
+    </template>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { getConfig } from './config';
+
+const props = defineProps<{
+  modelValue?: boolean;
+  appendToBody?: boolean;
+  title?: string;
+  width?: string | number;
+  fullscreen?: boolean;
+  closeOnClickModal?: boolean;
+  labelPosition?: string;
+}>();
+
+const uiComponent = getConfig('components').dialog;
+
+const uiProps = computed(() => uiComponent.props(props));
+
+const emit = defineEmits(['close', 'update:modelValue']);
+
+const closeHandler = (...args: any[]) => {
+  emit('close', ...args);
+};
+
+const updateModelValue = (v: any) => {
+  emit('update:modelValue', v);
+};
+</script>
diff --git a/packages/design/src/Form.vue b/packages/design/src/Form.vue
new file mode 100644
index 00000000..df0c1f6c
--- /dev/null
+++ b/packages/design/src/Form.vue
@@ -0,0 +1,35 @@
+<template>
+  <component ref="form" :is="uiComponent.component" v-bind="uiProps">
+    <slot></slot>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { getConfig } from './config';
+
+const form = ref<any>();
+
+const props = defineProps<{
+  model?: any;
+  labelWidth?: string;
+  disabled?: boolean;
+  inline?: boolean;
+  labelPosition?: string;
+}>();
+
+const uiComponent = getConfig('components').form;
+
+const uiProps = computed(() => uiComponent.props(props));
+
+defineExpose({
+  validate() {
+    form.value?.validate();
+  },
+
+  resetFields() {
+    form.value?.resetFields();
+  },
+});
+</script>
diff --git a/packages/design/src/FormItem.vue b/packages/design/src/FormItem.vue
new file mode 100644
index 00000000..f11fec4d
--- /dev/null
+++ b/packages/design/src/FormItem.vue
@@ -0,0 +1,23 @@
+<template>
+  <component :is="uiComponent.component" v-bind="uiProps">
+    <template #label>
+      <slot name="label"></slot>
+    </template>
+    <slot></slot>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { getConfig } from './config';
+const props = defineProps<{
+  prop?: string;
+  labelWidth?: string;
+  rules?: any;
+}>();
+
+const uiComponent = getConfig('components').formItem;
+
+const uiProps = computed(() => uiComponent.props(props));
+</script>
diff --git a/packages/design/src/Icon.vue b/packages/design/src/Icon.vue
new file mode 100644
index 00000000..b454dd8a
--- /dev/null
+++ b/packages/design/src/Icon.vue
@@ -0,0 +1,11 @@
+<template>
+  <component :is="uiComponent.component">
+    <slot></slot>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { getConfig } from './config';
+
+const uiComponent = getConfig('components').icon;
+</script>
diff --git a/packages/design/src/Input.vue b/packages/design/src/Input.vue
new file mode 100644
index 00000000..0e282e66
--- /dev/null
+++ b/packages/design/src/Input.vue
@@ -0,0 +1,46 @@
+<template>
+  <component
+    :is="uiComponent.component"
+    v-bind="uiProps"
+    @change="changeHandler"
+    @input="inputHandler"
+    @update:modelValue="updateModelValue"
+  >
+    <template #append v-if="$slots.prepend">
+      <slot name="append"></slot>
+    </template>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { getConfig } from './config';
+
+const props = defineProps<{
+  modelValue?: string | number | boolean;
+  clearable?: boolean;
+  disabled?: boolean;
+  placeholder?: string;
+  type?: string;
+  size?: 'mini' | 'small' | 'medium';
+}>();
+
+const uiComponent = getConfig('components').input;
+
+const uiProps = computed(() => uiComponent.props(props));
+
+const emit = defineEmits(['change', 'input', 'update:modelValue']);
+
+const changeHandler = (...args: any[]) => {
+  emit('change', ...args);
+};
+
+const inputHandler = (...args: any[]) => {
+  emit('input', ...args);
+};
+
+const updateModelValue = (...args: any[]) => {
+  emit('update:modelValue', ...args);
+};
+</script>
diff --git a/packages/design/src/InputNumber.vue b/packages/design/src/InputNumber.vue
new file mode 100644
index 00000000..0e1120fb
--- /dev/null
+++ b/packages/design/src/InputNumber.vue
@@ -0,0 +1,45 @@
+<template>
+  <component
+    :is="uiComponent.component"
+    v-bind="uiProps"
+    @change="changeHandler"
+    @input="inputHandler"
+    @update:modelValue="updateModelValue"
+  ></component>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { getConfig } from './config';
+
+const props = defineProps<{
+  modelValue?: string | number | boolean;
+  clearable?: boolean;
+  controlsPosition?: string;
+  disabled?: boolean;
+  placeholder?: string;
+  step?: number;
+  min?: number;
+  max?: number;
+  size?: 'mini' | 'small' | 'medium';
+}>();
+
+const uiComponent = getConfig('components').inputNumber;
+
+const uiProps = computed(() => uiComponent.props(props));
+
+const emit = defineEmits(['change', 'input', 'update:modelValue']);
+
+const changeHandler = (...args: any[]) => {
+  emit('change', ...args);
+};
+
+const inputHandler = (...args: any[]) => {
+  emit('input', ...args);
+};
+
+const updateModelValue = (...args: any[]) => {
+  emit('update:modelValue', ...args);
+};
+</script>
diff --git a/packages/design/src/Option.vue b/packages/design/src/Option.vue
new file mode 100644
index 00000000..e42e0d9e
--- /dev/null
+++ b/packages/design/src/Option.vue
@@ -0,0 +1,21 @@
+<template>
+  <component :is="uiComponent.component" v-bind="uiProps">
+    <slot></slot>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { getConfig } from './config';
+
+const props = defineProps<{
+  value?: any;
+  label?: string;
+  disabled?: boolean;
+}>();
+
+const uiComponent = getConfig('components').option;
+
+const uiProps = computed(() => uiComponent.props(props));
+</script>
diff --git a/packages/design/src/OptionGroup.vue b/packages/design/src/OptionGroup.vue
new file mode 100644
index 00000000..618b7aad
--- /dev/null
+++ b/packages/design/src/OptionGroup.vue
@@ -0,0 +1,20 @@
+<template>
+  <component :is="uiComponent.component" v-bind="uiProps">
+    <slot></slot>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { getConfig } from './config';
+
+const props = defineProps<{
+  label?: string;
+  disabled?: boolean;
+}>();
+
+const uiComponent = getConfig('components').optionGroup;
+
+const uiProps = computed(() => uiComponent.props(props));
+</script>
diff --git a/packages/design/src/Pagination.vue b/packages/design/src/Pagination.vue
new file mode 100644
index 00000000..31a331a4
--- /dev/null
+++ b/packages/design/src/Pagination.vue
@@ -0,0 +1,36 @@
+<template>
+  <component
+    :is="uiComponent.component"
+    v-bind="uiProps"
+    @size-change="handleSizeChange"
+    @current-change="handleCurrentChange"
+  ></component>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { getConfig } from './config';
+
+const props = defineProps<{
+  layout?: string;
+  hideOnSinglePage?: boolean;
+  curPage?: number;
+  pageSizes?: number[];
+  pagesize?: number;
+  total?: number;
+}>();
+
+const uiComponent = getConfig('components').pagination;
+
+const uiProps = computed(() => uiComponent.props(props));
+
+const emit = defineEmits(['size-change', 'current-change']);
+
+const handleSizeChange = (args: any[]) => {
+  emit('size-change', ...args);
+};
+const handleCurrentChange = (args: any[]) => {
+  emit('current-change', ...args);
+};
+</script>
diff --git a/packages/design/src/Radio.vue b/packages/design/src/Radio.vue
new file mode 100644
index 00000000..cc3d7df7
--- /dev/null
+++ b/packages/design/src/Radio.vue
@@ -0,0 +1,19 @@
+<template>
+  <component :is="uiComponent.component" v-bind="uiProps">
+    <slot></slot>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { getConfig } from './config';
+
+const props = defineProps<{
+  label?: string | number | boolean;
+}>();
+
+const uiComponent = getConfig('components').radio;
+
+const uiProps = computed(() => uiComponent.props(props));
+</script>
diff --git a/packages/design/src/RadioGroup.vue b/packages/design/src/RadioGroup.vue
new file mode 100644
index 00000000..e5dc64f9
--- /dev/null
+++ b/packages/design/src/RadioGroup.vue
@@ -0,0 +1,31 @@
+<template>
+  <component :is="uiComponent.component" v-bind="uiProps" @change="changeHandler" @update:modelValue="updateModelValue">
+    <slot></slot>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { getConfig } from './config';
+
+const props = defineProps<{
+  modelValue?: string | number | boolean;
+  disabled?: boolean;
+  size?: 'mini' | 'small' | 'medium';
+}>();
+
+const uiComponent = getConfig('components').radioGroup;
+
+const uiProps = computed(() => uiComponent.props(props));
+
+const emit = defineEmits(['change', 'update:modelValue']);
+
+const changeHandler = (v: any) => {
+  emit('change', v);
+};
+
+const updateModelValue = (v: any) => {
+  emit('update:modelValue', v);
+};
+</script>
diff --git a/packages/design/src/Row.vue b/packages/design/src/Row.vue
new file mode 100644
index 00000000..84e1f03d
--- /dev/null
+++ b/packages/design/src/Row.vue
@@ -0,0 +1,11 @@
+<template>
+  <component :is="uiComponent.component">
+    <slot></slot>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { getConfig } from './config';
+
+const uiComponent = getConfig('components').row;
+</script>
diff --git a/packages/design/src/Select.vue b/packages/design/src/Select.vue
new file mode 100644
index 00000000..646491ee
--- /dev/null
+++ b/packages/design/src/Select.vue
@@ -0,0 +1,83 @@
+<template>
+  <component
+    ref="select"
+    :is="uiComponent.component"
+    v-bind="uiProps"
+    @change="changeHandler"
+    @visible-change="visibleHandler"
+    @update:modelValue="updateModelValue"
+  >
+    <slot></slot>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue';
+
+import { getConfig } from './config';
+
+const select = ref<any>();
+
+const props = defineProps<{
+  modelValue?: any;
+  clearable?: boolean;
+  filterable?: boolean;
+  popperClass?: string;
+  disabled?: boolean;
+  placeholder?: string;
+  remote?: boolean;
+  multiple?: boolean;
+  allowCreate?: boolean;
+  valueKey?: string;
+  remoteMethod?: any;
+  size?: 'mini' | 'small' | 'medium';
+}>();
+
+const uiComponent = getConfig('components').select;
+
+const uiProps = computed(() => uiComponent.props(props));
+
+const emit = defineEmits(['change', 'update:modelValue', 'visibleHandler']);
+
+const changeHandler = (v: any) => {
+  emit('change', v);
+};
+
+const updateModelValue = (v: any) => {
+  emit('update:modelValue', v);
+};
+
+const visibleHandler = (v: any) => {
+  emit('visibleHandler', v);
+};
+
+const scrollbarWrap = ref<HTMLDivElement | undefined>();
+
+onMounted(() => {
+  scrollbarWrap.value = select.value?.scrollbar.wrap$;
+});
+
+defineExpose({
+  scrollbarWrap,
+
+  setQuery(v: string) {
+    if (!select.value) return;
+    select.value.query = v;
+  },
+
+  setPreviousQuery(v: string) {
+    if (!select.value) return;
+    select.value.previousQuery = v;
+  },
+
+  setSelectedLabel(v: string) {
+    if (!select.value) return;
+    select.value.selectedLabel = v;
+  },
+
+  setSelected() {
+    if (!select.value) return;
+    select.value.setSelected();
+  },
+});
+</script>
diff --git a/packages/design/src/Step.vue b/packages/design/src/Step.vue
new file mode 100644
index 00000000..cdff6e10
--- /dev/null
+++ b/packages/design/src/Step.vue
@@ -0,0 +1,26 @@
+<template>
+  <component :is="uiComponent.component" v-bind="uiProps" @click="clickHandler">
+    <slot></slot>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { getConfig } from './config';
+
+const props = defineProps<{
+  title?: string;
+  active?: number;
+}>();
+
+const emit = defineEmits(['click']);
+
+const clickHandler = (...args: any[]) => {
+  emit('click', ...args);
+};
+
+const uiComponent = getConfig('components').step;
+
+const uiProps = computed(() => uiComponent.props(props));
+</script>
diff --git a/packages/design/src/Steps.vue b/packages/design/src/Steps.vue
new file mode 100644
index 00000000..4c2e6b06
--- /dev/null
+++ b/packages/design/src/Steps.vue
@@ -0,0 +1,20 @@
+<template>
+  <component :is="uiComponent.component" v-bind="uiProps">
+    <slot></slot>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { getConfig } from './config';
+
+const props = defineProps<{
+  active?: number;
+  space?: number | string;
+}>();
+
+const uiComponent = getConfig('components').steps;
+
+const uiProps = computed(() => uiComponent.props(props));
+</script>
diff --git a/packages/design/src/Switch.vue b/packages/design/src/Switch.vue
new file mode 100644
index 00000000..987b4b53
--- /dev/null
+++ b/packages/design/src/Switch.vue
@@ -0,0 +1,36 @@
+<template>
+  <component :is="uiComponent.component" v-bind="uiProps" @update:modelValue="updateModelValue" @change="changeHandler">
+    <template #default>
+      <slot></slot>
+    </template>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { getConfig } from './config';
+
+const props = defineProps<{
+  modelValue?: string | number | boolean;
+  label?: any;
+  activeValue?: string | number | boolean;
+  inactiveValue?: string | number | boolean;
+  disabled?: boolean;
+  size?: 'mini' | 'small' | 'medium';
+}>();
+
+const uiComponent = getConfig('components').switch;
+
+const uiProps = computed(() => uiComponent.props(props));
+
+const emit = defineEmits(['change', 'update:modelValue']);
+
+const changeHandler = (v: any) => {
+  emit('change', v);
+};
+
+const updateModelValue = (v: any) => {
+  emit('update:modelValue', v);
+};
+</script>
diff --git a/packages/design/src/TabPane.vue b/packages/design/src/TabPane.vue
new file mode 100644
index 00000000..36dfbfe8
--- /dev/null
+++ b/packages/design/src/TabPane.vue
@@ -0,0 +1,22 @@
+<template>
+  <component :is="uiComponent.component" v-bind="uiProps">
+    <template #default>
+      <slot></slot>
+    </template>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { getConfig } from './config';
+
+const props = defineProps<{
+  name?: string;
+  label?: string;
+  lazy?: boolean;
+}>();
+const uiComponent = getConfig('components').tabPane;
+
+const uiProps = computed(() => uiComponent.props(props));
+</script>
diff --git a/packages/design/src/Table.vue b/packages/design/src/Table.vue
new file mode 100644
index 00000000..62c5617d
--- /dev/null
+++ b/packages/design/src/Table.vue
@@ -0,0 +1,57 @@
+<template>
+  <component
+    ref="table"
+    :is="uiComponent.component"
+    v-bind="uiProps"
+    @select="selectHandler"
+    @sort-change="sortChangeHandler"
+  >
+    <slot></slot>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { getConfig } from './config';
+
+const props = withDefaults(
+  defineProps<{
+    data?: any[];
+    border?: boolean;
+    maxHeight?: number | string;
+    defaultExpandAll?: boolean;
+  }>(),
+  {
+    data: () => [],
+  },
+);
+
+const uiComponent = getConfig('components').table;
+
+const uiProps = computed(() => uiComponent.props(props));
+
+const emit = defineEmits(['select', 'sort-change']);
+
+const table = ref<any>();
+
+const selectHandler = (...args: any[]) => {
+  emit('select', ...args);
+};
+
+const sortChangeHandler = (...args: any[]) => {
+  emit('sort-change', ...args);
+};
+
+defineExpose({
+  $el: table.value?.$el,
+
+  clearSelection(...args: any[]) {
+    table.value?.clearSelection(...args);
+  },
+
+  toggleRowSelection(...args: any[]) {
+    table.value?.toggleRowSelection(...args);
+  },
+});
+</script>
diff --git a/packages/design/src/TableColumn.vue b/packages/design/src/TableColumn.vue
new file mode 100644
index 00000000..6ba86b86
--- /dev/null
+++ b/packages/design/src/TableColumn.vue
@@ -0,0 +1,24 @@
+<template>
+  <component :is="uiComponent.component" v-bind="uiProps">
+    <template #default="{ $index, row }">
+      <slot :$index="$index" :row="row"></slot>
+    </template>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { getConfig } from './config';
+
+const props = defineProps<{
+  label?: string;
+  align?: string;
+  fixed?: string | boolean;
+  width?: string | number;
+}>();
+
+const uiComponent = getConfig('components').tableColumn;
+
+const uiProps = computed(() => uiComponent.props(props));
+</script>
diff --git a/packages/design/src/Tabs.vue b/packages/design/src/Tabs.vue
new file mode 100644
index 00000000..aaf77e61
--- /dev/null
+++ b/packages/design/src/Tabs.vue
@@ -0,0 +1,43 @@
+<template>
+  <component
+    :is="uiComponent.component"
+    v-bind="uiProps"
+    @tab-click="tabClickHandler"
+    @tab-add="onTabAdd"
+    @tab-remove="onTabRemove"
+  >
+    <template #default>
+      <slot></slot>
+    </template>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { getConfig } from './config';
+
+const props = defineProps<{
+  type?: string;
+  editable?: boolean;
+  tabPosition?: string;
+}>();
+
+const uiComponent = getConfig('components').tabs;
+
+const uiProps = computed(() => uiComponent.props(props));
+
+const emit = defineEmits(['tab-click', 'tab-add', 'tab-remove']);
+
+const tabClickHandler = (...args: any[]) => {
+  emit('tab-click', ...args);
+};
+
+const onTabAdd = (...args: any[]) => {
+  emit('tab-add', ...args);
+};
+
+const onTabRemove = (...args: any[]) => {
+  emit('tab-remove', ...args);
+};
+</script>
diff --git a/packages/design/src/TimePicker.vue b/packages/design/src/TimePicker.vue
new file mode 100644
index 00000000..140f11c7
--- /dev/null
+++ b/packages/design/src/TimePicker.vue
@@ -0,0 +1,31 @@
+<template>
+  <component :is="uiComponent.component" v-bind="uiProps" @change="changeHandler" @update:modelValue="updateModelValue">
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { getConfig } from './config';
+
+const props = defineProps<{
+  modelValue?: any;
+  disabled?: boolean;
+  placeholder?: string;
+  size?: 'mini' | 'small' | 'medium';
+}>();
+
+const uiComponent = getConfig('components').timePicker;
+
+const uiProps = computed(() => uiComponent.props(props));
+
+const emit = defineEmits(['change', 'update:modelValue']);
+
+const changeHandler = (v: any) => {
+  emit('change', v);
+};
+
+const updateModelValue = (v: any) => {
+  emit('update:modelValue', v);
+};
+</script>
diff --git a/packages/design/src/Tooltip.vue b/packages/design/src/Tooltip.vue
new file mode 100644
index 00000000..7fd70149
--- /dev/null
+++ b/packages/design/src/Tooltip.vue
@@ -0,0 +1,24 @@
+<template>
+  <component :is="uiComponent.component" v-bind="uiProps">
+    <template #content>
+      <slot name="content"></slot>
+    </template>
+    <slot></slot>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+
+import { getConfig } from './config';
+
+const props = defineProps<{
+  placement?: string;
+  disabled?: boolean;
+  content?: string;
+}>();
+
+const uiComponent = getConfig('components').tooltip;
+
+const uiProps = computed(() => uiComponent.props(props));
+</script>
diff --git a/packages/design/src/Upload.vue b/packages/design/src/Upload.vue
new file mode 100644
index 00000000..3a693a93
--- /dev/null
+++ b/packages/design/src/Upload.vue
@@ -0,0 +1,31 @@
+<template>
+  <component ref="upload" :is="uiComponent.component" v-bind="uiProps" @change="changeHandler"></component>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+import { getConfig } from './config';
+
+const props = defineProps<{
+  action?: string;
+  autoUpload?: boolean;
+}>();
+
+const emit = defineEmits(['change']);
+
+const changeHandler = (...args: any[]) => {
+  emit('change', ...args);
+};
+const uiComponent = getConfig('components').upload;
+
+const uiProps = computed(() => uiComponent.props(props));
+
+const upload = ref<any>();
+
+defineExpose({
+  clearFiles(...args: any[]) {
+    upload.value?.clearFiles(...args);
+  },
+});
+</script>
diff --git a/packages/design/src/config.ts b/packages/design/src/config.ts
new file mode 100644
index 00000000..e010a6e7
--- /dev/null
+++ b/packages/design/src/config.ts
@@ -0,0 +1,29 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { PluginOptions } from './type';
+
+let $MAGIC_DESIGN: PluginOptions = {};
+
+const setConfig = (options: PluginOptions): void => {
+  $MAGIC_DESIGN = options;
+};
+
+const getConfig = (key: keyof PluginOptions): any => $MAGIC_DESIGN[key];
+
+export { getConfig, setConfig };
diff --git a/packages/design/src/index.ts b/packages/design/src/index.ts
new file mode 100644
index 00000000..ce16a505
--- /dev/null
+++ b/packages/design/src/index.ts
@@ -0,0 +1,48 @@
+import { App } from 'vue';
+
+import { getConfig, setConfig } from './config';
+import { PluginOptions, TMagicMessage } from './type';
+
+export * from './type';
+
+/* eslint-disable @typescript-eslint/no-unused-vars */
+export { default as TMagicButton } from './Button.vue';
+export { default as TMagicCard } from './Card.vue';
+export { default as TMagicCascader } from './Cascader.vue';
+export { default as TMagicCheckbox } from './Checkbox.vue';
+export { default as TMagicCheckboxGroup } from './CheckboxGroup.vue';
+export { default as TMagicCol } from './Col.vue';
+export { default as TMagicColorPicker } from './ColorPicker.vue';
+export { default as TMagicDatePicker } from './DatePicker.vue';
+export { default as TMagicDialog } from './Dialog.vue';
+export { default as TMagicForm } from './Form.vue';
+export { default as TMagicFormItem } from './FormItem.vue';
+export { default as TMagicIcon } from './Icon.vue';
+export { default as TMagicInput } from './Input.vue';
+export { default as TMagicInputNumber } from './InputNumber.vue';
+export { default as TMagicOption } from './Option.vue';
+export { default as TMagicOptionGroup } from './OptionGroup.vue';
+export { default as TMagicPagination } from './Pagination.vue';
+export { default as TMagicRadio } from './Radio.vue';
+export { default as TMagicRadioGroup } from './RadioGroup.vue';
+export { default as TMagicRow } from './Row.vue';
+export { default as TMagicSelect } from './Select.vue';
+export { default as TMagicStep } from './Step.vue';
+export { default as TMagicSteps } from './Steps.vue';
+export { default as TMagicSwitch } from './Switch.vue';
+export { default as TMagicTable } from './Table.vue';
+export { default as TMagicTableColumn } from './TableColumn.vue';
+export { default as TMagicTabPane } from './TabPane.vue';
+export { default as TMagicTabs } from './Tabs.vue';
+export { default as TMagicTimePicker } from './TimePicker.vue';
+export { default as TMagicTooltip } from './Tooltip.vue';
+export { default as TMagicUpload } from './Upload.vue';
+
+export const tMagicMessage: TMagicMessage = getConfig('message') as TMagicMessage;
+
+export default {
+  install(app: App, options: PluginOptions) {
+    app.config.globalProperties.$MAGIC_FORM = options;
+    setConfig(options);
+  },
+};
diff --git a/packages/design/src/shims-vue.d.ts b/packages/design/src/shims-vue.d.ts
new file mode 100644
index 00000000..30030494
--- /dev/null
+++ b/packages/design/src/shims-vue.d.ts
@@ -0,0 +1,6 @@
+declare module '*.vue' {
+  import { DefineComponent } from 'vue';
+
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
diff --git a/packages/design/src/type.ts b/packages/design/src/type.ts
new file mode 100644
index 00000000..9e7df53a
--- /dev/null
+++ b/packages/design/src/type.ts
@@ -0,0 +1,20 @@
+export interface CascaderOption {
+  /** 指定选项的值为选项对象的某个属性值 */
+  value: any;
+  /** 指定选项标签为选项对象的某个属性值 */
+  label: string;
+  /** 指定选项的子选项为选项对象的某个属性值 */
+  children?: CascaderOption[];
+}
+
+export interface TMagicMessage {
+  success: (msg: string) => void;
+  warning: (msg: string) => void;
+  info: (msg: string) => void;
+  error: (msg: string) => void;
+}
+
+export interface PluginOptions {
+  message?: TMagicMessage;
+  components?: Record<string, any>;
+}
diff --git a/packages/design/tsconfig.build.json b/packages/design/tsconfig.build.json
new file mode 100644
index 00000000..c9476221
--- /dev/null
+++ b/packages/design/tsconfig.build.json
@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "declaration": true,
+    "declarationDir": "types",
+    "forceConsistentCasingInFileNames": true,
+    "paths": {},
+  },
+  "include": [
+		"src"
+	],
+}
diff --git a/packages/design/tsconfig.json b/packages/design/tsconfig.json
new file mode 100644
index 00000000..6c40cf1e
--- /dev/null
+++ b/packages/design/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": "../..",
+  },
+}
diff --git a/packages/design/vite.config.ts b/packages/design/vite.config.ts
new file mode 100644
index 00000000..c858b19d
--- /dev/null
+++ b/packages/design/vite.config.ts
@@ -0,0 +1,61 @@
+/*
+ * Tencent is pleased to support the open source community by making TMagicEditor available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+
+import pkg from './package.json';
+
+export default defineConfig({
+  plugins: [vue()],
+
+  optimizeDeps: {
+    esbuildOptions: {
+      define: {
+        global: 'globalThis',
+      },
+    },
+  },
+
+  build: {
+    cssCodeSplit: false,
+    sourcemap: true,
+    minify: false,
+    target: 'esnext',
+
+    lib: {
+      entry: 'src/index.ts',
+      name: 'TMagicDesign',
+      fileName: 'tmagic-design',
+    },
+
+    rollupOptions: {
+      // 确保外部化处理那些你不想打包进库的依赖
+      external(id: string) {
+        return Object.keys(pkg.dependencies).some((k) => new RegExp(`^${k}`).test(id));
+      },
+
+      output: {
+        // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
+        globals: {
+          vue: 'Vue',
+        },
+      },
+    },
+  },
+});