diff --git a/packages/ui-next-plugin-sample/package.json b/packages/ui-next-plugin-sample/package.json
new file mode 100644
index 000000000..31905afb1
--- /dev/null
+++ b/packages/ui-next-plugin-sample/package.json
@@ -0,0 +1,6 @@
+{
+  "name": "@hydrooj/ui-next-plugin-sample",
+  "dependencies": {
+    "@hydrooj/ui-next": "workspace:*"
+  }
+}
diff --git a/packages/ui-next-plugin-sample/ui/before.tsx b/packages/ui-next-plugin-sample/ui/before.tsx
new file mode 100644
index 000000000..08c87007a
--- /dev/null
+++ b/packages/ui-next-plugin-sample/ui/before.tsx
@@ -0,0 +1,4 @@
+export default function BeforeComponent() {
+    console.log('before app');
+    return <div>before app via @hydrooj/ui-next-plugin-sample</div>;
+}
diff --git a/packages/ui-next-plugin-sample/ui/index.ts b/packages/ui-next-plugin-sample/ui/index.ts
new file mode 100644
index 000000000..9962f2534
--- /dev/null
+++ b/packages/ui-next-plugin-sample/ui/index.ts
@@ -0,0 +1,6 @@
+import type { PluginAPI } from '@hydrooj/ui-next';
+import BeforeComponent from './before';
+
+export function setup(api: PluginAPI) {
+    api.before('page:app', BeforeComponent);
+}
diff --git a/packages/ui-next/src/app.tsx b/packages/ui-next/src/app.tsx
index 9aa6f484e..2257bac68 100644
--- a/packages/ui-next/src/app.tsx
+++ b/packages/ui-next/src/app.tsx
@@ -1,6 +1,6 @@
 import { Link } from './components/link';
 import { usePageData } from './context/page-data';
-import { before, defineSlot } from './registry';
+import { defineSlot } from './registry';
 
 const AppInner = defineSlot('page:app', () => {
   const data = usePageData();
@@ -15,13 +15,4 @@ const AppInner = defineSlot('page:app', () => {
   );
 });
 
-before('page:app', () => {
-  console.log('before app');
-  return (
-    <>
-      <div>before app</div>
-    </>
-  );
-});
-
 export default AppInner;