diff --git a/apps/recipes-react-components/.storybook/preview.js b/apps/recipes-react-components/.storybook/preview.js
new file mode 100644
index 00000000000000..cacb8663c76486
--- /dev/null
+++ b/apps/recipes-react-components/.storybook/preview.js
@@ -0,0 +1,7 @@
+import { FluentDocsContainer } from '../src/DocComponents/FluentDocsContainer.stories';
+
+export const parameters = {
+  docs: {
+    container: FluentDocsContainer,
+  },
+};
diff --git a/apps/recipes-react-components/src/DocComponents/FluentDocsContainer.stories.tsx b/apps/recipes-react-components/src/DocComponents/FluentDocsContainer.stories.tsx
new file mode 100644
index 00000000000000..bd362d22c04177
--- /dev/null
+++ b/apps/recipes-react-components/src/DocComponents/FluentDocsContainer.stories.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { DocsContainer, DocsContextProps } from '@storybook/addon-docs';
+import { FluentStoryContext } from '@fluentui/react-storybook-addon';
+import { webLightTheme, FluentProvider } from '@fluentui/react-components';
+
+type FluentDocsContainerProps = {
+  context: FluentStoryContext & DocsContextProps;
+};
+
+export const FluentDocsContainer: React.FC<FluentDocsContainerProps> = ({ children, context }) => {
+  return (
+    <FluentProvider theme={webLightTheme}>
+      <DocsContainer context={context}>{children}</DocsContainer>
+    </FluentProvider>
+  );
+};