diff --git a/content/solid/status-glyph.mdx b/content/solid/status-glyph.mdx
index 385cad7..d160a55 100644
--- a/content/solid/status-glyph.mdx
+++ b/content/solid/status-glyph.mdx
@@ -43,6 +43,8 @@ There are five kinds of work, and a way of moving for each. The points are alway
 
 A state that lasts minutes is not minutes of one motion: an activity takes several figures in turn, holding each for a few seconds and then turning into the next. `STATUS_FIGURES` lists every figure on its own, and the `figure` prop plays just one.
 
+In a React Server Components project, the default glyph can be rendered from a server page. A `figure` is a function, so choose from `STATUS_FIGURES` or define a custom figure inside a `"use client"` component, then pass it to `StatusGlyph` there. The same applies to the `figure` prop on `TurnStatus`.
+
 <ComponentPreview name="status-glyph-figures" previewClassName="h-96" />
 
 ## Inline
diff --git a/src/blocks/agent-workspace.tsx b/src/blocks/agent-workspace.tsx
index 3466cee..fa5e813 100644
--- a/src/blocks/agent-workspace.tsx
+++ b/src/blocks/agent-workspace.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import {
   ChevronRightIcon,
diff --git a/src/components/ui/ask-card.tsx b/src/components/ui/ask-card.tsx
index 9b7c7db..2f63447 100644
--- a/src/components/ui/ask-card.tsx
+++ b/src/components/ui/ask-card.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { cn } from "@/lib/utils"
 
 /**
diff --git a/src/components/ui/composer.tsx b/src/components/ui/composer.tsx
index db1ab76..2cd5528 100644
--- a/src/components/ui/composer.tsx
+++ b/src/components/ui/composer.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { ArrowUp, ChevronDown, Square } from "lucide-react"
 
diff --git a/src/components/ui/context-ring.tsx b/src/components/ui/context-ring.tsx
index 37f6f09..300c66f 100644
--- a/src/components/ui/context-ring.tsx
+++ b/src/components/ui/context-ring.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { ChevronDown } from "lucide-react"
 
diff --git a/src/components/ui/status-glyph.tsx b/src/components/ui/status-glyph.tsx
index c0e1e8a..8dd1ebd 100644
--- a/src/components/ui/status-glyph.tsx
+++ b/src/components/ui/status-glyph.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 
 import { cn } from "@/lib/utils"
diff --git a/src/components/ui/tool-steps.tsx b/src/components/ui/tool-steps.tsx
index 6d9071e..f55b21d 100644
--- a/src/components/ui/tool-steps.tsx
+++ b/src/components/ui/tool-steps.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { ChevronRight } from "lucide-react"
 
diff --git a/src/components/ui/turn-status.tsx b/src/components/ui/turn-status.tsx
index 944cffa..53600c4 100644
--- a/src/components/ui/turn-status.tsx
+++ b/src/components/ui/turn-status.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import { ChevronRight } from "lucide-react"
 
diff --git a/src/site/component-preview.tsx b/src/site/component-preview.tsx
index 330df41..a408155 100644
--- a/src/site/component-preview.tsx
+++ b/src/site/component-preview.tsx
@@ -42,9 +42,6 @@ function useSource(load: (() => Promise<string>) | undefined) {
   return text
 }
 
-/** As it would be written in a project: the site's own paths become the ones shadcn installs to. */
-const asInstalled = (code: string) => code.replace(/^"use client"\n\n?/, "")
-
 /**
  * A component shown live over its code, as on ui.shadcn.com: the preview on top, and under it the
  * first lines of the source, fading out, with a button that shows the rest.
@@ -67,7 +64,7 @@ export function ComponentPreview({
   const Example = exampleOf(name)
   const source = useSource(sources[`/src/examples/${name}.tsx`])
   const [open, setOpen] = React.useState(false)
-  const code = source ? asInstalled(source) : ""
+  const code = source ?? ""
 
   return (
     <div data-slot="component-preview" className={cn("group relative mt-4 mb-12 flex flex-col overflow-hidden rounded-2xl border", wrapperClassName)}>