diff --git a/source/nodejs/adaptivecards-react/README.md b/source/nodejs/adaptivecards-react/README.md
index 6ce0e9f362..c8ea76c6a6 100644
--- a/source/nodejs/adaptivecards-react/README.md
+++ b/source/nodejs/adaptivecards-react/README.md
@@ -65,3 +65,24 @@ import {ProvidesHostConfigContext, AdaptiveCardUsingHostConfigContext } from "ad
         </...>    
       </ProvidesHostConfigContext>
 ```
+
+- extend AdativeCard with [custom elements](https://learn.microsoft.com/en-us/adaptive-cards/sdk/rendering-cards/javascript/extensibility):
+
+```tsx
+import { CardElement, CardObjectRegistry, GlobalRegistry, SerializationContext } from "adaptivecards";
+
+// populate element registry
+const elementRegistry = new CardObjectRegistry<CardElement>();
+GlobalRegistry.populateWithDefaultElements(elementRegistry);
+elementRegistry.register(CustomElement.JsonTypeName, CustomElement);
+
+// customize serialization context
+const serializationContext = new SerializationContext();
+serializationContext.setElementRegistry(elementRegistry);
+
+// ...
+
+// pass context to the adaptive card host
+    <AdaptiveCard payload={card} hostConfig={hostConfig} serializationContext={serializationContext} />
+
+```
diff --git a/source/nodejs/adaptivecards-react/src/adaptive-card.tsx b/source/nodejs/adaptivecards-react/src/adaptive-card.tsx
index fa617c7ceb..9a2fb1f2d3 100644
--- a/source/nodejs/adaptivecards-react/src/adaptive-card.tsx
+++ b/source/nodejs/adaptivecards-react/src/adaptive-card.tsx
@@ -21,6 +21,7 @@ export interface Props {
     onError?: Function;
     style?: object;
     hostConfig?: object;
+    serializationContext?: AdaptiveCards.SerializationContext;
 }
 
 const propTypes = {
@@ -40,6 +41,8 @@ const propTypes = {
     style: PropTypes.object,
     /** HostConfig. [More Info](https://docs.microsoft.com/en-us/adaptive-cards/rendering-cards/host-config) */
     hostConfig: PropTypes.object,
+    /** Custom serialization context for elements customization. [More Info](https://learn.microsoft.com/en-us/adaptive-cards/sdk/rendering-cards/javascript/extensibility) */
+    serializationContext: PropTypes.object
 };
 
 const defaultOpenUrlHandler = (action: AdaptiveCards.OpenUrlAction) => {
@@ -66,6 +69,7 @@ export const AdaptiveCard = ({
     onError,
     style,
     hostConfig,
+    serializationContext
 }: Props) => {
     const [error, setError] = useState<Error>();
     const targetRef = useRef<HTMLDivElement>(null);
@@ -122,7 +126,7 @@ export const AdaptiveCard = ({
         const card = cardRef.current;
 
         try {
-            card.parse(payload);
+            card.parse(payload, serializationContext);
             const result = card.render() as HTMLElement;
             const trustedHtml = (typeof window === 'undefined') ? "" : (window.trustedTypes?.emptyHTML ?? "");
             targetRef.current.innerHTML = trustedHtml as string;