diff --git a/packages/shared-ui/src/root/counter.tsx b/packages/shared-ui/src/root/counter.tsx
new file mode 100644
index 00000000..b995d660
--- /dev/null
+++ b/packages/shared-ui/src/root/counter.tsx
@@ -0,0 +1,19 @@
+"use client";
+
+import useRGS from "r18gs";
+
+export default function Counter() {
+ const [count, setCount] = useRGS("count", 0);
+ return (
+
+
Clinet component 1
+ {
+ setCount(parseInt(e.target.value.trim()));
+ }}
+ type="number"
+ value={count}
+ />
+
+ );
+}
diff --git a/packages/shared-ui/src/root/display.tsx b/packages/shared-ui/src/root/display.tsx
new file mode 100644
index 00000000..ece0cf87
--- /dev/null
+++ b/packages/shared-ui/src/root/display.tsx
@@ -0,0 +1,13 @@
+"use client";
+
+import useRGS from "r18gs";
+
+export default function Display() {
+ const [count] = useRGS("count");
+ return (
+
+
Client component 2
+ {count}
+
+ );
+}
diff --git a/packages/shared-ui/src/root/hero.tsx b/packages/shared-ui/src/root/hero.tsx
index 789e58d3..d1d37cee 100644
--- a/packages/shared-ui/src/root/hero.tsx
+++ b/packages/shared-ui/src/root/hero.tsx
@@ -1,14 +1,31 @@
import styles from "../root-layout.module.css";
import { Logo } from "../common/logo";
+import Counter from "./counter";
+import Display from "./display";
export function Hero() {
return (
- Build with
+ Share global client state with
-
Unleash the power of React Server Components!
+
+ Unleash the power of React Server Components! No wrapper required.
+
Supports tree shakable libraries.
+
+
+
+
+
Sharing state between client components without any wrapper or provider.
+
+
+
+
+
+
+
+
);