diff --git a/README.md b/README.md
index db169e3..c2ed164 100644
--- a/README.md
+++ b/README.md
@@ -14,31 +14,31 @@ npm install vue-wrap-balancer
 
 ## Usage
 
-The simplest way is to wrap the text content with `<Balancer>`:
+The simplest way is to wrap the text content with `<WrapBalancer>`:
 
 ```vue
 <script setup>
-import Balancer from 'vue-wrap-balancer'
+import WrapBalancer from 'vue-wrap-balancer'
 </script>
 
 <template>
   <h1>
-    <Balancer>My Title</Balancer>
+    <WrapBalancer>My Title</WrapBalancer>
   </h1>
 </template>
 ```
 
-If you have multiple `<Balancer>` components used, it’s recommended (but optional) to use `<Provider>` to wrap the entire app. This will make them share the re-balance logic and reduce the HTML size:
+If you have multiple `<WrapBalancer>` components used, it’s recommended (but optional) to use `<BalancerProvider>` to wrap the entire app. This will make them share the re-balance logic and reduce the HTML size:
 
 ```vue
 <script setup>
-import { Provider } from 'vue-wrap-balancer'
+import { BalancerProvider } from 'vue-wrap-balancer'
 </script>
 
 <template>
-  <Provider>
+  <BalancerProvider>
     <App />
-  </Provider>
+  </BalancerProvider>
 </template>
 ```
 
diff --git a/src/index.ts b/src/index.ts
index ae8d63b..6134603 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -78,7 +78,7 @@ function createScriptElement(injected: boolean, suffix?: string) {
   })
 }
 
-export const Provider = defineComponent({
+export const BalancerProvider = defineComponent({
   name: 'BalancerProvider',
   setup(_props, { slots }) {
     provide('BALANCER_CONTEXT', true)
@@ -91,7 +91,7 @@ export const Provider = defineComponent({
 })
 
 export default defineComponent({
-  name: 'Balancer',
+  name: 'WrapBalancer',
   props: {
     /**
      * The HTML tag to use for the wrapper element.