diff --git a/docs/components/modal.md b/docs/components/modal.md
index a0f55b6c..fdfbef8f 100644
--- a/docs/components/modal.md
+++ b/docs/components/modal.md
@@ -62,7 +62,7 @@ const modal = ref(false);
 
 :::
 
-## Custom Title
+## Title
 
 <CodeRunner title="Custom Title"
     description="Create a modal with custom title.">
@@ -93,7 +93,7 @@ const modal = ref(false);
 
 :::
 
-## Custom Footer
+## Footer
 
 <CodeRunner title="Custom Footer">
     <ShadcnButton @click="customFooterModal = true">Click</ShadcnButton>
@@ -123,7 +123,7 @@ const modal = ref(false);
 
 :::
 
-## Custom Content
+## Content
 
 <CodeRunner title="Custom Content">
     <ShadcnButton @click="customContentModal = true">Click</ShadcnButton>
@@ -151,11 +151,11 @@ const modal = ref(false);
 
 :::
 
-## Custom Width
+## Width
 
 <CodeRunner title="Custom Width">
     <ShadcnButton @click="customWidthModal = true">Click</ShadcnButton>
-    <ShadcnModal v-model="customWidthModal" title="Custom Width" :width="20">
+    <ShadcnModal v-model="customWidthModal" title="Custom Width" width="200">
         <div class="flex items-center justify-center h-32">Content</div>
     </ShadcnModal>
 </CodeRunner>
@@ -165,7 +165,7 @@ const modal = ref(false);
 ```vue
 <template>
     <ShadcnButton @click="modal = true">Click</ShadcnButton>
-    <ShadcnModal v-model="modal" title="Custom Width" :width="20">
+    <ShadcnModal v-model="modal" title="Custom Width" width="200">
         <div class="flex items-center justify-center h-32">Content</div>
     </ShadcnModal>
 </template>
@@ -179,11 +179,11 @@ const modal = ref(false);
 
 :::
 
-## Custom Height
+## Height
 
 <CodeRunner title="Custom Height">
     <ShadcnButton @click="customHeightModal = true">Click</ShadcnButton>
-    <ShadcnModal v-model="customHeightModal" title="Custom Height" :height="20">
+    <ShadcnModal v-model="customHeightModal" title="Custom Height" height="200">
         <div class="flex items-center justify-center h-32">Content</div>
     </ShadcnModal>
 </CodeRunner>
@@ -193,7 +193,7 @@ const modal = ref(false);
 ```vue
 <template>
     <ShadcnButton @click="modal = true">Click</ShadcnButton>
-    <ShadcnModal v-model="modal" title="Custom Height" :height="20">
+    <ShadcnModal v-model="modal" title="Custom Height" height="200">
         <div class="flex items-center justify-center h-32">Content</div>
     </ShadcnModal>
 </template>
@@ -213,11 +213,11 @@ const modal = ref(false);
 
 <CodeRunner title="Closeable and No Closeable">
     <ShadcnButton @click="closeableModal = true">Closeable</ShadcnButton>
-    <ShadcnModal v-model="closeableModal" title="Closeable" closeable>
+    <ShadcnModal v-model="closeableModal" title="Closeable" closable>
         <div class="flex items-center justify-center h-32">Content</div>
     </ShadcnModal>
     <ShadcnButton @click="noClosableModal = true">No Closeable</ShadcnButton>
-    <ShadcnModal v-model="noClosableModal" title="Not Closeable" :closeable="false">
+    <ShadcnModal v-model="noClosableModal" title="Not Closeable" :closable="false">
         <div class="flex items-center justify-center h-32">Content</div>
     </ShadcnModal>
     <ShadcnButton @click="customClosableModal = true">Custom Closable</ShadcnButton>
@@ -234,11 +234,11 @@ const modal = ref(false);
 ```vue
 <template>
     <ShadcnButton @click="closeableModal = true">Closeable</ShadcnButton>
-    <ShadcnModal v-model="closeableModal" title="Closeable" closeable>
+    <ShadcnModal v-model="closeableModal" title="Closeable" closable>
         <div class="flex items-center justify-center h-32">Content</div>
     </ShadcnModal>
     <ShadcnButton @click="noClosableModal = true">No Closeable</ShadcnButton>
-    <ShadcnModal v-model="noClosableModal" title="Not Closeable" :closeable="false">
+    <ShadcnModal v-model="noClosableModal" title="Not Closeable" :closable="false">
         <div class="flex items-center justify-center h-32">Content</div>
     </ShadcnModal>
     <ShadcnButton @click="customClosableModal = true">Custom Closable</ShadcnButton>
@@ -259,33 +259,33 @@ const customClosableModal = ref(false);
 
 :::
 
-## API Attributes
+## Props
 
 <ApiTable title="Modal Props"
-    :headers="['Attribute', 'Description', 'Type', 'Default Value', 'Depend', 'List']"
+    :headers="['Attribute', 'Description', 'Type', 'Default Value', 'Depend']"
     :columns="[
-        ['modelValue', 'Whether the dialog box is displayed or not, v-model can be used to bind data in two directions.', 'Boolean', 'false', '-', '-'],
-        ['title', 'The title of the dialog box. If the page header is customized using slot, the title will be invalid.', 'String', '-', '-', '-'],
-        ['description', 'Modal description', 'String', '-', 'title', '-'],
-        ['width', 'Modal width', 'Number', '30', '-', '10, 20, 30, 40, 50, 60, 70, 80, 90, 100'],
-        ['height', 'Modal height', 'Number', '30', '-', '10, 20, 30, 40, 50, 60, 70, 80, 90, 100'],
-        ['okText', 'The text of the OK button', 'String', 'OK', '-', '-'],
-        ['cancelText', 'The text of the Cancel button', 'String', 'Cancel', '-', '-'],
-        ['closable', 'Whether the dialog box can be closed', 'Boolean', 'true', '-', '-'],
+        ['modelValue', 'Whether the dialog box is displayed or not, v-model can be used to bind data in two directions.', 'boolean', 'false', '-'],
+        ['title', 'The title of the dialog box. If the page header is customized using slot, the title will be invalid.', 'string', '-', '-'],
+        ['description', 'Modal description', 'string', '-', 'title'],
+        ['width', 'Modal width', 'number | string', '30%', '-'],
+        ['height', 'Modal height', 'number | string', '10%', '-'],
+        ['okText', 'The text of the OK button', 'string', 'OK', '-'],
+        ['cancelText', 'The text of the Cancel button', 'string', 'Cancel', '-'],
+        ['closable', 'Whether the dialog box can be closed', 'boolean', 'true', '-'],
     ]">
 </ApiTable>
 
-<br />
+## Events
 
 <ApiTable title="Modal Events"
     :headers="['Event', 'Description', 'Callback Parameters']"
     :columns="[
-        ['update:modelValue', 'Triggered when display status changes', 'true / false'],
+        ['update:modelValue', 'Triggered when display status changes', 'true | false'],
         ['on-close', 'Triggered when the dialog box is closed', '-'],
     ]">
 </ApiTable>
 
-<br />
+## Slots
 
 <ApiTable title="Modal Slots"
     :headers="['Slot', 'Description']"
diff --git a/src/App.vue b/src/App.vue
index f435dcd7..6a929a4c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,85 +1,12 @@
 <template>
-  <ShadcnButton @click="defaultValue = !defaultValue">Open</ShadcnButton>
-  <ShadcnDrawer v-model="defaultValue" title="Title">
-    <ShadcnTooltip content="Position" position="top">
-      <ShadcnButton>Top</ShadcnButton>
-    </ShadcnTooltip>
-    <ShadcnTooltip content="Position" position="bottom">
-      <ShadcnButton>Bottom</ShadcnButton>
-    </ShadcnTooltip>
-    <ShadcnTooltip content="Position" position="left">
-      <ShadcnButton>Left</ShadcnButton>
-    </ShadcnTooltip>
-    <ShadcnTooltip content="Position" class="mr-20" position="right">
-      <ShadcnButton>Right</ShadcnButton>
-    </ShadcnTooltip>
-    <template #footer>
-      <ShadcnButton @click="defaultValue = !defaultValue">Close</ShadcnButton>
-    </template>
-  </ShadcnDrawer>
-  <ShadcnTooltip :content="content" position="top">
-    <ShadcnButton>Top</ShadcnButton>
-  </ShadcnTooltip>
-  <div class="mt-12"/>
-  <ShadcnTooltip :content="content" position="left">
-    <ShadcnButton>Left</ShadcnButton>
-  </ShadcnTooltip>
-
-  <div class="flex h-screen bg-green-50">
-    <div class="mx-36 my-36">
-
-      <ShadcnTooltip content="Position" position="top" delay="500">
-        <ShadcnButton>Top Delay</ShadcnButton>
-      </ShadcnTooltip>
-
-      <ShadcnSpace wrap>
-        <ShadcnTooltip arrow content="Position" position="top">
-          <ShadcnButton>Top</ShadcnButton>
-        </ShadcnTooltip>
-        <ShadcnTooltip arrow :content="content" position="top">
-          <ShadcnButton>Top</ShadcnButton>
-        </ShadcnTooltip>
-        <ShadcnTooltip arrow :content="content" position="bottom">
-          <ShadcnButton>Bottom</ShadcnButton>
-        </ShadcnTooltip>
-        <ShadcnTooltip arrow :content="content" position="left">
-          <ShadcnButton>Left</ShadcnButton>
-        </ShadcnTooltip>
-        <ShadcnTooltip arrow :content="content" position="right">
-          <ShadcnButton>Right</ShadcnButton>
-        </ShadcnTooltip>
-      </ShadcnSpace>
-    </div>
-  </div>
-  <ShadcnButton @click="defaultValue = !defaultValue">Open</ShadcnButton>
-
-  <ShadcnDrawer v-model="defaultValue" title="Title">
-    <ShadcnTooltip content="Position" position="top">
-      <ShadcnButton>Top</ShadcnButton>
-    </ShadcnTooltip>
-    <ShadcnTooltip content="Position" position="bottom">
-      <ShadcnButton>Bottom</ShadcnButton>
-    </ShadcnTooltip>
-    <ShadcnTooltip content="Position" position="left">
-      <ShadcnButton>Left</ShadcnButton>
-    </ShadcnTooltip>
-    <ShadcnTooltip content="Position" position="right">
-      <ShadcnButton>Right</ShadcnButton>
-    </ShadcnTooltip>
-    <template #footer>
-      <ShadcnButton @click="defaultValue = !defaultValue">Close</ShadcnButton>
-    </template>
-  </ShadcnDrawer>
-  <div class="mt-12"></div>
-  <ShadcnTooltip :content="content" position="bottom">
-    <ShadcnButton>Bottom</ShadcnButton>
-  </ShadcnTooltip>
+  <ShadcnButton @click="modal = true">Click</ShadcnButton>
+  <ShadcnModal v-model="modal" title="Custom Width" width="200" height="300">
+    <div class="flex items-center justify-center h-32">Content</div>
+  </ShadcnModal>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref } from 'vue';
 
-const defaultValue = ref(false)
-const content = ref(
-    'Steve Jobs (English: Steve Jobs) is an American entrepreneur, marketer and inventor. He is one of the co-founders of Apple and has served as chairman and CEO. He is also the founder and CEO of NeXT and the founder and former CEO of Pixar Animation. He was a member of the board of directors of the Walt Disney Company in 2006. The place where Apple\'s press conference was held in September 2017 was named Steve Jobs Theater after him.')
+const modal = ref(false);
 </script>
diff --git a/src/ui/modal/ShadcnModal.vue b/src/ui/modal/ShadcnModal.vue
index 94ccb044..e8d95454 100644
--- a/src/ui/modal/ShadcnModal.vue
+++ b/src/ui/modal/ShadcnModal.vue
@@ -7,10 +7,11 @@
            @click="onClose"/>
 
       <!-- Dialog -->
-      <div :class="cn('relative bg-white z-50 flex flex-col animate-in fade-in-0 zoom-in-95',
-                      'w-full max-w-lg mx-auto rounded-sm',
-                      width && `min-w-[${width}%] w-[${width}%] max-w-[${width}%]`,
-                      height && `min-h-[${height}%] h-[${height}%] max-h-[${height}%]`)">
+      <div class="'relative bg-white z-50 flex flex-col animate-in fade-in-0 zoom-in-95 w-full max-w-lg mx-auto rounded-sm"
+           :style="[
+               { width: calcSize(width), minWidth: calcSize(width), maxWidth: calcSize(width) },
+               { height: calcSize(height), minHeight: calcSize(height), maxHeight: calcSize(height) }
+           ]">
         <!-- Header -->
         <div v-if="$slots.title || title"
              class="border-b p-2">
@@ -62,25 +63,19 @@
 </template>
 
 <script setup lang="ts">
-import { cn } from '@/lib/utils.ts'
-import { ModalProps } from '@/ui/modal/types.ts'
+import { ModalEmits, ModalProps } from '@/ui/modal/types.ts'
+import { calcSize } from '@/utils/common.ts'
 
-const validateWidthHeight = (value: number) => {
-  return value >= 10 && value <= 100 && value % 10 === 0
-}
-
-const emit = defineEmits(['on-close', 'update:modelValue'])
+const emit = defineEmits<ModalEmits>()
 
-const props = withDefaults(defineProps<ModalProps>(), {
+withDefaults(defineProps<ModalProps>(), {
   okText: 'OK',
   cancelText: 'Cancel',
-  closable: true
+  closable: true,
+  width: '30%',
+  height: '10%'
 })
 
-if ((props.width && !validateWidthHeight(props.width)) || (props.height && !validateWidthHeight(props.height))) {
-  console.error('Width or Height must be between 10 and 100 and multiples of 10.')
-}
-
 const onClose = () => {
   emit('on-close')
   emit('update:modelValue', false)
diff --git a/src/ui/modal/types.ts b/src/ui/modal/types.ts
index 2a0edc09..5a5c8c49 100644
--- a/src/ui/modal/types.ts
+++ b/src/ui/modal/types.ts
@@ -3,9 +3,14 @@ export interface ModalProps
     modelValue: boolean
     title?: string
     description?: string
-    width?: number
-    height?: number
+    width?: number | string
+    height?: number | string
     okText?: string
     cancelText?: string
     closable?: boolean
 }
+
+export type ModalEmits = {
+    (e: 'update:modelValue', value: boolean): void
+    (e: 'on-close'): void
+}
diff --git a/src/ui/tooltip/ShadcnTooltip.vue b/src/ui/tooltip/ShadcnTooltip.vue
index ff63872f..27e28705 100644
--- a/src/ui/tooltip/ShadcnTooltip.vue
+++ b/src/ui/tooltip/ShadcnTooltip.vue
@@ -76,19 +76,19 @@ const hideTooltip = () => {
 
 const positionFunctions = {
   top: (trigger: DOMRect, content: DOMRect) => {
-    const pos = getTopPosition(trigger, content, 8, true)
+    const pos = getTopPosition(trigger, content, 8)
     return pos
   },
   bottom: (trigger: DOMRect, content: DOMRect) => {
-    const pos = getBottomPosition(trigger, content, 8, true)
+    const pos = getBottomPosition(trigger, content, 8)
     return pos
   },
   left: (trigger: DOMRect, content: DOMRect) => {
-    const pos = getLeftPosition(trigger, content, 8, true, props.position)
+    const pos = getLeftPosition(trigger, content, 8, props.position)
     return pos
   },
   right: (trigger: DOMRect, content: DOMRect) => {
-    const pos = getRightPosition(trigger, content, 8, true, props.position)
+    const pos = getRightPosition(trigger, content, 8, props.position)
     return pos
   }
 }
diff --git a/src/ui/tooltip/types.ts b/src/ui/tooltip/types.ts
index 30430f7c..75ba5069 100644
--- a/src/ui/tooltip/types.ts
+++ b/src/ui/tooltip/types.ts
@@ -3,7 +3,6 @@ import { ArrangePosition } from '@/ui/common/position.ts'
 export interface TooltipProps
 {
     content?: string
-    width?: number
     position?: ArrangePosition | string
     arrow?: boolean
     delay?: number
diff --git a/src/utils/position.ts b/src/utils/position.ts
index de315dc7..3cd9b209 100644
--- a/src/utils/position.ts
+++ b/src/utils/position.ts
@@ -4,7 +4,6 @@ export const getTopPosition = (
     trigger: DOMRect,
     content: DOMRect,
     skip: number = 0,
-    fit: boolean = true
 ) => {
     const topPosition = trigger.top === 0
         ? trigger.top + trigger.height + skip
@@ -29,7 +28,6 @@ export const getBottomPosition = (
     trigger: DOMRect,
     content: DOMRect,
     skip: number = 0,
-    fit: boolean = true
 ) => {
     const bottomPosition = trigger.top + trigger.height + skip > window.innerHeight
         ? trigger.top - content.height - skip
@@ -54,7 +52,6 @@ export const getLeftPosition = (
     trigger: DOMRect,
     content: DOMRect,
     skip: number = 0,
-    fit: boolean = true,
     position: string = 'left'
 ) => {
     if (position === null || trigger.left === 0) {
@@ -85,7 +82,6 @@ export const getRightPosition = (
     trigger: DOMRect,
     content: DOMRect,
     skip: number = 0,
-    fit: boolean = true,
     position: string = 'right'
 ) => {
     const tolerance = 10