diff --git a/apps/docs/scripts/generate-playground-scope.ts b/apps/docs/scripts/generate-playground-scope.ts
index bf621135..91d80302 100644
--- a/apps/docs/scripts/generate-playground-scope.ts
+++ b/apps/docs/scripts/generate-playground-scope.ts
@@ -2,49 +2,20 @@
  * Generates src/generated/playground-scope.generated.ts — the module map the
  * playground preview uses to resolve imports in user code at runtime.
  *
- * Reads the `exports` map of @luke-ui/react so new component subpaths are
- * picked up automatically. Runs via the `generate:playground` script (wired
- * into `docs#generate` in turbo.json), so dev and build always regenerate it.
+ * Reads the specifier list from `playground-runtime-specifiers.ts` so new
+ * `@luke-ui/react` subpaths and the shared third-party allowlist stay in one
+ * place. Runs via the `generate:playground` script (wired into `docs#generate`
+ * in turbo.json), so dev and build always regenerate it.
  */
-import { mkdirSync, readFileSync, writeFileSync } from 'node:fs';
+import { mkdirSync, writeFileSync } from 'node:fs';
 import { dirname, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
-import { z } from 'zod';
+import { playgroundRuntimeSpecifierList } from '../src/lib/playground-runtime-specifiers.ts';
 
 const scriptDir = dirname(fileURLToPath(import.meta.url));
-const reactPackageJsonPath = resolve(scriptDir, '../../../packages/@luke-ui/react/package.json');
 const outputPath = resolve(scriptDir, '../src/generated/playground-scope.generated.ts');
 
-const packageJsonSchema = z.object({
-	exports: z.record(z.string(), z.string()),
-});
-
-const reactPackageJson = packageJsonSchema.parse(
-	JSON.parse(readFileSync(reactPackageJsonPath, 'utf8')),
-);
-
-const lukeUiSpecifiers = Object.keys(reactPackageJson.exports)
-	.flatMap((key) => {
-		const target = reactPackageJson.exports[key];
-		if (key === './package.json' || target === undefined || !target.endsWith('.js')) return [];
-		return [`@luke-ui/react/${key.slice(2)}`];
-	})
-	.sort();
-
-const baseSpecifiers = ['react', 'react-dom', 'react-dom/client', 'react/jsx-runtime'];
-
-// Third-party packages that docs examples import directly (beyond React
-// internals above). Add a package here — and to the types allowlist in
-// generate-playground-types.ts, if its payload cost is reasonable — whenever
-// an example needs to import it in the playground.
-const thirdPartySpecifiers = [
-	'@hookform/resolvers/zod',
-	'@tanstack/react-form',
-	'react-hook-form',
-	'zod',
-];
-
-const specifiers = [...lukeUiSpecifiers, ...baseSpecifiers, ...thirdPartySpecifiers];
+const specifiers = playgroundRuntimeSpecifierList();
 
 const SPECIFIER_TO_IDENTIFIER_RE = /^@|[^a-zA-Z0-9]+/g;
 
diff --git a/apps/docs/src/components/example-block.tsx b/apps/docs/src/components/example-block.tsx
index acad5534..910cb7bb 100644
--- a/apps/docs/src/components/example-block.tsx
+++ b/apps/docs/src/components/example-block.tsx
@@ -46,15 +46,17 @@ function ExampleContent({ mode, src, title }: ExampleBlockProps): JSX.Element {
 		<ExampleFrame
 			actions={
 				<Box className="flex items-center gap-1">
-					<DocsLink
-						className={buttonRecipe({ appearance: 'ghost', size: 'small' })}
-						hash={highlightedSource.playgroundHash}
-						target="_blank"
-						to="/playground"
-					>
-						<Icon aria-hidden className="size-4" name="externalLink" />
-						Open in playground
-					</DocsLink>
+					{highlightedSource.playgroundHash != null ? (
+						<DocsLink
+							className={buttonRecipe({ appearance: 'ghost', size: 'small' })}
+							hash={highlightedSource.playgroundHash}
+							target="_blank"
+							to="/playground"
+						>
+							<Icon aria-hidden className="size-4" name="externalLink" />
+							Open in playground
+						</DocsLink>
+					) : null}
 					<Button
 						appearance="ghost"
 						aria-controls={codeId}
diff --git a/apps/docs/src/lib/highlight-source-plugin.test.ts b/apps/docs/src/lib/highlight-source-plugin.test.ts
index 1def732f..39c9d831 100644
--- a/apps/docs/src/lib/highlight-source-plugin.test.ts
+++ b/apps/docs/src/lib/highlight-source-plugin.test.ts
@@ -34,4 +34,28 @@ describe('highlightSourcePlugin', () => {
 			await rm(directory, { force: true, recursive: true });
 		}
 	});
+
+	test('sets playgroundHash to null when an import is not in the playground scope', async () => {
+		const directory = await mkdtemp(join(tmpdir(), 'luke-ui-highlight-source-'));
+		const path = join(directory, 'example.tsx');
+		const source = "import { DecorativeBox } from './decorative-box.js';\n";
+
+		try {
+			await writeFile(path, source);
+
+			const load = highlightSourcePlugin().load;
+			if (typeof load !== 'function') throw new Error('Expected a plugin load hook');
+
+			const module = await load.call({} as never, `${path}?highlight`);
+			if (typeof module !== 'string') throw new Error('Expected a JavaScript module');
+
+			const highlighted = JSON.parse(
+				module.slice('export default '.length, -';\n'.length),
+			) as HighlightedSource;
+
+			expect(highlighted.playgroundHash).toBeNull();
+		} finally {
+			await rm(directory, { force: true, recursive: true });
+		}
+	});
 });
diff --git a/apps/docs/src/lib/highlight-source-plugin.ts b/apps/docs/src/lib/highlight-source-plugin.ts
index d5c59bb8..a5f8c9ec 100644
--- a/apps/docs/src/lib/highlight-source-plugin.ts
+++ b/apps/docs/src/lib/highlight-source-plugin.ts
@@ -7,6 +7,7 @@ import tsx from 'shiki/langs/tsx.mjs';
 import type { Plugin } from 'vite-plus';
 import type { HighlightedSource } from './highlighted-source.js';
 import { encodeCodeHash } from './playground-hash.js';
+import { canRunInPlayground } from './playground-runtime-specifiers.js';
 import { SHIKI_THEME_REGISTRATIONS, SHIKI_THEMES } from './shiki-theme.js';
 
 const HIGHLIGHT_QUERY = '?highlight';
@@ -58,7 +59,7 @@ export function highlightSourcePlugin(): Plugin {
 						},
 					],
 				}),
-				playgroundHash: encodeCodeHash(source),
+				playgroundHash: canRunInPlayground(source) ? encodeCodeHash(source) : null,
 			};
 
 			return `export default ${JSON.stringify(highlighted)};\n`;
diff --git a/apps/docs/src/lib/highlighted-source.ts b/apps/docs/src/lib/highlighted-source.ts
index fd91dc7a..210d10ab 100644
--- a/apps/docs/src/lib/highlighted-source.ts
+++ b/apps/docs/src/lib/highlighted-source.ts
@@ -4,6 +4,6 @@
 export type HighlightedSource = {
 	/** Shiki markup for the `<code>` element inside Fumadocs `Pre`. */
 	html: string;
-	/** URL hash that opens this source in the playground, as `encodeCodeHash` would produce. */
-	playgroundHash: string;
+	/** URL hash that opens this source in the playground, or null when it cannot run there. */
+	playgroundHash: string | null;
 };
diff --git a/apps/docs/src/lib/playground-runtime-specifiers.test.ts b/apps/docs/src/lib/playground-runtime-specifiers.test.ts
new file mode 100644
index 00000000..3d579189
--- /dev/null
+++ b/apps/docs/src/lib/playground-runtime-specifiers.test.ts
@@ -0,0 +1,63 @@
+import { readFileSync, readdirSync } from 'node:fs';
+import { extname, resolve } from 'node:path';
+import { expect, test } from 'vite-plus/test';
+import {
+	canRunInPlayground,
+	importSpecifiersFromSource,
+	playgroundRuntimeSpecifierList,
+} from './playground-runtime-specifiers.js';
+
+const specifiers = new Set(playgroundRuntimeSpecifierList());
+
+test('treats a relative import as unresolvable in the playground', () => {
+	const source = [
+		"import { Box } from '@luke-ui/react/box';",
+		"import { DecorativeBox } from './decorative-box.js';",
+		'',
+	].join('\n');
+
+	expect(importSpecifiersFromSource(source)).toEqual(['@luke-ui/react/box', './decorative-box.js']);
+	expect(canRunInPlayground(source, specifiers)).toBe(false);
+});
+
+test('treats an example that only imports playground specifiers as runnable', () => {
+	const source = "import { Button } from '@luke-ui/react/button';\n";
+
+	expect(canRunInPlayground(source, specifiers)).toBe(true);
+});
+
+test('documented examples that the playground cannot resolve are the known relative-import pair', () => {
+	const docsDir = resolve(import.meta.dirname, '../../content/docs');
+	const examplesDir = resolve(import.meta.dirname, '../examples');
+	const unrunnable = documentedExampleSources(docsDir)
+		.filter((src) => {
+			const source = readFileSync(resolve(examplesDir, `${src}.tsx`), 'utf8');
+			return !canRunInPlayground(source, specifiers);
+		})
+		.sort();
+
+	expect(unrunnable).toEqual(['overview/concentric-radius', 'overview/radius-roles']);
+});
+
+function documentedExampleSources(docsDir: string): Array<string> {
+	const sources = new Set<string>();
+	const exampleBlockPattern = /<ExampleBlock\b[\s\S]*?\bsrc=["']([^"']+)["']/g;
+
+	for (const file of findMdxFiles(docsDir)) {
+		const contents = readFileSync(file, 'utf8');
+		for (const match of contents.matchAll(exampleBlockPattern)) {
+			const src = match[1];
+			if (src !== undefined) sources.add(src);
+		}
+	}
+
+	return [...sources];
+}
+
+function findMdxFiles(directory: string): Array<string> {
+	return readdirSync(directory, { withFileTypes: true }).flatMap((entry) => {
+		const path = resolve(directory, entry.name);
+		if (entry.isDirectory()) return findMdxFiles(path);
+		return extname(entry.name) === '.mdx' ? [path] : [];
+	});
+}
diff --git a/apps/docs/src/lib/playground-runtime-specifiers.ts b/apps/docs/src/lib/playground-runtime-specifiers.ts
new file mode 100644
index 00000000..8f6349e4
--- /dev/null
+++ b/apps/docs/src/lib/playground-runtime-specifiers.ts
@@ -0,0 +1,93 @@
+import { readFileSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { z } from 'zod';
+
+/** Specifiers the playground always resolves, besides `@luke-ui/react/*` subpaths. */
+const PLAYGROUND_BASE_SPECIFIERS = [
+	'react',
+	'react-dom',
+	'react-dom/client',
+	'react/jsx-runtime',
+] as const;
+
+/**
+ * Third-party packages that docs examples import directly. Add a package here
+ * whenever an example needs to import it in the playground. The Monaco type
+ * list in `generate-playground-types.ts` is a different set on purpose.
+ */
+const PLAYGROUND_THIRD_PARTY_SPECIFIERS = [
+	'@hookform/resolvers/zod',
+	'@tanstack/react-form',
+	'react-hook-form',
+	'zod',
+] as const;
+
+const packageJsonSchema = z.object({
+	exports: z.record(z.string(), z.string()),
+});
+
+const reactPackageJsonPath = resolve(
+	dirname(fileURLToPath(import.meta.url)),
+	'../../../../packages/@luke-ui/react/package.json',
+);
+
+const importSpecifierPattern = /\bfrom\s+["']([^"']+)["']/g;
+const sideEffectImportPattern = /^import\s+["']([^"']+)["']/gm;
+
+function readLukeUiReactExports(): Record<string, string> {
+	return packageJsonSchema.parse(JSON.parse(readFileSync(reactPackageJsonPath, 'utf8'))).exports;
+}
+
+/** `@luke-ui/react/*` specifiers the playground can `require` at runtime. */
+function lukeUiPlaygroundSpecifiers(
+	reactExports: Record<string, string> = readLukeUiReactExports(),
+): Array<string> {
+	return Object.keys(reactExports)
+		.flatMap((key) => {
+			const target = reactExports[key];
+			if (key === './package.json' || target === undefined || !target.endsWith('.js')) return [];
+			return [`@luke-ui/react/${key.slice(2)}`];
+		})
+		.sort();
+}
+
+/** Specifiers `requireModule` in the playground preview can resolve. */
+export function playgroundRuntimeSpecifierList(
+	reactExports: Record<string, string> = readLukeUiReactExports(),
+): Array<string> {
+	return [
+		...lukeUiPlaygroundSpecifiers(reactExports),
+		...PLAYGROUND_BASE_SPECIFIERS,
+		...PLAYGROUND_THIRD_PARTY_SPECIFIERS,
+	];
+}
+
+export function importSpecifiersFromSource(source: string): Array<string> {
+	const specifiers: Array<string> = [];
+
+	for (const match of source.matchAll(importSpecifierPattern)) {
+		const specifier = match[1];
+		if (specifier !== undefined) specifiers.push(specifier);
+	}
+
+	for (const match of source.matchAll(sideEffectImportPattern)) {
+		const specifier = match[1];
+		if (specifier !== undefined) specifiers.push(specifier);
+	}
+
+	return specifiers;
+}
+
+let defaultSpecifiers: ReadonlySet<string> | undefined;
+
+function defaultPlaygroundSpecifiers(): ReadonlySet<string> {
+	return (defaultSpecifiers ??= new Set(playgroundRuntimeSpecifierList()));
+}
+
+export function canRunInPlayground(
+	source: string,
+	specifiers: ReadonlySet<string> = defaultPlaygroundSpecifiers(),
+): boolean {
+	return importSpecifiersFromSource(source).every((specifier) => specifiers.has(specifier));
+}
diff --git a/apps/docs/tsconfig.json b/apps/docs/tsconfig.json
index fa4880c7..12838cc7 100644
--- a/apps/docs/tsconfig.json
+++ b/apps/docs/tsconfig.json
@@ -1,6 +1,7 @@
 {
 	"compilerOptions": {
 		"allowJs": true,
+		"allowImportingTsExtensions": true,
 		"forceConsistentCasingInFileNames": true,
 		"isolatedModules": true,
 		"jsx": "react-jsx",
diff --git a/docs/DOCUMENTATION.md b/docs/DOCUMENTATION.md
index 9ff77a74..701b134e 100644
--- a/docs/DOCUMENTATION.md
+++ b/docs/DOCUMENTATION.md
@@ -391,8 +391,11 @@ Surfaces with no sidebar keep the destinations at every width, moving them to a
 The docs site has a live playground at `/playground`: a Monaco editor with TypeScript IntelliSense
 for `@luke-ui/react`, a live preview iframe, and code shared through the `#code=` URL hash
 (lz-string compressed, plus a `&shape=` param of per-line indent/length pairs so the pre-hydration
-loading skeleton can mirror the shared code before any JavaScript loads). Every `<ExampleBlock>`
-renders an "Open in playground" button that opens its source pre-loaded.
+loading skeleton can mirror the shared code before any JavaScript loads). `<ExampleBlock>` renders
+an "Open in playground" button when the example's imports are all in the playground runtime
+specifier list (`playground-runtime-specifiers.ts`). The button opens that source pre-loaded.
+Examples that import a relative module, or anything else the preview cannot `require`, omit the
+button.
 
 User code compiles in the browser with sucrase and can import `react` and any `@luke-ui/react/*`
 subpath. The import map and editor types are generated by `apps/docs/scripts/`