docs: using server components in islands

docs/latest/concepts/islands.md

@@ -78,6 +78,34 @@ export default function Home() {
 }
 ```
 
+You can also create shared components in your `components/` directory, which can
+be used in both static content and interactive islands. When these components
+are used within islands, interactivity can be added, such as `onClick` handlers
+(using an `onClick` handler on a button outside of an island will not fire).
+
+```tsx islands/my-island.tsx
+import { useSignal } from "@preact/signals";
+import { ComponentChildren } from "preact";
+import Card from "../components/Card.tsx";
+import Button from "../components/Button.tsx";
+
+interface Props {
+  children: ComponentChildren;
+}
+
+export default function MyIsland({ children }: Props) {
+  const count = useSignal(0);
+
+  return (
+    <Card>
+      Counter is at {count}.{" "}
+      <Button onClick={() => (count.value += 1)}>+</Button>
+      {children}
+    </Card>
+  );
+}
+```
+
 ## Passing other props to islands
 
 Passing props to islands is supported, but only if the props are serializable.