diff --git a/docs/docs/zh-CN/components/cards.md b/docs/docs/zh-CN/components/cards.md
new file mode 100644
index 00000000..e0e781b8
--- /dev/null
+++ b/docs/docs/zh-CN/components/cards.md
@@ -0,0 +1,26 @@
+::: demo
+
+<template>
+  <lay-card>
+      <template v-slot:header>
+      标题
+      </template>
+      <template v-slot:body>
+      内容
+      </template>
+  </lay-card>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
\ No newline at end of file
diff --git a/docs/src/layouts/Layout.vue b/docs/src/layouts/Layout.vue
index 1a5c1c1b..352b05d3 100644
--- a/docs/src/layouts/Layout.vue
+++ b/docs/src/layouts/Layout.vue
@@ -11,6 +11,7 @@
         <li><router-link to="/zh-CN/components/button">按钮</router-link></li>
         <li><router-link to="/zh-CN/components/icon">图标</router-link></li>
         <li><router-link to="/zh-CN/components/panel">面板</router-link></li>
+        <li><router-link to="/zh-CN/components/card">卡片</router-link></li>
       </ul>
     </lay-side>
     <lay-body>
diff --git a/docs/src/router/index.ts b/docs/src/router/index.ts
index 6074573e..39f14883 100644
--- a/docs/src/router/index.ts
+++ b/docs/src/router/index.ts
@@ -5,9 +5,8 @@ import {
   Router,
 } from 'vue-router'
 import zhCN from './zh-CN'
-import type { IRouteRecordRaw } from '/@src/index'
 
-const routes: IRouteRecordRaw[] = [...zhCN]
+const routes = [...zhCN]
 
 export function createRouter(): Router {
   const baseUrl = import.meta.env.BASE_URL
diff --git a/docs/src/router/zh-CN.ts b/docs/src/router/zh-CN.ts
index 98980502..7082c0be 100644
--- a/docs/src/router/zh-CN.ts
+++ b/docs/src/router/zh-CN.ts
@@ -32,6 +32,10 @@ const zhCN = [
         path: '/zh-CN/components/panel',
         component: () => import('../../docs/zh-CN/components/panel.md'),
         meta: { title: '面板' },
+      },{
+        path: '/zh-CN/components/card',
+        component: () => import('../../docs/zh-CN/components/cards.md'),
+        meta: { title: '卡片' },
       }
     ],
   },
diff --git a/src/index.ts b/src/index.ts
index cdabdeb3..94916406 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -5,6 +5,7 @@ import "./css/layui.css";
 import LayRadio from './module/radio/index'
 import LayButton from './module/button/index'
 import LayIcon from './module/icon/index'
+import LayCard from './module/card/index'
 import LayLayout from "./module/layout/index"
 import LaySide from "./module/side/index"
 import LayBody from "./module/body/index"
@@ -23,7 +24,8 @@ const components: Record<string, IDefineComponent> = {
   LayBody,
   LayFooter,
   LayLogo,
-  LayPanel
+  LayPanel,
+  LayCard
 }
 
 const install = (app: App, options?: InstallOptions): void => {
@@ -47,6 +49,7 @@ export {
   LayFooter,
   LayLogo,
   LayPanel, 
+  LayCard,
   install,
 }
 
diff --git a/src/module/card/index.ts b/src/module/card/index.ts
new file mode 100644
index 00000000..8fb98500
--- /dev/null
+++ b/src/module/card/index.ts
@@ -0,0 +1,9 @@
+import type { App } from 'vue'
+import Component from './index.vue'
+import type { IDefineComponent } from '../type/index'
+
+Component.install = (app: App) => {
+  app.component(Component.name || 'LayCard ', Component)
+}
+
+export default Component as IDefineComponent
\ No newline at end of file
diff --git a/src/module/card/index.vue b/src/module/card/index.vue
new file mode 100644
index 00000000..29c18ec3
--- /dev/null
+++ b/src/module/card/index.vue
@@ -0,0 +1,14 @@
+<template>
+  <div class="layui-card">
+    <div class="layui-card-header">
+        <slot name="header"></slot>
+    </div>
+    <div class="layui-card-body">
+      <slot name="body"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup name="LayCard" lang="ts">
+
+</script>
diff --git a/src/module/icon/index.ts b/src/module/icon/index.ts
index b52d60e1..84c0ff55 100644
--- a/src/module/icon/index.ts
+++ b/src/module/icon/index.ts
@@ -1,6 +1,6 @@
 import type { App } from 'vue'
 import Component from './index.vue'
-import type { IDefineComponent } from '../../type/index'
+import type { IDefineComponent } from '../type/index'
 
 Component.install = (app: App) => {
   app.component(Component.name || 'LayIcon', Component)
diff --git a/src/module/panel/index.ts b/src/module/panel/index.ts
index 388106e5..6f27d4f3 100644
--- a/src/module/panel/index.ts
+++ b/src/module/panel/index.ts
@@ -3,7 +3,7 @@ import Component from './index.vue'
 import type { IDefineComponent } from '../type/index'
 
 Component.install = (app: App) => {
-    app.component(Component.name || 'LayLogo', Component)
+    app.component(Component.name || 'LayPanel', Component)
 }
 
 export default Component as IDefineComponent