From bb38a8abfbb33650c544b4b5025db865f07b4b69 Mon Sep 17 00:00:00 2001
From: Bo Bramer <bramer.bo@gmail.com>
Date: Thu, 30 Jul 2026 08:50:39 -0700
Subject: [PATCH 1/2] rich typing for slice zone

---
 examples/with-typescript/index.tsx | 19 +++++++++++++++++++
 src/SliceZone.tsx                  |  9 ++++-----
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/examples/with-typescript/index.tsx b/examples/with-typescript/index.tsx
index 0d04f50..86f748c 100644
--- a/examples/with-typescript/index.tsx
+++ b/examples/with-typescript/index.tsx
@@ -102,3 +102,22 @@ export const WithSliceZone = (): ReactNode => {
 		/>
 	);
 };
+
+// Rendering a Slice Zone with a specific context contract looks like this.
+// Note that the `context` prop is required when the `SliceZone` is supplied with a generic.
+type RichContext = { name: string; age: number };
+export const WithContextRichSliceZone = (): ReactNode => {
+	return (
+		<SliceZone<RichContext>
+			slices={page.data.slices}
+			components={{
+				hero: () => <div>Hero Slice</div>,
+				call_to_action: () => <div>Call to Action Slice</div>,
+			}}
+			context={{
+				name: "Bo",
+				age: 25,
+			}}
+		/>
+	);
+};
diff --git a/src/SliceZone.tsx b/src/SliceZone.tsx
index 73a94a1..857f5e6 100644
--- a/src/SliceZone.tsx
+++ b/src/SliceZone.tsx
@@ -1,6 +1,6 @@
 import type { Slice } from "@prismicio/client";
 import { DEV } from "esm-env";
-import type { ComponentType, FC, ReactNode } from "react";
+import type { ComponentType, ReactNode } from "react";
 
 /**
  * Returns the type of a `SliceLike` type.
@@ -137,7 +137,7 @@ export type SliceZoneComponents<TSlice extends SliceLike = SliceLike, TContext =
  * @typeParam TSlice - The type(s) of a slice in the slice zone.
  * @typeParam TContext - Arbitrary data made available to all slice components.
  */
-export type SliceZoneProps<TContext = unknown> = {
+export type SliceZoneProps<TContext = never> = {
 	/** List of slice data from the slice zone. */
 	slices?: SliceZoneLike;
 
@@ -150,8 +150,7 @@ export type SliceZoneProps<TContext = unknown> = {
 	defaultComponent?: ComponentType<SliceComponentProps<any, TContext>>;
 
 	/** Arbitrary data made available to all slice components. */
-	context?: TContext;
-};
+} & ([TContext] extends [never] ? { context?: never } : { context: TContext });
 
 /**
  * This slice component can be used as a reminder to provide a proper implementation.
@@ -190,7 +189,7 @@ export const TODOSliceComponent = <TSlice extends SliceLike>({
  *
  * @see Learn how to create slices, use slice variations, and display slices: {@link https://prismic.io/docs/slices}
  */
-export const SliceZone: FC<SliceZoneProps> = (props) => {
+export const SliceZone = <T = never>(props: SliceZoneProps<T>): ReactNode | Promise<ReactNode> => {
 	const { slices = [], components = {}, defaultComponent, context = {} } = props;
 
 	const renderedSlices = slices.map((slice, index) => {

From b5af01079386d72fec4294f44709e2a46e479d45 Mon Sep 17 00:00:00 2001
From: Bo Bramer <bramer.bo@gmail.com>
Date: Thu, 30 Jul 2026 09:59:52 -0700
Subject: [PATCH 2/2] better backwards compatibility

---
 src/SliceZone.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/SliceZone.tsx b/src/SliceZone.tsx
index 857f5e6..7da6a88 100644
--- a/src/SliceZone.tsx
+++ b/src/SliceZone.tsx
@@ -137,7 +137,7 @@ export type SliceZoneComponents<TSlice extends SliceLike = SliceLike, TContext =
  * @typeParam TSlice - The type(s) of a slice in the slice zone.
  * @typeParam TContext - Arbitrary data made available to all slice components.
  */
-export type SliceZoneProps<TContext = never> = {
+export type SliceZoneProps<TContext = unknown> = {
 	/** List of slice data from the slice zone. */
 	slices?: SliceZoneLike;
 
@@ -150,7 +150,7 @@ export type SliceZoneProps<TContext = never> = {
 	defaultComponent?: ComponentType<SliceComponentProps<any, TContext>>;
 
 	/** Arbitrary data made available to all slice components. */
-} & ([TContext] extends [never] ? { context?: never } : { context: TContext });
+} & (unknown extends TContext ? { context?: TContext } : { context: TContext });
 
 /**
  * This slice component can be used as a reminder to provide a proper implementation.