diff --git a/README.md b/README.md
index 483ab19..8718f0c 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,8 @@ This addons provides a `Sources` and `Source` component to show sources.
 ## Setup
 
 1. Install the addon with your favorite package manager
-2. Add it in your frontmatter:
+2. Install `pinia` as a dependency with your favorite package manager
+3. Add it in your frontmatter:
 ```
 addons:
   - slidev-addon-bibliography
@@ -15,8 +16,12 @@ addons:
 ```ts
 import { defineAppSetup } from '@slidev/types'
 import Bibliography from '../bibliography.json'
+import { createPinia } from 'pinia'
+
+const pinia = createPinia()
 
 export default defineAppSetup(({ app }) => {
+    app.use(pinia)
     app.provide('bibliography', Bibliography)
 })
 ```
diff --git a/components/Source.vue b/components/Source.vue
index 2b13a29..2274673 100644
--- a/components/Source.vue
+++ b/components/Source.vue
@@ -1,7 +1,10 @@
 <script lang="ts" setup>
 import { sharedState } from '@slidev/client/state/shared'
 import { computed } from '@vue/reactivity'
-import { watch } from 'vue';
+import { watch } from 'vue'
+import { useBibliographyStore } from '../stores/bibliography'
+
+const bibliography = useBibliographyStore()
 
 const props = defineProps({
     item: String,
@@ -9,22 +12,16 @@ const props = defineProps({
 })
 
 const position = computed<number>(() => {
-    if (!sharedState.sources) {
-        sharedState.sources = new Set()
-    }
-    return [...sharedState.sources].findIndex(i => props.item === i)
+    return [...bibliography.sources].findIndex(i => props.item === i)
 })
 
 watch(
     () => props.item,
     () => {
-        if (!sharedState.sources) {
-            sharedState.sources = new Set()
-        }
         if(!props.item) {
             return
         }
-        sharedState.sources.add(props.item)
+        bibliography.addSource(props.item)
     },
     { immediate: true }
 )
diff --git a/components/Sources.vue b/components/Sources.vue
index 04fe8a3..5b382f4 100644
--- a/components/Sources.vue
+++ b/components/Sources.vue
@@ -1,11 +1,12 @@
 <script lang="ts" setup>
-import { sharedState } from '@slidev/client/state/shared'
 import { computed, inject } from 'vue';
+import { useBibliographyStore } from '../stores/bibliography'
 
+const bibliography = useBibliographyStore()
 const Bibliography = inject('bibliography')
 
 const bib = computed(() => {
-    return [...sharedState.sources]
+    return [...bibliography.sources]
         .map(key => Bibliography[key])
 })
 </script>
diff --git a/stores/bibliography.ts b/stores/bibliography.ts
new file mode 100644
index 0000000..3611a78
--- /dev/null
+++ b/stores/bibliography.ts
@@ -0,0 +1,15 @@
+import { defineStore } from 'pinia'
+
+export const useBibliographyStore = defineStore('bibliography', {
+    state: () => {
+        return {
+            sources: new Set(),
+        }
+    },
+
+    actions: {
+        addSource(source: string) {
+            this.sources.add(source)
+        },
+    },
+})
\ No newline at end of file