diff --git a/.changeset/violet-pots-push.md b/.changeset/violet-pots-push.md
new file mode 100644
index 0000000000..8e668977a9
--- /dev/null
+++ b/.changeset/violet-pots-push.md
@@ -0,0 +1,7 @@
+---
+'@backstage/plugin-stack-overflow': patch
+'@backstage/plugin-home-react': patch
+'@backstage/plugin-home': patch
+---
+
+Extract new plugin-home-react package and deprecate createCardExtension in plugin-home
diff --git a/plugins/home-react/api-report.md b/plugins/home-react/api-report.md
new file mode 100644
index 0000000000..43fdbf403c
--- /dev/null
+++ b/plugins/home-react/api-report.md
@@ -0,0 +1,198 @@
+## API Report File for "@backstage/plugin-home"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+/// <reference types="react" />
+
+import { BackstagePlugin } from '@backstage/core-plugin-api';
+import { Extension } from '@backstage/core-plugin-api';
+import { default as React_2 } from 'react';
+import { ReactElement } from 'react';
+import { ReactNode } from 'react';
+import { RJSFSchema } from '@rjsf/utils';
+import { RouteRef } from '@backstage/core-plugin-api';
+
+// @public (undocumented)
+export type CardExtensionProps<T> = ComponentRenderer & {
+  title?: string;
+} & T;
+
+// @public (undocumented)
+export type CardLayout = {
+  width?: {
+    minColumns?: number;
+    maxColumns?: number;
+    defaultColumns?: number;
+  };
+  height?: {
+    minRows?: number;
+    maxRows?: number;
+    defaultRows?: number;
+  };
+};
+
+// @public (undocumented)
+export type CardSettings = {
+  schema?: RJSFSchema;
+};
+
+// @public (undocumented)
+export type ClockConfig = {
+  label: string;
+  timeZone: string;
+};
+
+// @public (undocumented)
+export const ComponentAccordion: (props: {
+  title: string;
+  expanded?: boolean | undefined;
+  Content: () => JSX.Element;
+  Actions?: (() => JSX.Element) | undefined;
+  Settings?: (() => JSX.Element) | undefined;
+  ContextProvider?: ((props: any) => JSX.Element) | undefined;
+}) => JSX.Element;
+
+// @public (undocumented)
+export type ComponentParts = {
+  Content: (props?: any) => JSX.Element;
+  Actions?: () => JSX.Element;
+  Settings?: () => JSX.Element;
+  ContextProvider?: (props: any) => JSX.Element;
+};
+
+// @public (undocumented)
+export type ComponentRenderer = {
+  Renderer?: (props: RendererProps) => JSX.Element;
+};
+
+// @public (undocumented)
+export const ComponentTab: (props: {
+  title: string;
+  Content: () => JSX.Element;
+  ContextProvider?: ((props: any) => JSX.Element) | undefined;
+}) => JSX.Element;
+
+// @public (undocumented)
+export const ComponentTabs: (props: {
+  title: string;
+  tabs: {
+    label: string;
+    Component: () => JSX.Element;
+  }[];
+}) => JSX.Element;
+
+// @public
+export function createCardExtension<T>(options: {
+  title: string;
+  components: () => Promise<ComponentParts>;
+  name?: string;
+  description?: string;
+  layout?: CardLayout;
+  settings?: CardSettings;
+}): Extension<(props: CardExtensionProps<T>) => JSX.Element>;
+
+// @public
+export const CustomHomepageGrid: (
+  props: CustomHomepageGridProps,
+) => JSX.Element;
+
+// @public (undocumented)
+export type CustomHomepageGridProps = {
+  children?: ReactNode;
+  config?: LayoutConfiguration[];
+  rowHeight?: number;
+};
+
+// @public
+export const HeaderWorldClock: (props: {
+  clockConfigs: ClockConfig[];
+  customTimeFormat?: Intl.DateTimeFormatOptions | undefined;
+}) => JSX.Element | null;
+
+// @public
+export const HomePageCompanyLogo: (props: {
+  logo?: ReactNode;
+  className?: string | undefined;
+}) => JSX.Element;
+
+// @public (undocumented)
+export const HomepageCompositionRoot: (props: {
+  title?: string | undefined;
+  children?: ReactNode;
+}) => JSX.Element;
+
+// @public (undocumented)
+export const HomePageRandomJoke: (
+  props: CardExtensionProps<{
+    defaultCategory?: 'any' | 'programming' | undefined;
+  }>,
+) => JSX.Element;
+
+// @public
+export const HomePageStarredEntities: (
+  props: CardExtensionProps<unknown>,
+) => JSX.Element;
+
+// @public
+export const HomePageToolkit: (
+  props: CardExtensionProps<ToolkitContentProps>,
+) => JSX.Element;
+
+// @public (undocumented)
+export const homePlugin: BackstagePlugin<
+  {
+    root: RouteRef<undefined>;
+  },
+  {},
+  {}
+>;
+
+// @public
+export type LayoutConfiguration = {
+  component: ReactElement | string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+
+// @public (undocumented)
+export type RendererProps = {
+  title: string;
+} & ComponentParts;
+
+// @public (undocumented)
+export const SettingsModal: (props: {
+  open: boolean;
+  close: Function;
+  componentName: string;
+  children: JSX.Element;
+}) => JSX.Element;
+
+// @public (undocumented)
+export const TemplateBackstageLogo: (props: {
+  classes: {
+    svg: string;
+    path: string;
+  };
+}) => JSX.Element;
+
+// @public (undocumented)
+export const TemplateBackstageLogoIcon: () => JSX.Element;
+
+// @public (undocumented)
+export type Tool = {
+  label: string;
+  url: string;
+  icon: React_2.ReactNode;
+};
+
+// @public
+export type ToolkitContentProps = {
+  tools: Tool[];
+};
+
+// @public
+export const WelcomeTitle: () => JSX.Element;
+```