diff --git a/packages/varlet-ui/src/app-bar/example/index.vue b/packages/varlet-ui/src/app-bar/example/index.vue
index e85d7fed97d..fbc6f1f4c6a 100644
--- a/packages/varlet-ui/src/app-bar/example/index.vue
+++ b/packages/varlet-ui/src/app-bar/example/index.vue
@@ -2,6 +2,7 @@
 import { ref } from 'vue'
 import VarAppBar from '..'
 import VarIcon from '../../icon'
+import Ripple from '../../ripple'
 import AppType from '@varlet/cli/site/mobile/components/AppType'
 import Snackbar from '../../snackbar'
 import VarMenu from '../../menu'
@@ -11,6 +12,8 @@ import dark from '../../themes/dark'
 import { pack, use } from './locale'
 import { watchLang, watchDarkMode } from '@varlet/cli/site/utils'
 
+const vRipple = Ripple
+
 const offsetY = ref(false)
 const menuList = ref([])
 const bgColor = ref('#fff')