diff --git a/packages/varlet-cli/src/commands/create.ts b/packages/varlet-cli/src/commands/create.ts
index 4147550ded7..5d74f6802f1 100644
--- a/packages/varlet-cli/src/commands/create.ts
+++ b/packages/varlet-cli/src/commands/create.ts
@@ -40,11 +40,18 @@ export default ${bigCamelize(name)}
 
   const testsTemplate = `\
 import example from '../example'
-import { render } from '@testing-library/vue'
+import ${bigCamelize(name)} from '..'
+import { mount } from '@vue/test-utils'
+import { createApp } from 'vue'
+
+test('test ${camelize(name)} example', () => {
+  const wrapper = mount(example)
+  expect(wrapper.html()).toMatchSnapshot()
+})
 
-test('test ${camelize(name)} example', async () => {
-  const wrapper = render(example)
-  console.log(wrapper)
+test('test ${camelize(name)} plugin', () => {
+  const app = createApp({}).use(${bigCamelize(name)})
+  expect(app.component(${bigCamelize(name)}.name)).toBeTruthy()
 })
 `
 
diff --git a/packages/varlet-ui/src/button/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/button/__tests__/__snapshots__/index.spec.js.snap
index c4d406a6856..8f75ef5e655 100644
--- a/packages/varlet-ui/src/button/__tests__/__snapshots__/index.spec.js.snap
+++ b/packages/varlet-ui/src/button/__tests__/__snapshots__/index.spec.js.snap
@@ -154,9 +154,9 @@ exports[`test button example 1`] = `
 </button>"
 `;
 
-exports[`test button size & text & block & round 1`] = `
+exports[`test button styles 1`] = `
 "<button class=\\"var-button var--box var-button--large var--flex var-button--text-default var-button--text var-button--round\\" style=\\"width: 100%;\\">
   <!--v-if-->
-  <div class=\\"var-button__content\\"></div>
+  <div class=\\"var-button__content\\">button text</div>
 </button>"
 `;
diff --git a/packages/varlet-ui/src/button/__tests__/index.spec.js b/packages/varlet-ui/src/button/__tests__/index.spec.js
index e506ca9d911..3fba5ce72e8 100644
--- a/packages/varlet-ui/src/button/__tests__/index.spec.js
+++ b/packages/varlet-ui/src/button/__tests__/index.spec.js
@@ -14,7 +14,7 @@ test('test button plugin', () => {
   expect(app.component(Button.name)).toBeTruthy()
 })
 
-test('test button click & touchstart', () => {
+test('test button onClick & onTouchstart null callback', () => {
   const wrapper = mount(VarButton)
   wrapper.trigger('click')
   wrapper.trigger('touchstart')
@@ -82,7 +82,7 @@ test('test button color & textColor', () => {
   expect(wrapper.html()).toMatchSnapshot()
 })
 
-test('test button size & text & block & round', () => {
+test('test button styles', () => {
   const wrapper = mount(VarButton, {
     props: {
       size: 'large',
@@ -90,6 +90,9 @@ test('test button size & text & block & round', () => {
       text: true,
       block: true,
     },
+    slots: {
+      default: () => 'button text',
+    },
   })
 
   expect(wrapper.html()).toMatchSnapshot()
diff --git a/packages/varlet-ui/src/input/Input.vue b/packages/varlet-ui/src/input/Input.vue
index c97584e8e5a..5d339011d58 100644
--- a/packages/varlet-ui/src/input/Input.vue
+++ b/packages/varlet-ui/src/input/Input.vue
@@ -48,8 +48,11 @@
           @change="handleChange"
         />
         <label
-          class="var-input__placeholder"
-          :class="[computePlaceholderState(), !hint ? 'var-input--placeholder-non-hint' : null]"
+          :class="[
+            textarea ? 'var-input__textarea-placeholder' : 'var-input__placeholder',
+            computePlaceholderState(),
+            !hint ? 'var-input--placeholder-non-hint' : null,
+          ]"
           :for="id"
         >
           {{ placeholder }}
diff --git a/packages/varlet-ui/src/input/docs/en-US.md b/packages/varlet-ui/src/input/docs/en-US.md
index d360298f7ed..77bedbfd611 100644
--- a/packages/varlet-ui/src/input/docs/en-US.md
+++ b/packages/varlet-ui/src/input/docs/en-US.md
@@ -167,7 +167,6 @@ Other values are converted to text as a user prompt.
 | `@input-blur-color` | `#888` |
 | `@input-focus-color` | `@color-primary` |
 | `@input-placeholder-size` | `6px` |
-| `@input-placeholder-offset-top` | `4px` |
 | `@input-textarea-height` | `auto` |
 | `@input-textarea-padding-top` | `8px` |
 | `@input-icon-padding` | `@input-placeholder-size 0 0` |
diff --git a/packages/varlet-ui/src/input/docs/zh-CN.md b/packages/varlet-ui/src/input/docs/zh-CN.md
index 120ca260680..80e4f54d29e 100644
--- a/packages/varlet-ui/src/input/docs/zh-CN.md
+++ b/packages/varlet-ui/src/input/docs/zh-CN.md
@@ -166,7 +166,6 @@ createApp().use(Icon)
 | `@input-blur-color` | `#888` |
 | `@input-focus-color` | `@color-primary` |
 | `@input-placeholder-size` | `6px` |
-| `@input-placeholder-offset-top` | `4px` |
 | `@input-textarea-height` | `auto` |
 | `@input-textarea-padding-top` | `8px` |
 | `@input-icon-padding` | `@input-placeholder-size 0 0` |
diff --git a/packages/varlet-ui/src/input/input.less b/packages/varlet-ui/src/input/input.less
index 79acf7139fa..73cbb10bf23 100644
--- a/packages/varlet-ui/src/input/input.less
+++ b/packages/varlet-ui/src/input/input.less
@@ -5,7 +5,6 @@
 @input-blur-color: #888;
 @input-focus-color: @color-primary;
 @input-placeholder-size: 16px;
-@input-placeholder-offset-top: 4px;
 @input-textarea-height: auto;
 @input-textarea-padding-top: 8px;
 @input-icon-padding: @input-placeholder-size 0 0;
@@ -54,12 +53,23 @@
   }
 
   &__placeholder {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    transform-origin: left;
+    transition-property: top, transform;
+    transition-duration: 0.3s;
+    transform: translate(0, calc(-50% + @input-placeholder-size / 2)) scale(1);
+    font-size: @input-placeholder-size;
+  }
+
+  &__textarea-placeholder {
     position: absolute;
     top: 0;
     left: 0;
     transform-origin: left;
     transition: transform 0.3s;
-    transform: translate(0, @input-placeholder-offset-top + @input-placeholder-size) scale(1);
+    transform: translate(0, @input-textarea-padding-top + @input-placeholder-size) scale(1);
     font-size: @input-placeholder-size;
   }
 
@@ -106,7 +116,8 @@
   }
 
   &--placeholder-non-hint {
-    transform: translate(0, @input-placeholder-offset-top) scale(1);
+    top: 50%;
+    transform: translate(0, -50%) scale(1);
   }
 
   &--non-hint {
diff --git a/packages/varlet-ui/src/row/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/row/__tests__/__snapshots__/index.spec.js.snap
new file mode 100644
index 00000000000..bbd2a067aac
--- /dev/null
+++ b/packages/varlet-ui/src/row/__tests__/__snapshots__/index.spec.js.snap
@@ -0,0 +1,80 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test col in row 1`] = `
+"<div class=\\"var-row var--box\\" style=\\"justify-content: flex-start; align-items: flex-start;\\">
+  <div class=\\"var-col var--box var-col--span-8 var-col--offset-4\\" style=\\"padding-left: 0px; padding-right: 0px;\\"></div>
+  <div class=\\"var-col var--box var-col--span-12\\" style=\\"padding-left: 0px; padding-right: 0px;\\"></div>
+</div>"
+`;
+
+exports[`test col in row 2`] = `
+"<div class=\\"var-row var--box\\" style=\\"justify-content: flex-start; align-items: flex-start;\\">
+  <div class=\\"var-col var--box var-col--span-12\\" style=\\"padding-left: 0px; padding-right: 5px;\\"></div>
+  <div class=\\"var-col var--box var-col--span-12\\" style=\\"padding-left: 5px; padding-right: 0px;\\"></div>
+</div>"
+`;
+
+exports[`test row example 1`] = `
+"<div class=\\"app-type\\">栅格系统</div>
+<div class=\\"var-row var--box\\" style=\\"justify-content: flex-start; align-items: flex-start;\\">
+  <div class=\\"var-col var--box var-col--span-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">span: 8</div>
+  <div class=\\"var-col var--box var-col--span-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">span: 8</div>
+  <div class=\\"var-col var--box var-col--span-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">span: 8</div>
+  <div class=\\"var-col var--box var-col--span-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">span: 8</div>
+  <div class=\\"var-col var--box var-col--span-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">span: 8</div>
+  <div class=\\"var-col var--box var-col--span-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">span: 8</div>
+</div>
+<div class=\\"app-type\\">偏移</div>
+<div class=\\"var-row var--box\\" style=\\"justify-content: flex-start; align-items: flex-start;\\">
+  <div class=\\"var-col var--box var-col--span-16 var-col--offset-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">offset: 8 span: 16</div>
+  <div class=\\"var-col var--box var-col--span-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">span: 8</div>
+  <div class=\\"var-col var--box var-col--span-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">span: 8</div>
+  <div class=\\"var-col var--box var-col--span-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">span: 8</div>
+</div>
+<div class=\\"app-type\\">对齐</div>
+<div class=\\"var-row var--box\\" style=\\"justify-content: flex-start; align-items: flex-start;\\">
+  <div class=\\"var-col var--box var-col--span-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">span: 8</div>
+  <div class=\\"var-col var--box var-col--span-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">span: 8</div>
+</div>
+<div class=\\"var-row var--box\\" style=\\"justify-content: center; align-items: flex-start;\\">
+  <div class=\\"var-col var--box var-col--span-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">span: 8</div>
+  <div class=\\"var-col var--box var-col--span-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">span: 8</div>
+</div>
+<div class=\\"var-row var--box\\" style=\\"justify-content: flex-end; align-items: flex-start;\\">
+  <div class=\\"var-col var--box var-col--span-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">span: 8</div>
+  <div class=\\"var-col var--box var-col--span-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">span: 8</div>
+</div>
+<div class=\\"var-row var--box\\" style=\\"justify-content: space-around; align-items: flex-start;\\">
+  <div class=\\"var-col var--box var-col--span-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">span: 8</div>
+  <div class=\\"var-col var--box var-col--span-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">span: 8</div>
+</div>
+<div class=\\"var-row var--box\\" style=\\"justify-content: space-between; align-items: flex-start;\\">
+  <div class=\\"var-col var--box var-col--span-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">span: 8</div>
+  <div class=\\"var-col var--box var-col--span-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">span: 8</div>
+</div>
+<div class=\\"app-type\\">列间距</div>
+<div class=\\"var-row var--box\\" style=\\"justify-content: flex-start; align-items: flex-start;\\">
+  <div class=\\"var-col var--box var-col--span-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">span: 8</div>
+  <div class=\\"var-col var--box var-col--span-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">span: 8</div>
+  <div class=\\"var-col var--box var-col--span-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">span: 8</div>
+  <div class=\\"var-col var--box var-col--span-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">span: 8</div>
+  <div class=\\"var-col var--box var-col--span-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">span: 8</div>
+  <div class=\\"var-col var--box var-col--span-8 col\\" style=\\"padding-left: 0px; padding-right: 0px;\\">span: 8</div>
+</div>"
+`;
+
+exports[`test row flex 1`] = `"<div class=\\"var-row var--box\\" style=\\"justify-content: flex-start; align-items: flex-start;\\"></div>"`;
+
+exports[`test row flex 2`] = `"<div class=\\"var-row var--box\\" style=\\"justify-content: flex-end; align-items: flex-start;\\"></div>"`;
+
+exports[`test row flex 3`] = `"<div class=\\"var-row var--box\\" style=\\"justify-content: center; align-items: flex-start;\\"></div>"`;
+
+exports[`test row flex 4`] = `"<div class=\\"var-row var--box\\" style=\\"justify-content: space-between; align-items: flex-start;\\"></div>"`;
+
+exports[`test row flex 5`] = `"<div class=\\"var-row var--box\\" style=\\"justify-content: space-around; align-items: flex-start;\\"></div>"`;
+
+exports[`test row flex 6`] = `"<div class=\\"var-row var--box\\" style=\\"justify-content: space-around; align-items: flex-start;\\"></div>"`;
+
+exports[`test row flex 7`] = `"<div class=\\"var-row var--box\\" style=\\"justify-content: space-around; align-items: center;\\"></div>"`;
+
+exports[`test row flex 8`] = `"<div class=\\"var-row var--box\\" style=\\"justify-content: space-around; align-items: flex-end;\\"></div>"`;
diff --git a/packages/varlet-ui/src/row/__tests__/index.spec.js b/packages/varlet-ui/src/row/__tests__/index.spec.js
new file mode 100644
index 00000000000..2a6bb465b8f
--- /dev/null
+++ b/packages/varlet-ui/src/row/__tests__/index.spec.js
@@ -0,0 +1,92 @@
+import example from '../example'
+import Row from '..'
+import VarRow from '../Row'
+import Col from '../../col'
+import VarCol from '../../col/Col'
+import { mount } from '@vue/test-utils'
+import { createApp, h } from 'vue'
+
+test('test row example', () => {
+  const wrapper = mount(example)
+  expect(wrapper.html()).toMatchSnapshot()
+})
+
+test('test row plugin', () => {
+  const app = createApp({}).use(Row)
+  expect(app.component(Row.name)).toBeTruthy()
+})
+
+test('test col plugin', () => {
+  const app = createApp({}).use(Col)
+  expect(app.component(Col.name)).toBeTruthy()
+})
+
+test('test row flex', async () => {
+  const wrapper = mount(VarRow)
+
+  await wrapper.setProps({ justify: 'flex-start' })
+  expect(wrapper.html()).toMatchSnapshot()
+
+  await wrapper.setProps({ justify: 'flex-end' })
+  expect(wrapper.html()).toMatchSnapshot()
+
+  await wrapper.setProps({ justify: 'center' })
+  expect(wrapper.html()).toMatchSnapshot()
+
+  await wrapper.setProps({ justify: 'space-between' })
+  expect(wrapper.html()).toMatchSnapshot()
+
+  await wrapper.setProps({ justify: 'space-around' })
+  expect(wrapper.html()).toMatchSnapshot()
+
+  await wrapper.setProps({ align: 'flex-start' })
+  expect(wrapper.html()).toMatchSnapshot()
+
+  await wrapper.setProps({ align: 'center' })
+  expect(wrapper.html()).toMatchSnapshot()
+
+  await wrapper.setProps({ align: 'flex-end' })
+  expect(wrapper.html()).toMatchSnapshot()
+})
+
+test('test row onClick null callback', () => {
+  const wrapper = mount(VarRow)
+  wrapper.trigger('click')
+})
+
+test('test row onClick', () => {
+  const onClick = jest.fn()
+
+  const wrapper = mount(VarRow, {
+    props: {
+      onClick,
+    },
+  })
+  wrapper.trigger('click')
+  expect(onClick).toHaveBeenCalledTimes(1)
+})
+
+test('test col in row', async () => {
+  const wrapper = mount({
+    data: () => ({
+      span: 8,
+      offset: 4,
+    }),
+    render() {
+      return h(
+        VarRow,
+        {
+          gutter: '10px',
+        },
+        () => [h(VarCol, { span: this.span, offset: this.offset }), h(VarCol, { span: 12 })]
+      )
+    },
+  })
+  expect(wrapper.html()).toMatchSnapshot()
+
+  await wrapper.setData({
+    span: 12,
+    offset: 0,
+  })
+  expect(wrapper.html()).toMatchSnapshot()
+})
diff --git a/packages/varlet-ui/src/select/docs/en-US.md b/packages/varlet-ui/src/select/docs/en-US.md
index c67617e7b2b..ab35a3b1ea1 100644
--- a/packages/varlet-ui/src/select/docs/en-US.md
+++ b/packages/varlet-ui/src/select/docs/en-US.md
@@ -279,7 +279,6 @@ export default {
 | `@select-scroller-padding` | `6px 0` |
 | `@select-scroller-max-height` | `278px` |
 | `@select-placeholder-size` | `16px` |
-| `@select-placeholder-offset-top` | `4px` |
 | `@select-icon-padding` | `@select-placeholder-size 0 0` |
 | `@select-icon-size` | `20px` |
 | `@select-select-text-color` | `#555` |
diff --git a/packages/varlet-ui/src/select/docs/zh-CN.md b/packages/varlet-ui/src/select/docs/zh-CN.md
index 9c84b9afcae..d5f9d8f9d39 100644
--- a/packages/varlet-ui/src/select/docs/zh-CN.md
+++ b/packages/varlet-ui/src/select/docs/zh-CN.md
@@ -277,7 +277,6 @@ export default {
 | `@select-scroller-padding` | `6px 0` |
 | `@select-scroller-max-height` | `278px` |
 | `@select-placeholder-size` | `16px` |
-| `@select-placeholder-offset-top` | `4px` |
 | `@select-icon-padding` | `@select-placeholder-size 0 0` |
 | `@select-icon-size` | `20px` |
 | `@select-select-text-color` | `#555` |
diff --git a/packages/varlet-ui/src/select/select.less b/packages/varlet-ui/src/select/select.less
index 7746d5d6d39..c6c4dc9e16a 100644
--- a/packages/varlet-ui/src/select/select.less
+++ b/packages/varlet-ui/src/select/select.less
@@ -9,7 +9,6 @@
 @select-scroller-padding: 6px 0;
 @select-scroller-max-height: 278px;
 @select-placeholder-size: 16px;
-@select-placeholder-offset-top: 4px;
 @select-icon-padding: @select-placeholder-size 0 0;
 @select-icon-size: 20px;
 @select-select-text-color: #555;
@@ -74,11 +73,12 @@
 
   &__placeholder {
     position: absolute;
-    top: 0;
+    top: 50%;
     left: 0;
     transform-origin: left;
-    transition: transform 0.3s;
-    transform: translate(0, @select-placeholder-offset-top + @select-placeholder-size) scale(1);
+    transition-property: top, transform;
+    transition-duration: 0.3s;
+    transform: translate(0, calc(-50% + @select-placeholder-size / 2)) scale(1);
     font-size: @select-placeholder-size;
   }
 
@@ -122,7 +122,8 @@
   }
 
   &--placeholder-non-hint {
-    transform: translate(0, @select-placeholder-offset-top) scale(1);
+    top: 50%;
+    transform: translate(0, -50%) scale(1);
   }
 
   &--non-hint {
diff --git a/packages/varlet-ui/src/skeleton/__tests__/__snapshots__/index.spec.js.snap b/packages/varlet-ui/src/skeleton/__tests__/__snapshots__/index.spec.js.snap
new file mode 100644
index 00000000000..44720e0e9f5
--- /dev/null
+++ b/packages/varlet-ui/src/skeleton/__tests__/__snapshots__/index.spec.js.snap
@@ -0,0 +1,170 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`test skeleton example 1`] = `
+"<div class=\\"app-type\\">基本使用</div>
+<div class=\\"var--box var-skeleton\\">
+  <!--v-if-->
+  <div class=\\"var-skeleton__content\\">
+    <!--v-if-->
+    <div class=\\"var-skeleton__article\\">
+      <!--v-if-->
+      <div class=\\"var-skeleton__section\\">
+        <!--v-if-->
+        <div class=\\"var-skeleton__row\\">
+          <div class=\\"var-skeleton--animation\\"></div>
+        </div>
+        <div class=\\"var-skeleton__row\\">
+          <div class=\\"var-skeleton--animation\\"></div>
+        </div>
+        <div class=\\"var-skeleton__row\\">
+          <div class=\\"var-skeleton--animation\\"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>
+<div class=\\"app-type\\">显示标题</div>
+<div class=\\"var--box var-skeleton\\">
+  <!--v-if-->
+  <div class=\\"var-skeleton__content\\">
+    <!--v-if-->
+    <div class=\\"var-skeleton__article\\">
+      <!--v-if-->
+      <div class=\\"var-skeleton__section\\">
+        <div class=\\"var-skeleton__title\\">
+          <div class=\\"var-skeleton--animation\\"></div>
+        </div>
+        <div class=\\"var-skeleton__row\\">
+          <div class=\\"var-skeleton--animation\\"></div>
+        </div>
+        <div class=\\"var-skeleton__row\\">
+          <div class=\\"var-skeleton--animation\\"></div>
+        </div>
+        <div class=\\"var-skeleton__row\\">
+          <div class=\\"var-skeleton--animation\\"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>
+<div class=\\"app-type\\">自定义段落高度</div>
+<div class=\\"var--box var-skeleton\\">
+  <!--v-if-->
+  <div class=\\"var-skeleton__content\\">
+    <!--v-if-->
+    <div class=\\"var-skeleton__article\\">
+      <!--v-if-->
+      <div class=\\"var-skeleton__section\\">
+        <div class=\\"var-skeleton__title\\">
+          <div class=\\"var-skeleton--animation\\"></div>
+        </div>
+        <div class=\\"var-skeleton__row\\" style=\\"width: 200px;\\">
+          <div class=\\"var-skeleton--animation\\"></div>
+        </div>
+        <div class=\\"var-skeleton__row\\" style=\\"width: 100px;\\">
+          <div class=\\"var-skeleton--animation\\"></div>
+        </div>
+        <div class=\\"var-skeleton__row\\" style=\\"width: 50px;\\">
+          <div class=\\"var-skeleton--animation\\"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>
+<div class=\\"app-type\\">显示头像</div>
+<div class=\\"var--box var-skeleton\\">
+  <!--v-if-->
+  <div class=\\"var-skeleton__content\\">
+    <!--v-if-->
+    <div class=\\"var-skeleton__article\\">
+      <div class=\\"var-skeleton__avatar\\">
+        <div class=\\"var-skeleton--animation\\"></div>
+      </div>
+      <div class=\\"var-skeleton__section\\">
+        <div class=\\"var-skeleton__title\\">
+          <div class=\\"var-skeleton--animation\\"></div>
+        </div>
+        <div class=\\"var-skeleton__row\\">
+          <div class=\\"var-skeleton--animation\\"></div>
+        </div>
+        <div class=\\"var-skeleton__row\\">
+          <div class=\\"var-skeleton--animation\\"></div>
+        </div>
+        <div class=\\"var-skeleton__row\\">
+          <div class=\\"var-skeleton--animation\\"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>
+<div class=\\"app-type\\">显示卡片</div>
+<div class=\\"var--box var-skeleton\\">
+  <!--v-if-->
+  <div class=\\"var-skeleton__content\\">
+    <div class=\\"var-skeleton__card\\">
+      <div class=\\"var-skeleton--animation\\"></div>
+    </div>
+    <div class=\\"var-skeleton__article\\">
+      <div class=\\"var-skeleton__avatar\\">
+        <div class=\\"var-skeleton--animation\\"></div>
+      </div>
+      <div class=\\"var-skeleton__section\\">
+        <div class=\\"var-skeleton__title\\">
+          <div class=\\"var-skeleton--animation\\"></div>
+        </div>
+        <div class=\\"var-skeleton__row\\">
+          <div class=\\"var-skeleton--animation\\"></div>
+        </div>
+        <div class=\\"var-skeleton__row\\">
+          <div class=\\"var-skeleton--animation\\"></div>
+        </div>
+        <div class=\\"var-skeleton__row\\">
+          <div class=\\"var-skeleton--animation\\"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>
+<div class=\\"app-type\\">全屏模式</div><button class=\\"var-button var--box var-button--normal var--inline-flex var-button--danger var-elevation--1 button\\">
+  <!--v-if-->
+  <div class=\\"var-button__content\\">切换全屏模式</div>
+</button>
+<div class=\\"var--box var-skeleton\\">
+  <div class=\\"var-skeleton__data\\"></div>
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;
+
+exports[`test skeleton styles 1`] = `
+"<div class=\\"var--box var-skeleton\\">
+  <!--v-if-->
+  <div class=\\"var-skeleton__content\\">
+    <div class=\\"var-skeleton__card\\" style=\\"height: 100px;\\">
+      <div class=\\"var-skeleton--animation\\"></div>
+    </div>
+    <div class=\\"var-skeleton__article\\">
+      <div class=\\"var-skeleton__avatar\\" style=\\"width: 100px; height: 100px;\\">
+        <div class=\\"var-skeleton--animation\\"></div>
+      </div>
+      <div class=\\"var-skeleton__section\\">
+        <div class=\\"var-skeleton__title\\" style=\\"width: 100px;\\">
+          <div class=\\"var-skeleton--animation\\"></div>
+        </div>
+        <div class=\\"var-skeleton__row\\" style=\\"width: 600px;\\">
+          <div class=\\"var-skeleton--animation\\"></div>
+        </div>
+        <div class=\\"var-skeleton__row\\" style=\\"width: 500px;\\">
+          <div class=\\"var-skeleton--animation\\"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!--v-if-->
+</div>"
+`;
diff --git a/packages/varlet-ui/src/skeleton/__tests__/index.spec.js b/packages/varlet-ui/src/skeleton/__tests__/index.spec.js
new file mode 100644
index 00000000000..4b41ccdd988
--- /dev/null
+++ b/packages/varlet-ui/src/skeleton/__tests__/index.spec.js
@@ -0,0 +1,48 @@
+import example from '../example'
+import Skeleton from '..'
+import VarSkeleton from '../Skeleton'
+import { mount } from '@vue/test-utils'
+import { createApp, h } from 'vue'
+
+test('test skeleton example', () => {
+  const wrapper = mount(example)
+  expect(wrapper.html()).toMatchSnapshot()
+})
+
+test('test skeleton plugin', () => {
+  const app = createApp({}).use(Skeleton)
+  expect(app.component(Skeleton.name)).toBeTruthy()
+})
+
+test('test skeleton loading', async () => {
+  const wrapper = mount(VarSkeleton, {
+    props: {
+      loading: true,
+    },
+    slots: {
+      default: () => h('div', { class: 'skeleton-default-slot' }),
+    },
+  })
+
+  expect(wrapper.find('.skeleton-default-slot').exists()).toBeFalsy()
+
+  await wrapper.setProps({ loading: false })
+  expect(wrapper.find('.skeleton-default-slot').exists()).toBeTruthy()
+})
+
+test('test skeleton styles', () => {
+  const wrapper = mount(VarSkeleton, {
+    props: {
+      title: true,
+      card: true,
+      avatar: true,
+      titleWidth: '100px',
+      cardHeight: '100px',
+      avatarSize: '100px',
+      rows: 2,
+      rowsWidth: ['600px', '500px'],
+    },
+  })
+
+  expect(wrapper.html()).toMatchSnapshot()
+})