diff --git a/packages/devui-vue/devui/tag/__tests__/tag.spec.ts b/packages/devui-vue/devui/tag/__tests__/tag.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9db389e4d2fa8c9e9040fc451832c6ddb99a3f26
--- /dev/null
+++ b/packages/devui-vue/devui/tag/__tests__/tag.spec.ts
@@ -0,0 +1,8 @@
+import { mount } from '@vue/test-utils'
+import { Tag } from '../index'
+
+describe('tag test', () => {
+  it('tag init render', async () => {
+    // todo
+  })
+})
diff --git a/packages/devui-vue/devui/tag/index.ts b/packages/devui-vue/devui/tag/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..43310285f5c37a45fdbee30011f4ca0b4bb64b92
--- /dev/null
+++ b/packages/devui-vue/devui/tag/index.ts
@@ -0,0 +1,17 @@
+import type { App } from 'vue'
+import Tag from './src/tag'
+
+Tag.install = function (app: App): void {
+  app.component(Tag.name, Tag)
+}
+
+export { Tag }
+
+export default {
+  title: 'Tag 标签',
+  category: '数据展示',
+  status: '20%', // TODO: 组件若开发完成则填入"已完成"，并删除该注释
+  install(app: App): void {
+    app.use(Tag as any)
+  }
+}
diff --git a/packages/devui-vue/devui/tag/src/hooks/index.ts b/packages/devui-vue/devui/tag/src/hooks/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8931ccc412a0f807e375da1330bdb8b66af15299
--- /dev/null
+++ b/packages/devui-vue/devui/tag/src/hooks/index.ts
@@ -0,0 +1,3 @@
+import useStyle from './useStyle'
+
+export { useStyle }
diff --git a/packages/devui-vue/devui/tag/src/hooks/useStyle.ts b/packages/devui-vue/devui/tag/src/hooks/useStyle.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2dbb29d72cc7711ee2481484387b90a5ae9d0a01
--- /dev/null
+++ b/packages/devui-vue/devui/tag/src/hooks/useStyle.ts
@@ -0,0 +1,10 @@
+import { computed } from 'vue'
+import { tagProps, TagProps } from '../tag-types'
+
+export default function (props: TagProps) {
+  return computed(() => {
+    const { type } = props
+
+    return `devui-tag devui-tag-${type || 'default'}`
+  })
+}
diff --git a/packages/devui-vue/devui/tag/src/tag-types.ts b/packages/devui-vue/devui/tag/src/tag-types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..f8fd95a57f4f119dcc6f936a55362e4121b9a462
--- /dev/null
+++ b/packages/devui-vue/devui/tag/src/tag-types.ts
@@ -0,0 +1,16 @@
+import type { PropType, ExtractPropTypes } from 'vue'
+
+export type tagType = 'primary' | 'success' | 'warning' | 'danger'
+
+export const tagProps = {
+  type: {
+    type: String as PropType<tagType>,
+    default: ''
+  },
+  color: {
+    type: String as PropType<string>,
+    default: ''
+  }
+} as const
+
+export type TagProps = ExtractPropTypes<typeof tagProps>
diff --git a/packages/devui-vue/devui/tag/src/tag.scss b/packages/devui-vue/devui/tag/src/tag.scss
new file mode 100644
index 0000000000000000000000000000000000000000..bd3e3c7a3f55afe0603b34768a4b44812f59ded4
--- /dev/null
+++ b/packages/devui-vue/devui/tag/src/tag.scss
@@ -0,0 +1,56 @@
+@import '@devui/styles-var/devui-var';
+
+$devui-tag-normal-config: (
+  default: (
+    border: 0,
+    color: $devui-text,
+    background-color: $devui-default-bg
+  ),
+  primary: (
+    color: $devui-primary,
+    background-color: $devui-primary-bg,
+    border-color: $devui-primary-line
+  ),
+  success: (
+    color: $devui-success,
+    background-color: $devui-success-bg,
+    border-color: $devui-success-line
+  ),
+  warning: (
+    color: $devui-warning,
+    background-color: $devui-warning-bg,
+    border-color: $devui-warning-line
+  ),
+  danger: (
+    color: $devui-danger,
+    background-color: $devui-danger-bg,
+    border-color: $devui-danger-line
+  )
+);
+
+.devui-tag {
+  display: inline-block;
+  margin: 4px;
+
+  .devui-tag {
+    padding: 0 8px;
+    min-height: 20px;
+    font-size: 12px;
+    font-size: var(--devui-font-size, 12px);
+    line-height: 20px;
+    border: 1px solid;
+    border-radius: $devui-border-radius;
+    display: block;
+    align-items: center;
+    position: relative;
+    cursor: default;
+
+    @each $type in default, primary, success, warning, danger {
+      &.devui-tag-#{$type} {
+        @each $key, $value in map-get($devui-tag-normal-config, $type) {
+          #{$key}: $value;
+        }
+      }
+    }
+  }
+}
diff --git a/packages/devui-vue/devui/tag/src/tag.tsx b/packages/devui-vue/devui/tag/src/tag.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..a04ac737d1eb5f53d3084b739b3f55ef58f28d6b
--- /dev/null
+++ b/packages/devui-vue/devui/tag/src/tag.tsx
@@ -0,0 +1,23 @@
+import { defineComponent, ref, toRefs, computed } from 'vue'
+import { tagProps, TagProps } from './tag-types'
+import { useStyle } from './hooks'
+import './tag.scss'
+// 类型声明
+
+export default defineComponent({
+  name: 'DTag',
+  props: tagProps,
+  emits: [],
+  setup(props: TagProps, { slots }) {
+    //获取type对应样式
+    const tagClass = useStyle(props)
+
+    return () => (
+      <div class="devui-tag">
+        <span class={tagClass.value} style="display: block;">
+          {slots.default?.()}
+        </span>
+      </div>
+    )
+  }
+})
diff --git a/packages/devui-vue/docs/components/tag/index.md b/packages/devui-vue/docs/components/tag/index.md
new file mode 100644
index 0000000000000000000000000000000000000000..c96b6238269cb9840a566900ab74031101aada47
--- /dev/null
+++ b/packages/devui-vue/docs/components/tag/index.md
@@ -0,0 +1,53 @@
+# Tag 标签
+
+标签展示组件。
+
+## 何时使用
+
+用户需要展示多个标签时。
+
+## 基本用法
+
+:::demo 由`type`属性来选择 tag 的类型，也可以通过`color`属性来自定义背景色
+
+```vue
+<template>
+  <d-tag>标签一</d-tag>
+  <d-tag type="primary">标签二</d-tag>
+  <d-tag type="success">标签三</d-tag>
+  <d-tag type="warning">标签四</d-tag>
+  <d-tag type="danger">标签五</d-tag>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  setup() {
+    return {
+      msg: 'Tag 标签 组件文档示例'
+    }
+  }
+})
+</script>
+
+<style></style>
+```
+
+:::
+
+## API
+
+### Props
+
+| 参数  |   类型   | 默认值  |        说明        |              可选值              |    跳转至 Demo    |
+| :---: | :------: | :-----: | :----------------: | :------------------------------: | :---------------: |
+| type  | `string` | defalut |  可选，标签的类型  | `success\|info\|warning\|danger` | [示例](#基本用法) |
+| color | `string` |   ''    | 可选，标签的主题色 |                                  |                   |
+
+### Event
+
+| 名称          | 说明                              |
+| :------------ | --------------------------------- |
+| tagDelete     | 删除 tag 的时候触发的事件         |
+| checkedChange | tag 的 check 状态改变时触发的事件 |