diff --git a/.gitignore b/.gitignore
index cb0da3d6e8958e846850ff66ae5dab6335175d80..c65d1ad6f293b843f028ae10ab549934a8d970d4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,3 +21,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+
+.history
diff --git a/index.html b/index.html
index 795e4fbadb8831b5265039102fa28dd7e1c6a6a0..a5f2f19c0e72ae55bab322d11a43b6e5f8fce121 100644
--- a/index.html
+++ b/index.html
@@ -1,13 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + Vue</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
-  </body>
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>BG-UI Demos</title>
+</head>
+
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.js"></script>
+</body>
+
 </html>
diff --git a/src/App.vue b/src/App.vue
index 1b9f73bc1e09ddc1f5c84bc407a9ffebf0044595..8d2516966dbaa1c1ca9133838d51060737855da8 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,23 @@
 <script setup>
-import { reactive } from "vue"
+import { reactive, toRefs, onMounted } from "vue"
+import cw from './components/componentWrapper.vue'
+
+onMounted(() => {
+  const nav = document.querySelector('.nav')
+  const container = document.querySelector('.container')
+  const navHeight = nav.offsetHeight
+  container.style.marginTop = navHeight + 'px'
+
+  nav.addEventListener('click', (e) => {
+    const el = e.target
+    if (el.tagName === 'LI') {
+      const topDistance = document.querySelector(el.getAttribute('data-id')).offsetTop - navHeight
+      window.scrollTo(0, topDistance)
+    }
+  })
+})
+
+
 // bg-btns
 const btns = reactive({
   options: [{ name: 'hello', value: 'hello' }, { name: 'world', value: 'world' }],
@@ -8,25 +26,210 @@ const btns = reactive({
 
 // bg-card
 const card = reactive({
-  title: 'haha',
+  title: 'title',
   icon: "#bg-ic-c-s-half-star"
 })
 
-//
+// bg-detail-table
+const detailTable = reactive({
+  data: [{
+    title: "id",
+    url: 'http://127.0.0.1'
+  }],
+  layout: {
+    line_num: 4
+  }
+})
+
+const info = reactive({
+  // data in template would couse volar error:
+  // [Error - 14:18:50] Request textDocument/formatting failed.
+  // Message: Request textDocument/formatting failed with message: Overlapping edit
+  // Code: -32603
+  //
+  data: [{
+    full: false,
+    nameWidth: 120,
+    name: 'Name',
+    copy: undefined,
+    download: undefined,
+    password: undefined,
+    value: 'value!!!',
+    url: 'a url',
+    show: true
+  }, {
+    full: true,
+    nameWidth: undefined,
+    name: 'Name2 with full width',
+    copy: true,
+    download: undefined,
+    password: undefined,
+    value: 'value2!!!',
+    url: 'a url',
+    show: true
+  }]
+})
+
+const { options: btnsOption, currentValue: btnsCurrentValue } = toRefs(btns)
+const { title: cardTitle, icon: cardIcon } = toRefs(card)
+
+
 </script>
 
 <template>
-  <bg-btns :options="btns.options" v-model="btns.currentValue"></bg-btns>
-
-  <bg-card :title="card.title" :icon="card.icon">
-    <!-- slot自定义card内容体 -->
-    <div>
-      <div>haha</div>
-      <p>adsadsa</p>
-    </div>
-  </bg-card>
+  <ul class="nav">
+    <li data-id="#bg-btns">bg-btns</li>
+    <li data-id="#bg-card">bg-card</li>
+    <li data-id="#bg-code-editor">bg-code-editor</li>
+    <li data-id="#bg-detail-table">bg-detail-table</li>
+    <li data-id="#bg-detail-table2">bg-detail-table2</li>
+    <li data-id="#bg-detail">bg-detail</li>
+    <li data-id="#bg-filter-date">bg-filter-date</li>
+    <li data-id="#bg-filter-group">bg-filter-group</li>
+    <li data-id="#bg-filter">bg-filter</li>
+    <li data-id="#bg-filtrate">bg-filtrate</li>
+    <li data-id="#bg-icon">bg-icon</li>
+    <li data-id="#bg-info">bg-info</li>
+    <li data-id="#bg-inner-tabs">bg-inner-tabs</li>
+    <li data-id="#bg-layout-card">bg-layout-card</li>
+    <li data-id="#bg-list">bg-list</li>
+    <li data-id="#bg-nav-list">bg-nav-list</li>
+    <li data-id="#bg-nav">bg-nav</li>
+    <li data-id="#bg-pagination">bg-pagination</li>
+    <li data-id="#bg-rich-text">bg-rich-text</li>
+    <li data-id="#bg-sort">bg-sort</li>
+    <li data-id="#bg-step">bg-step</li>
+    <li data-id="#bg-steps">bg-steps</li>
+    <li data-id="#bg-switch">bg-switch</li>
+    <li data-id="#bg-tab">bg-tab</li>
+    <li data-id="#bg-table-btn">bg-table-btn</li>
+    <li data-id="#bg-table-btns-more">bg-table-btns-more</li>
+    <li data-id="#bg-table-btns">bg-table-btns</li>
+    <li data-id="#bg-table-pro">bg-table-pro</li>
+    <li data-id="#bg-table">bg-table</li>
+    <li data-id="#bg-tabs">bg-tabs</li>
+    <li data-id="#bg-tags">bg-tags</li>
+    <li data-id="#bg-upload-image">bg-upload-image</li>
+    <li data-id="#bg-upload">bg-upload</li>
+    <li data-id="#bg-user-upload-image">bg-user-upload-image</li>
+  </ul>
+
+  <div class="container">
+
+    <cw title="bg-btns">
+      <bg-btns :options="btnsOption" v-model="btnsCurrentValue"></bg-btns>
+    </cw>
+
+    <cw title="bg-card">
+      <bg-card :title="cardTitle" :icon="cardIcon">
+        <!-- slot自定义card内容体 -->
+        <div>
+          <div>haha</div>
+          <p>adsadsa</p>
+        </div>
+      </bg-card>
+    </cw>
+
+    <cw title="bg-code-editor"></cw>
+
+    <cw title="bg-detail-table">
+      <bg-detail-table :data="detailTable.data" :layout="{ line_num: 4 }"></bg-detail-table>
+    </cw>
+
+    <cw title="bg-detail-table2">
+      <bg-detail-table2 :list="[{ label: 'label', value: 'table2 demo' }]" itemWidth="200px"></bg-detail-table2>
+    </cw>
+
+    <cw title="bg-filter-date"></cw>
+    <cw title="bg-filter-group"></cw>
+    <cw title="bg-filter"></cw>
+    <cw title="bg-filtrate"></cw>
+    <cw title="bg-icon">
+      <bg-icon icon="#bg-ic-s-circle-close"></bg-icon>
+      <bg-icon icon="#bg-ic-c-file-doc"></bg-icon>
+    </cw>
+    <cw title="bg-info">
+      <bg-info :data="info.data"></bg-info>
+    </cw>
+    <cw title="bg-inner-tabs">
+      <bg-inner-tabs :data="['a', 'b', 'c']" :v-model="1" :default="1" :height="[36, 32, 16]"></bg-inner-tabs>
+    </cw>
+    <cw title="bg-layout-card">
+      <!-- <bg-layout-card title="title" width="420px" :btns="[1, 2]" @update:btn="handleUpdateBtnIndex"></bg-layout-card> -->
+    </cw>
+    <cw title="bg-list">
+      <bg-list :visible="true">
+        <template #breadcrumb>breadcrumb</template>
+        <template #header>list header</template>
+      </bg-list>
+    </cw>
+    <cw title="bg-nav-list"></cw>
+    <cw title="bg-nav"></cw>
+    <cw title="bg-pagination"></cw>
+    <cw title="bg-rich-text"></cw>
+    <cw title="bg-sort"></cw>
+    <cw title="bg-step"></cw>
+    <cw title="bg-steps"></cw>
+    <cw title="bg-switch"></cw>
+    <!-- <cw title="bg-tab">
+      <bg-tab label="label">
+        <div>content</div>
+      </bg-tab>
+    </cw> -->
+    <cw title="bg-table-btn"></cw>
+    <cw title="bg-table-btns-more"></cw>
+    <cw title="bg-table-btns"></cw>
+    <cw title="bg-table-pro"></cw>
+    <cw title="bg-table"></cw>
+    <!-- <cw title="bg-tabs">
+      <bg-tabs>
+        <div>a</div>
+        <div>b</div>
+        <div>c</div>
+        <template #actions>
+          <div>a action</div>
+          <div>b action</div>
+          <div>c action</div>
+        </template>
+      </bg-tabs>
+    </cw> -->
+    <cw title="bg-tags">
+      <bg-tags value="1, 2, 3, 4" @change="(v) => { console.log(v) }"></bg-tags>
+      <template #notes>该组件引用了的el-button需要调整size，以便兼容Element-Plus</template>
+    </cw>
+    <cw title="bg-upload-image"></cw>
+    <cw title="bg-upload"></cw>
+    <cw title="bg-user-upload-image"></cw>
+  </div>
 </template>
 
-<style scoped>
+<style lang="scss" scoped>
+.nav {
+  width: 100%;
+  padding: 12px;
+  display: flex;
+  flex-wrap: wrap;
+  position: fixed;
+  background-color: #fff;
+  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
+  top: 0;
+  z-index: 1;
+
+  li {
+    list-style-type: disc;
+    list-style-position: inside;
+    margin-right: 16px;
+    cursor: pointer;
+    color: #333;
+
+    &:active {
+      color: #f00;
+    }
+  }
+
+}
 
+.container {
+  padding: 0 24px;
+}
 </style>
diff --git a/src/assets/reset.css b/src/assets/reset.css
new file mode 100644
index 0000000000000000000000000000000000000000..e1a6f0a931f6a140ba122b23e09a7ffbf660d38c
--- /dev/null
+++ b/src/assets/reset.css
@@ -0,0 +1,75 @@
+/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
+html,
+body,
+p,
+ol,
+ul,
+li,
+dl,
+dt,
+dd,
+blockquote,
+figure,
+fieldset,
+legend,
+textarea,
+pre,
+iframe,
+hr,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  padding: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: 100%;
+  font-weight: normal;
+}
+
+ul {
+  list-style: none;
+}
+
+button,
+input,
+select {
+  margin: 0;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+img,
+video {
+  height: auto;
+  max-width: 100%;
+}
+
+iframe {
+  border: 0;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}
diff --git a/src/components/componentWrapper.vue b/src/components/componentWrapper.vue
new file mode 100644
index 0000000000000000000000000000000000000000..68f2af784df2dafff120317e463844149f6fe0b3
--- /dev/null
+++ b/src/components/componentWrapper.vue
@@ -0,0 +1,56 @@
+<template>
+  <div :id="title" class="wrapper">
+    <h2>{{ title }}</h2>
+    <div class="content">
+      <slot><p class="tips">暂无示例，待补充</p></slot>
+    </div>
+    <div class="notes">
+      <slot name="notes"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  title: {
+    type: String,
+    default: 'component name'
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.wrapper {
+  margin-bottom: 24px;
+  padding: 12px 0;
+  border-bottom: 2px dashed #eee;
+}
+
+h2 {
+  height: 32px;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  &::before {
+    content: "⭕️";
+    font-size: 16px;
+    margin-right: 8px;
+  }
+}
+
+.content {
+  margin-top: 12px;
+  padding: 12px;
+  border: 1px solid #ccc;
+}
+
+.tips {
+  color: #999;
+}
+
+.notes {
+  font-size: 14px;
+  color: #f00;
+  padding: 4px 0;
+}
+</style>
diff --git a/src/main.js b/src/main.js
index ebea13567d0fe20fe8a745cc1bc37c8fc923d694..e0cf48d881e0cc31e845bce02cb44c981bb87043 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,7 +1,12 @@
 import { createApp } from "vue";
+import ElementPlus from "element-plus";
+import "element-plus/dist/index.css";
+import locale from "element-plus/lib/locale/lang/zh-cn";
+
 import App from "./App.vue";
 
+import "@/assets/reset.css";
 import bgui from "@/bg-ui";
 import "@/bg-ui/index.scss";
 
-createApp(App).use(bgui).mount("#app");
+createApp(App).use(ElementPlus, { locale, size: "small" }).use(bgui).mount("#app");
