diff --git a/docs/.vitepress/theme/CodePreview.vue b/docs/.vitepress/theme/CodePreview.vue
index b40b9af9..46d855b0 100644
--- a/docs/.vitepress/theme/CodePreview.vue
+++ b/docs/.vitepress/theme/CodePreview.vue
@@ -25,7 +25,7 @@ defineExpose({ dark, showCode })
       :class="{
         dark: dark,
       }"
-      class="relative mt-4 overflow-hidden rounded-xl border dark:border-slate-500/50"
+      class="not-prose relative mt-4 overflow-hidden rounded-xl border dark:border-slate-500/50"
     >
       <div class="bg-slate-50 transition-colors dark:bg-slate-800">
         <div class="flex justify-end gap-2 border-b bg-slate-100 p-2 dark:border-slate-500/50 dark:bg-slate-700/50">
diff --git a/src/components/Button/style.ts b/src/components/Button/style.ts
index 94afff62..d2eff125 100644
--- a/src/components/Button/style.ts
+++ b/src/components/Button/style.ts
@@ -51,7 +51,7 @@ const createBtnCls = classed('t-button', {
       true: '!px-0 w-[--t-btn-h]',
     },
     variant: {
-      default: `shadow-sm border`,
+      default: `shadow-sm border py-1`,
       filled: `shadow-sm border`,
       light: `shadow-sm border`,
       link: `border decoration-2 underline-offset-2`,
@@ -121,12 +121,12 @@ const getBtnCssVars = (variant: ButtonVariants['variant'], color: ColorKey, prim
 export function useStyle(variant: MaybeRefOrGetter<ButtonProps>) {
   const { colors, getColorKey } = useTheme()
   const variantRef = computed(() => {
-    const orginVariant = { ...toValue(variant) }
+    const originVariant = { ...toValue(variant) }
     const _variant: ButtonVariants = {
-      ...orginVariant,
-      color: orginVariant.color || 'gray',
-      ring: orginVariant.variant === 'link' ? false : orginVariant.ring,
-      variant: orginVariant.variant || (orginVariant.color ? 'filled' : 'default'),
+      ...originVariant,
+      color: originVariant.color || 'gray',
+      ring: originVariant.variant === 'link' ? false : originVariant.ring,
+      variant: originVariant.variant || (originVariant.color ? 'filled' : 'default'),
     }
     return _variant
   })
diff --git a/src/components/ConfigProvider/index.ts b/src/components/ConfigProvider/index.ts
index fe342180..77dbf359 100644
--- a/src/components/ConfigProvider/index.ts
+++ b/src/components/ConfigProvider/index.ts
@@ -1,17 +1,19 @@
 import {
+  computed,
+  defineComponent,
   type ExtractPropTypes,
   type ExtractPublicPropTypes,
   type PropType,
-  type SlotsType,
-  type VNode,
-  computed,
-  defineComponent,
   provide,
   reactive,
   ref,
   renderSlot,
+  type SlotsType,
+  type VNode,
 } from 'vue'
+
 import { type Theme } from '@/theme'
+
 import { type Config, configProviderKey, useConfig } from './useConfig'
 
 export { useConfig }
diff --git a/src/components/List/index.tsx b/src/components/List/ItemList.tsx
similarity index 80%
rename from src/components/List/index.tsx
rename to src/components/List/ItemList.tsx
index c56a171e..c809bed4 100644
--- a/src/components/List/index.tsx
+++ b/src/components/List/ItemList.tsx
@@ -14,7 +14,7 @@ import { type OptionItem, type OptionValue, toMultipleVal } from '@/utils/option
 
 const props = {
   value: [String, Number, Array] as PropType<OptionValue | Array<OptionValue>>,
-  options: {
+  items: {
     type: Array as PropType<OptionItem[]>,
     default: () => [],
   },
@@ -22,21 +22,20 @@ const props = {
   multiple: Boolean,
 }
 
-export type ListProps = ExtractPropTypes<typeof props>
+export type ItemListProps = ExtractPropTypes<typeof props>
 
-export type ListPublicProps = ExtractPublicPropTypes<typeof props>
+export type ItemListPublicProps = ExtractPublicPropTypes<typeof props>
 
-export type ListCssVars = {
-  '--t-list-accent-color': string
-  '--t-list-ring-color': string
+export type ItemListCssVars = {
+  '--t-itemList-accent-color': string
 }
 
-export const List = defineComponent({
-  name: 'TList',
+export const ItemList = defineComponent({
+  name: 'TItemList',
   props,
   emits: {
-    'update:value': (val: Required<ListProps>['value']) => true,
-    change: (val: Required<ListProps>['value']) => true,
+    'update:value': (val: Required<ItemListProps>['value']) => true,
+    change: (val: Required<ItemListProps>['value']) => true,
   },
   slots: Object as SlotsType<{
     item: (props: { item: OptionItem; selected: boolean }) => VNode[]
@@ -53,9 +52,8 @@ export const List = defineComponent({
       props.multiple ? [] : undefined
     )
 
-    const cssVars = computed<ListCssVars>(() => ({
-      '--t-list-accent-color': colors.value.primary[500],
-      '--t-list-ring-color': colors.value.primary[500],
+    const cssVars = computed<ItemListCssVars>(() => ({
+      '--t-itemList-accent-color': colors.value.primary[500],
     }))
 
     const itemClickHandler = (item: OptionItem) => {
@@ -84,8 +82,8 @@ export const List = defineComponent({
         class="w-full overflow-auto rounded-md bg-white py-1 text-sm shadow-md ring-1 ring-black ring-opacity-5 focus:outline-none "
         tabindex="-1"
       >
-        {props.options.length > 0 ? (
-          props.options.map(item =>
+        {props.items.length > 0 ? (
+          props.items.map(item =>
             slots.item ? (
               slots.item({ item, selected: isSelected(item) })
             ) : (
@@ -95,8 +93,8 @@ export const List = defineComponent({
                   item.disabled
                     ? 'font-normal text-gray-400'
                     : isSelected(item)
-                    ? 'cursor-pointer font-semibold hover:text-white hover:bg-[--t-list-accent-color]'
-                    : 'cursor-pointer font-normal text-gray-700 hover:text-white hover:bg-[--t-list-accent-color]',
+                    ? 'cursor-pointer font-semibold hover:text-white hover:bg-[--t-itemList-accent-color]'
+                    : 'cursor-pointer font-normal text-gray-700 hover:text-white hover:bg-[--t-itemList-accent-color]',
                 ]}
                 onClick={() => itemClickHandler(item)}
               >
diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/Select/SelectList.tsx b/src/components/Select/SelectList.tsx
deleted file mode 100644
index 4081f903..00000000
--- a/src/components/Select/SelectList.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import {
-  computed,
-  defineComponent,
-  type ExtractPropTypes,
-  type ExtractPublicPropTypes,
-  type PropType,
-  ref,
-  type SlotsType,
-  type VNode,
-} from 'vue'
-
-import { useTheme } from '@/theme'
-
-const props = {
-  value: null,
-  checked: Boolean,
-}
-
-export type SlectListProps = ExtractPropTypes<typeof props>
-
-export type SlectListPublicProps = ExtractPublicPropTypes<typeof props>
-
-export type SlectListCssVars = {
-  '--t-btn-text-color': string
-  '--t-btn-border-color': string
-  '--t-btn-bg': string
-
-  '--t-btn-text-color-hover': string
-  '--t-btn-border-color-hover': string
-  '--t-btn-bg-hover': string
-
-  '--t-btn-ring-color': string
-}
-
-export const SlectList = defineComponent({
-  name: 'TSlectList',
-  props,
-  slots: Object as SlotsType<{
-    default: () => VNode
-  }>,
-  setup(props, { slots, emit }) {
-    const { colors } = useTheme()
-
-    const { cssVars, cls } = useStyle(() => {
-      return {
-        ...props,
-      }
-    })
-
-    const hasIcon = computed(() => !!slots.icon || props.loading)
-    const onClick = (e: MouseEvent) => {
-      if (!props.disabled) {
-        emit('click', e)
-      }
-    }
-    return () => (
-      <ul
-        class="w-full overflow-auto rounded-md bg-white py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none "
-        tabindex="-1"
-      >
-        <li class="relative cursor-default select-none py-2 pl-8 pr-4 text-gray-900" role="option">
-          <span class="block truncate font-normal"> Wade Cooper </span>
-
-          <span class="absolute inset-y-0 left-0 flex items-center pl-1.5 text-indigo-600">
-            <svg
-              class="h-5 w-5"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 20 20"
-              fill="currentColor"
-              aria-hidden="true"
-            >
-              <path
-                fill-rule="evenodd"
-                d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                clip-rule="evenodd"
-              />
-            </svg>
-          </span>
-        </li>
-      </ul>
-    )
-  },
-})
diff --git a/src/components/Select/index.tsx b/src/components/Select/index.tsx
index 0f5ce301..138b238b 100644
--- a/src/components/Select/index.tsx
+++ b/src/components/Select/index.tsx
@@ -17,7 +17,7 @@ import { useTheme } from '@/theme'
 import { type OptionItem, type OptionValue, toMultipleVal } from '@/utils/option'
 
 import { SelectorIcon } from '../Icon'
-import { List } from '../List'
+import { ItemList } from '../List/ItemList'
 import { Popper } from '../Popper'
 
 const props = {
@@ -87,7 +87,12 @@ export const Select = defineComponent({
             </button>
           ),
           content: () => (
-            <List value={val.value} onUpdate:value={setVal} onChange={changeHandler} options={props.options}></List>
+            <ItemList
+              value={val.value}
+              onUpdate:value={setVal}
+              onChange={changeHandler}
+              items={props.options}
+            ></ItemList>
           ),
         }}
       </Popper>
diff --git a/src/theme/index.ts b/src/theme/index.ts
index c037495f..6d372739 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -1,8 +1,10 @@
 import { computed, inject, ref } from 'vue'
 
 import { useConfig } from '@/components/ConfigProvider'
-import { type AliasColorMap, COLORS, type Color, type ColorAlias, type ColorKey, type ColorMap } from './colors'
-export { type SizeType, type SpaceType, getSpace } from './space'
+
+import { type AliasColorMap, type Color, type ColorAlias, type ColorKey, type ColorMap, COLORS } from './colors'
+
+export { getSpace, type SizeType, type SpaceType } from './space'
 export type { Color, ColorKey, ColorMap }
 
 export { COLORS }
diff --git a/src/types.ts b/src/types.ts
new file mode 100644
index 00000000..b551f1b7
--- /dev/null
+++ b/src/types.ts
@@ -0,0 +1,3 @@
+export type Fn = (...args: any[]) => any
+
+export type Flat<T> = T extends Fn ? T : T extends object ? { [K in keyof T]: T[K] } : T
diff --git a/src/utils/style.ts b/src/utils/style.ts
index e69de29b..f09c32f4 100644
--- a/src/utils/style.ts
+++ b/src/utils/style.ts
@@ -0,0 +1,20 @@
+import { computed, type MaybeRefOrGetter, toValue } from 'vue'
+
+import type { Flat } from '@/types'
+
+type CssVars<N extends string, T extends Record<string, string> = {}> = {
+  [K in keyof T as `--${N}-${string & K}`]: T[K]
+}
+
+export function createCssVar<N extends string, T extends Record<string, string>>(name: N, cssVars: T) {
+  const result = Object.entries(cssVars).reduce((acc, [key, value]) => {
+    // @ts-ignore
+    acc[`--${name}-${key}`] = value
+    return acc
+  }, {} as Flat<CssVars<N, T>>)
+  return result
+}
+
+export function useCssVar<N extends string, T extends Record<string, string>>(name: N, getter: MaybeRefOrGetter<T>) {
+  return computed(() => createCssVar(name, toValue(getter)))
+}
diff --git a/tsconfig.json b/tsconfig.json
index d21f1686..044b1181 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "extends": "@jaskang/config/tsconfig.web.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue","docs/.vitepress/config.ts", "docs/.vitepress/theme/**/*"],
+  "include": ["env.d.ts", "src/**/*", "docs/.vitepress/config.ts", "docs/.vitepress/theme/**/*"],
   "compilerOptions": { 
     "outDir": "dist_types",
     "composite": true,