diff --git a/components/vf-card/CHANGELOG.md b/components/vf-card/CHANGELOG.md
index 2b12445b32..1de574f73a 100755
--- a/components/vf-card/CHANGELOG.md
+++ b/components/vf-card/CHANGELOG.md
@@ -1,3 +1,8 @@
+### 2.6.1
+
+* Added react version of component.
+  * https://github.com/visual-framework/vf-core/pull/1632
+
 ### 2.6.0
 
 * Requires at least `@visual-framework@vf-sass-config@2.6.1`.
diff --git a/components/vf-card/vf-card.jsx b/components/vf-card/vf-card.jsx
new file mode 100644
index 0000000000..353fccbacf
--- /dev/null
+++ b/components/vf-card/vf-card.jsx
@@ -0,0 +1,75 @@
+import { VfClassNormalize } from "../../tools/vf-extensions-react/vf-extensions-react";
+
+export function VFCard({
+  card_image,
+  card_image__alt,
+  card_custom_aspect_ratio,
+  card_heading,
+  card_href,
+  card_subheading,
+  card_text,
+  variant,
+  modifiers,
+  override_class,
+  id,
+  theme,
+  newTheme,
+}) {
+  const cardClasses = VfClassNormalize(
+    "vf-card",
+    theme && `vf-card-theme--${theme}`,
+    newTheme &&
+      (newTheme === "primary" ? "vf-card--brand" : `vf-card--${newTheme}`),
+    variant && `vf-card--${variant}`,
+    modifiers,
+    override_class
+  );
+  return (
+    <article
+      id={id}
+      className={cardClasses}
+      style={{ "--vf-card__image--aspect-ratio": card_custom_aspect_ratio }}
+    >
+      {card_image && (
+        <img
+          src={card_image}
+          alt={card_image__alt}
+          className="vf-card__image"
+          loading="lazy"
+        />
+      )}
+      <div className="vf-card__content | vf-stack vf-stack--400">
+        <h3 className="vf-card__heading">
+          <a className="vf-card__link" href={card_href}>
+            {card_heading}
+            <svg
+              aria-hidden="true"
+              className="vf-card__heading__icon | vf-icon vf-icon-arrow--inline-end"
+              width="1em"
+              height="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M0 12c0 6.627 5.373 12 12 12s12-5.373 12-12S18.627 0 12 0C5.376.008.008 5.376 0 12zm13.707-5.209l4.5 4.5a1 1 0 010 1.414l-4.5 4.5a1 1 0 01-1.414-1.414l2.366-2.367a.25.25 0 00-.177-.424H6a1 1 0 010-2h8.482a.25.25 0 00.177-.427l-2.366-2.368a1 1 0 011.414-1.414z"
+                fill="currentColor"
+                fillRule="nonzero"
+              ></path>
+            </svg>
+          </a>
+        </h3>
+        {card_subheading && (
+          <p className="vf-card__subheading">{card_subheading}</p>
+        )}
+        {card_text && <p className="vf-card__text">{card_text}</p>}
+      </div>
+    </article>
+  );
+}
+
+VFCard.Container = function VFCardContainer({ children }) {
+  return (
+    <section className="vf-card-container">
+      <div className="vf-card-container__inner">{children}</div>
+    </section>
+  );
+};
diff --git a/components/vf-card/vf-card.react.js b/components/vf-card/vf-card.react.js
deleted file mode 100644
index f370da2415..0000000000
--- a/components/vf-card/vf-card.react.js
+++ /dev/null
@@ -1,39 +0,0 @@
-// vf-card for React
-// See vf-extensions-react for usage guidance
-// We use vanilla JS templates for react for compatibility with create react app
-// ---
-import React from "react";
-import Fragment from "react-dom-fragment";
-// eslint-disable-next-line no-unused-vars
-import VfCardTemplate from "./vf-card.precompiled.js"; // import templates before the nunjucks env
-import { vfNunjucksEnv } from "@visual-framework/vf-extensions-react/vf-extensions-react.js";
-
-// any JS actions needed on component insertion
-class VfCardCallback extends React.Component {
-  componentDidMount() {
-    // console.log("any JS actions needed");
-  }
-
-  render() {
-    return React.createElement(React.Fragment, null);
-  }
-}
-
-const VfCard = React.memo(({
-  variant, newTheme, card_image, card_text, card_image__alt, card_title
-}) => {
-  return React.createElement(React.Fragment, null,
-    React.createElement(Fragment, {
-      dangerouslySetInnerHTML: {
-        // our HTML is handled by nunjucks, this should not receive user input
-        __html: vfNunjucksEnv.render("vf-card", {
-          variant: variant, newTheme: newTheme, card_image: card_image, card_text: card_text, card_image__alt: card_image__alt, card_title: card_title
-        })
-      }
-    }),
-    React.createElement(VfCardCallback, null)
-  );
-}
-);
-
-export { VfCard };