diff --git a/README.md b/README.md
index 316fbb8..0bbdc55 100644
--- a/README.md
+++ b/README.md
@@ -68,6 +68,7 @@ See [Vitesse](https://github.com/antfu/vitesse) for full featureset.
   - [`vite-plugin-pages`](https://github.com/hannoeru/vite-plugin-pages) - file system based routing
 - [`unplugin-auto-import`](https://github.com/antfu/unplugin-auto-import) - Directly use Vue Composition API and others without importing
 - [`unplugin-vue-components`](https://github.com/antfu/unplugin-vue-components) - components auto import
+- [`unplugin-vue-macros`](https://github.com/sxzz/unplugin-vue-macros) - Explore and extend more macros and syntax sugar to Vue.
 - [VueUse](https://github.com/antfu/vueuse) - collection of useful composition APIs
 
 ## Try it now!
diff --git a/components.d.ts b/components.d.ts
index 17ed50b..091bbfb 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -7,10 +7,10 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    Counter: typeof import('./src/components/Counter.vue')['default']
-    Footer: typeof import('./src/components/Footer.vue')['default']
-    Input: typeof import('./src/components/Input.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    TheCounter: typeof import('./src/components/TheCounter.vue')['default']
+    TheFooter: typeof import('./src/components/TheFooter.vue')['default']
+    TheInput: typeof import('./src/components/TheInput.vue')['default']
   }
 }
diff --git a/src/App.vue b/src/App.vue
index 001c20e..c1caf1f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <main font-sans p="x-4 y-10" text="center gray-700 dark:gray-200">
     <RouterView />
-    <Footer />
+    <TheFooter />
   </main>
 </template>
diff --git a/src/components/Counter.vue b/src/components/TheCounter.vue
similarity index 100%
rename from src/components/Counter.vue
rename to src/components/TheCounter.vue
diff --git a/src/components/Footer.vue b/src/components/TheFooter.vue
similarity index 100%
rename from src/components/Footer.vue
rename to src/components/TheFooter.vue
diff --git a/src/components/Input.vue b/src/components/TheInput.vue
similarity index 100%
rename from src/components/Input.vue
rename to src/components/TheInput.vue
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 2f8545c..c795c5e 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -26,7 +26,7 @@ const go = () => {
 
     <div py-4 />
 
-    <Input
+    <TheInput
       v-model="name"
       placeholder="What's your name?"
       autocomplete="false"
diff --git a/test/component.test.ts b/test/component.test.ts
index b4b23e0..2c62c74 100644
--- a/test/component.test.ts
+++ b/test/component.test.ts
@@ -1,16 +1,16 @@
 import { mount } from '@vue/test-utils'
 import { describe, expect, it } from 'vitest'
-import Counter from '../src/components/Counter.vue'
+import TheCounter from '../src/components/TheCounter.vue'
 
-describe('Counter.vue', () => {
+describe('TheCounter.vue', () => {
   it('should render', () => {
-    const wrapper = mount(Counter, { props: { initial: 10 } })
+    const wrapper = mount(TheCounter, { props: { initial: 10 } })
     expect(wrapper.text()).toContain('10')
     expect(wrapper.html()).toMatchSnapshot()
   })
 
   it('should be interactive', async () => {
-    const wrapper = mount(Counter, { props: { initial: 0 } })
+    const wrapper = mount(TheCounter, { props: { initial: 0 } })
     expect(wrapper.text()).toContain('0')
 
     expect(wrapper.find('.inc').exists()).toBe(true)